Mobiele Navigatie

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

Dit artikel bevat een aantal aanbevelingen en tips voor het gebruik van afbeeldingen m.b.t. zoekmachine optimalisatie, 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 vindt u niet zomaar. Gebruik hier liever authentieke fotografie van personages, locaties en gebeurtenissen uit het achterliggend verhaal en vermijd de —over het algemeen— nietszeggende foto’s uit beeldbanken (stockfotografie). U kunt uiteraard ook illustraties gebruiken, zoals grafieken en diagrammen.

Kies het juiste bestandstype voor uw 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 uw afbeeldingen is een eerste belangrijke stap die genomen moet worden voordat de afbeelding verder kan worden geoptimaliseerd.

In een eerder artikel heb ik de meest gangbare bestandstypes voor afbeeldingen op het web — elk met verschillende functies, prestaties, voor- en nadelen — nader toegelicht.

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 uw keuze qua afbeeldingsgrootte (als u een ‘full-width’ header afbeelding wilt gebruiken zou ik aanraden om deze bijvoorbeeld 2400 pixels breed te maken).

In WordPress kunt u bij Media (dashboard -> Media -> klik op een afbeelding -> Afbeelding bewerken) de afmeting van uw afbeelding bewerken door deze te verschalen of bij te snijden.

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.

Geef afbeeldingen een relevante bestandsnaam

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

Bij de laatste versies van WordPress wordt de bestandsnaam van de afbeelding automatisch gebruikt als ALT-tekst (mits de ALT-tekst leeg blijft). Geef de bestandsnaam van de afbeelding, wanneer u deze opslaat, dus ook een goede korte beschrijving!

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 kunt u 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 uw 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, kunt u 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 van uw tekst 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 uw afbeelding in het midden staat. Zo wordt de essentie van de afbeelding op alle beeldschermen, van computerscherm tot mobiele telefoon, goed en mooi vertoond.

Comprimeer uw afbeeldingen voor een snellere laadtijd

Veel afbeeldingen zijn niet gecomprimeerd/geoptimaliseerd. 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.

Tegenwoordig worden er veel meer eisen aan afbeeldingen op het web gesteld en afbeeldingen zorgen voor een performance probleem van uw website. In het artikel ‘Handige Web App’s voor Afbeelding Optimalisatie‘ beschrijf ik een aantal tools voor afbeelding optimalisatie en/of compressie.

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.

Lazy Load uw 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 (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. 

Zorg dat u 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 u 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 u een afbeelding gebruikt als link

Geef bezoekers die met het toetsenbord navigeren (visueel) duidelijk aan als u een afbeelding als link gebruikt. Door middel van een zichtbare ‘outline’ (of met een specifieke CSS styling) weet uw 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 u 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 uw 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 u uploadt naar uw 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 uw 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 u geen toestemming (auteursrecht) heeft, kan grote gevolgen hebben. De reële kans bestaat dat u uiteindelijk betrapt wordt, met hoge boetes als gevolg. Gebruik dus alleen persoonlijke, vrij te gebruiken of legaal gekochte afbeeldingen .. dan zit u altijd safe!

Bottom-line

Afbeeldingen optimaliseren is geen gemakkelijke taak dat u 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 u 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 User Experience (UX), Responsive Web Design (RWD) en WordPress Ontwikkeling & Thema Ontwerp. Maar hij ontwerpt en ontwikkelt ook logo’s en huisstijlen, waarbij hij streeft naar merkconsistentie in het hele ontwerp.

Nog Geen Reacties

Laat een Reactie achter


*) Verplichte velden.

Meest Recent Project

Ikdoemeejijook