Tips voor een betere afbeelding optimalisatie op je website

Visuele informatie is super belangrijk, vooral online. Afbeeldingen vallen op en we zien bijv. foto’s vaak eerder dan de tekst die erbij staat. Maar als je een afbeelding in je content wilt gebruiken, moet je deze echter wel optimaliseren voor het web. Het uiteindelijke doel van afbeelding optimalisatie is om o.a. bezoekers een moeiteloze ervaring te bieden, maar je kunt ook meer organisch verkeer op jouw website krijgen.

Dit artikel bevat een aantal aanbevelingen en tips voor afbeelding optimalisatie met betrekking tot zoekmachine vriendelijkheid, toegankelijkheid, gebruikservaring, bestandsformaat, snelheid, afmeting, etc.

#Gebruik alleen afbeeldingen die relevant zijn

Relevantie is de belangrijkste eigenschap van een afbeelding. De meeste plaatjes op websites zijn helaas niet echt relevant en daardoor vaak nutteloze aandachttrekkers.

Plaatjes die het verhaal ondersteunen vind je niet zomaar. Gebruik liever authentieke fotografie van personages, locaties en gebeurtenissen uit het achterliggend verhaal en vermijd de –over het algemeen– nietszeggende foto’s uit beeldbanken (stockfotografie). Je kunt uiteraard ook illustraties gebruiken, zoals grafieken en diagrammen.

#Kies het juiste bestandstype voor je afbeelding

Er zijn meerdere ‘standaard’ bestandstypen die we op het internet kunnen gebruiken, zoals o.a.: .JPG, .PNG, WebP, .SVG. Een correct gekozen bestandstype voor je afbeeldingen is een eerste belangrijke stap die genomen moet worden voordat je verder kan met afbeelding optimalisatie.

#Gebruik geschikte afbeeldingsgroottes

De grootte van een afbeelding wordt aangegeven in pixels. Dit zijn eigenlijk de puntjes (pixels/dots) waaruit een digitale foto is opgebouwd. Ieder puntje heeft één kleur. Een foto is dus bijvoorbeeld 1980×1024 (1980 pixels breed en 1024 pixels hoog). In het algemeen geldt: des te groter de afmeting van een afbeelding, des te zwaarder de bestandsgrootte.

Afbeeldingen zwaarder dan 500Kb (na comprimeren en aanpassen afbeeldingsgrootte) zijn af te raden. Uiteraard is de positie van de afbeelding in de layout zeer belangrijk voor de keuze qua afbeeldingsgrootte (als je een ‘full-width’ header afbeelding wilt gebruiken zou ik aanraden om deze bijvoorbeeld 2400 pixels breed te maken).

Behalve het formaat, bestaat er ook nog de pixeldichtheid, ook wel bekend als resolutie. Deze geeft aan hoeveel pixels er in een bepaalde oppervlakte zitten. Daarbij geldt: hoe meer pixels per inch (ppi), hoe scherper de foto.

Afbeeldingen op het internet zijn per definitie slechts 72 ppi (pixels per inch), het is dus totaal overbodig om een ‘zware’ afbeelding van 300 ppi te uploaden naar een webpagina.

#Comprimeer je afbeeldingen voor een snellere laadtijd

Veel afbeeldingen zijn niet gecomprimeerd. Een correct gekozen afbeeldingsformaat en juiste afmetingen zijn een goede eerste stap. Compressie is de volgende stap. Er zijn een heleboel solide afbeelding compressie tools gratis op het internet aanwezig, maar helaas niet iedereen gebruikt ze.

Maar er zijn ook meerdere WordPress plugins voor ‘image optimization’ beschikbaar. Op deze website gebruik ik de gratis WordPress plugin Imagify, omdat deze plugin o.a. mijn standaard .JPG/.PNG afbeeldingen kan omzetten naar .WebP afbeeldingen, wat mijn laadtijd voor afbeeldingen drastisch verminderd.

#Geef afbeeldingen een relevante bestandsnaam

Door de bestandsnaam van de afbeelding een relevante naam mee te geven, verbeter je de zoekmachine positie van je afbeelding op Google. Hou bestandsnamen beschrijvend en duidelijk en zorg voor bestandsnamen die een indicatie zijn waar de afbeelding over gaat.

#Vul altijd de ALT-tekst (Alternatieve tekst) in

Google hecht relatief veel waarde aan de ALT-tekst, ook wel ALT-tag of ALT-attribute genoemd. Google gebruikt het om te bepalen wat er op de afbeelding staat, maar ook hoe het zich verhoudt tot de omliggende tekst.

Elke afbeelding moet dus een ALT-tekst bevatten. Niet alleen voor zoekmachine optimalisatie, maar ook omdat blinden en slechtzienden anders niet weten waar de afbeelding over gaat. De ALT-tekst wordt namelijk gebruikt door screenreaders om deze vervolgens voor te lezen. Een TITLE-tag is niet vereist.

Maar de ALT-tekst is ook de tekst die wordt toegevoegd aan een afbeelding wanneer de afbeelding niet kan worden geladen, niet wordt weergegeven of niet wordt ondersteund door de browser.

<img src="afbeeldingsnaam.png" alt="vul ALT-tekst in">

Een lege ALT-tag zorgt ervoor dat schermlezers de afbeelding overslaan, dus laat een ALT-tag leeg als de afbeelding bijvoorbeeld puur decoratief is. In WordPress kun je het veld voor “Alt tekst (alternatieve tekst)” in de afbeelding-instellingen leeg laten.

#Gebruik bijschriften/captions waar nodig

Plaats een omschrijving van de afbeelding in het bijschrift/caption als dit nuttig is voor je bezoekers. Bezoekers lezen namelijk de captions van afbeeldingen. Dit verhoogt op zijn beurt weer de duur van het bezoek op de pagina. Maar onthoud; niet elke afbeelding heeft een bijschrift nodig.

<figcaption>fig.1: Hier kan een bijschrift staan behorende bij de afbeelding</figcaption>

#Gebruik de juiste locatie in de layout voor afbeeldingen

Plaatjes die het verhaal helpen vertellen, kun je het beste boven het verhaal plaatsen. Dit wekt de nieuwsgierigheid van de lezer die vervolgens voor een nadere uitleg de tekst gaat lezen. Gebruik de titel als onderschrift voor deze afbeelding. Paginatitels die onder de afbeelding staan, worden door meer mensen gelezen.

Zorg er ook voor dat het belangrijkste (focus point) van je afbeelding in het midden staat. Zo wordt de essentie van de afbeelding op alle beeldschermen, van computerscherm tot mobiele telefoon, goed en mooi vertoond.

#Lazy Load je afbeeldingen

Bij Lazy Loading wordt er in plaats van alle afbeeldingen/video’s/iframes (die op een webpagina staan) in één keer te downloaden, media content pas geladen zodra deze in de viewport komt (d.i. het zichtbare gedeelte van een webpagina in het browserscherm). Dat kan de laadtijd van een pagina aanzienlijk versnellen en ervoor zorgen dat bezoekers niet snel afhaken door trage laadtijden. 

Lazy loading is meer een gebruiksvriendelijke actie omdat het je afbeeldingen pas laadt als deze in de viewport zichtbaar zijn, dit is geen afbeelding optimalisatie, maar meer bepalen wanneer een item wel/niet mag laden.

#Zorg dat je gebruik maakt van ‘Caching’

Terwijl een bezoeker door de pagina scrolt, worden o.a. de broncodes en media content gecached in de browser. Cache is een soort opslagplaats waar data tijdelijk wordt opgeslagen om een volgende keer sneller toegang te hebben tot die data. Dat zorgt de volgende keer, als je dezelfde pagina later nog eens bezoekt, deze sneller in beeld komt.

Er zijn ook WordPress Cache plugins beschikbaar, sommige caching-plugins kunnen er tevens voor zorgen dat de laadtijd van een website drastisch wordt verlaagd. En een snellere laadtijd is tegenwoordig een belangrijk onderdeel van zoekmachine optimalisatie van elke website.

#Gebruik :focus als je een afbeelding gebruikt als link

Geef bezoekers die met het toetsenbord navigeren (visueel) duidelijk aan als je een afbeelding als link gebruikt. Door middel van een zichtbare ‘outline’ (of met een specifieke CSS styling) weet jouw bezoeker welk onderdeel van de webpagina actief is. Dit geldt voor alle elementen waar een link op zit, zoals: afbeeldingen, tekstlinks, knoppen en andere elementen.

a:focus img { outline: 5px solid orange; }

#Maak gebruik van Responsive images (code)

Wist je dat afbeeldingen gemiddeld meer dan 60% van de bytes uitmaken van een gemiddelde ​​webpagina? Het gebruiken van responsive afbeeldingen leidt tot een betere gebruikerservaring, voor het grote aantal verschillende beeldscherm formaten en resoluties waarop jouw website is te zien.

Webpagina’s gebruiken <img srcset> of het HTML element <picture> om responsive afbeeldingen aan te geven. Sommige browsers en crawlers begrijpen deze HTML elementen echter niet, gebruik dus altijd een fallback-URL <img src>.

<figure class="wp-block-image size-large">
<img src="https://www.gonzodesign.nl/bestandsnaam.png" data-lazy-type="image" data-src="www.gonzodesign.nl/bestandsnaam.png" alt="Beschrijving Afbeelding" class="wp-image-4952 lazy-loaded" srcset="https://www.gonzodesign.nl/bestandsnaam.png 1600w, https://www.gonzodesign.nl/bestandsnaam.png-768x439.png 768w, https://www.gonzodesign.nl/bestandsnaam.png-1536x878.png 1536w" data-srcset="" sizes="(max-width: 1600px) 100vw, 1600px">
</figure>

Sinds WordPress versie 4.4 worden responsive afbeeldingen automatisch ondersteund door de srcset– en size-attributen toe te voegen aan de markup die de afbeelding genereert.

#Zorg voor een opgeruimde mediabibliotheek (WordPress)

Alle afbeeldingen, video’s, PDF’s en andere bestanden die je uploadt naar je website worden opgeslagen in de mediabibliotheek. Het advies is om eens in de zoveel tijd de mediabibliotheek op te schonen. Zelf gebruik ik hiervoor de gratis plugin Media Cleaner van Meow Apps.

#Gebruik niet te veel afbeeldingen

Dit is belangrijk voor zowel de website als de gebruikerservaring. Te veel afbeeldingen vertragen je website aanzienlijk en verhogen de kans op een slechte user experience, vooral op mobiele apparaten.

#Auteursrechten en andere juridische zaken

Het gebruiken van een afbeelding waarvoor je geen toestemming (auteursrecht) hebt, kan grote gevolgen hebben. De reële kans bestaat dat jij uiteindelijk betrapt wordt, met hoge boetes als gevolg. Gebruik dus alleen persoonlijke, vrij te gebruiken of legaal gekochte afbeeldingen .. dan zit je altijd safe!

Bottom-line

Afbeelding optimalisatie is geen gemakkelijke taak dat je even snel in een uurtje doet, maar het is absoluut een goede investering op lange termijn. Plaats afbeeldingen van hoge kwaliteit die snel laden, zoekmachine vriendelijk zijn en je zult meer organisch verkeer krijgen.

Deel dit Bericht:

Auteur: Jan Rajtoral

Jan Rajtoral is een ervaren grafische vormgever en webdesigner. Hij heeft een ruime ervaring met Front-end web design (HTML, CSS en JS/jQuery), User Experience (UX), Toegankelijkheid (WCAG), Performance en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij altijd streeft naar merkconsistentie in het hele ontwerp.