Afbeeldingen optimaal gebruiken in YOOtheme

YOOtheme Pro doet veel automatisch, maar de grootste winst zit in het goed voorbereiden van je afbeeldingen. Door de juiste afmetingen en bestandsformaten te gebruiken, wordt je website sneller, scherper en beter vindbaar in zoekmachines.

1. Gebruik het juiste bestandsformaat

Kies het bestandsformaat dat past bij het type afbeelding.

Afbeelding	Aanbevolen formaat
Foto's	WebP
Afbeeldingen met transparantie	PNG of WebP
Logo's en iconen	SVG
Illustraties	SVG of WebP
Animaties	MP4 of WebM (gebruik liever geen GIF)

Tip: WebP-bestanden zijn vaak 25 tot 50% kleiner dan JPG zonder zichtbaar kwaliteitsverlies.

2. Upload geen onnodig grote afbeeldingen

Een veelgemaakte fout is het uploaden van een originele foto van bijvoorbeeld 6000 × 4000 pixels, terwijl deze op de website slechts 1200 pixels breed wordt weergegeven.

Gebruik daarom onderstaande richtlijnen.

Gebruik	Aanbevolen breedte
Full-width banner	1920 - 2560 px
Normale pagina-afbeelding	1200 - 1600 px
Afbeelding naast tekst	800 - 1200 px
Teamfoto	600 - 800 px
Logo	SVG

3. Houd bestanden zo klein mogelijk

Probeer onderstaande bestandsgroottes aan te houden.

Type afbeelding	Aanbevolen grootte
Kleine afbeelding	minder dan 100 KB
Normale contentafbeelding	100 - 250 KB
Grote banner	250 - 500 KB

Hoe kleiner het bestand, hoe sneller de pagina laadt.

4. Gebruik altijd het Image-element van YOOtheme

Gebruik bij voorkeur het Image-element van YOOtheme en niet een losse afbeelding in een HTML-element.

YOOtheme zorgt dan automatisch voor:

Responsive afbeeldingen (verschillende formaten)
Automatische srcset
Lazy loading
Optimale weergave op mobiel, tablet en desktop

5. Kies de juiste afbeeldingsgrootte

Bij veel elementen kun je onder Image → Size kiezen uit:

Small
Medium
Large
XLarge

Gebruik niet overal XLarge. Kies een formaat dat past bij de ruimte waarin de afbeelding wordt weergegeven.

6. Gebruik een vaste beeldverhouding

Een consistente verhouding zorgt voor een rustige uitstraling.

Situatie	Verhouding
Banners	16 : 9
Nieuwsafbeeldingen	4 : 3
Personen / Teams	1 : 1
Algemene foto's	3 : 2

7. Voeg altijd een alt-tekst toe

Een alt-tekst is belangrijk voor toegankelijkheid én zoekmachines.

Goed voorbeeld

Jeugdteam tijdens hockeytraining

Minder goed

IMG_4827.jpg

8. Gebruik SVG voor logo's en iconen

SVG-bestanden zijn:

Altijd haarscherp
Zeer klein
Oneindig schaalbaar

9. Achtergrondafbeelding of Image-element?

Gebruik	Kies
De afbeelding bevat belangrijke informatie	Image-element
De afbeelding is alleen decoratief	Achtergrondafbeelding

10. Lazy Loading

YOOtheme schakelt Lazy Loading automatisch in voor afbeeldingen die pas later in beeld komen. Daardoor worden pagina's sneller geladen. Gebruik daarom geen onnodig grote achtergrondafbeeldingen bovenaan een pagina.

11. Gebruik het Focus Point

Wanneer een afbeelding wordt bijgesneden, kun je een Focus Point instellen. Hiermee blijft bijvoorbeeld een gezicht of logo altijd goed zichtbaar op mobiele apparaten.

12. Vermijd tekst in afbeeldingen

Gebruik liever de tekstmogelijkheden van YOOtheme zelf.

Dit is:

beter leesbaar op mobiele apparaten;
toegankelijker;
beter voor zoekmachines;
eenvoudiger aan te passen.

Praktische richtlijnen

Type afbeelding	Formaat	Breedte	Bestandsgrootte
Banner	WebP	1920 px	250 - 500 KB
Pagina-afbeelding	WebP	1200 px	100 - 250 KB
Teamfoto	WebP	800 px	50 - 150 KB
Logo	SVG	Niet van toepassing	Zo klein mogelijk
Achtergrondafbeelding	WebP	1920 px	250 - 500 KB

Stappenplan

Maak of exporteer de afbeelding op de juiste afmetingen.
Sla de afbeelding op als WebP (of SVG voor logo's).
Upload de afbeelding naar Joomla.
Gebruik het Image-element van YOOtheme.
Stel indien nodig de beeldverhouding en het Focus Point in.
Voeg een duidelijke alt-tekst toe.

Samenvatting

Door afbeeldingen vooraf te optimaliseren en gebruik te maken van de mogelijkheden van YOOtheme, zorg je voor een snelle, professionele en goed toegankelijke website. Kleine bestanden, de juiste afmetingen en het gebruik van het Image-element leveren de beste resultaten op.