Afbeeldingen optimaliseren: dit is waarom

Waarschijnlijk weet je wel dat afbeeldingen een belangrijke rol spelen op jouw website. Maar weet je ook dat het net zo belangrijk is om deze afbeeldingen te optimaliseren? In deze blog leggen wij je uit waarom dit zo is en hoe je dit doet.

De basis van afbeeldingen optimaliseren

Afbeeldingen optimaliseren betekent in het kort dat je afbeeldingen op de ideale manier serveert op je website. Je staat misschien niet direct stil bij het belang hiervan. Je uploadt een afbeelding en vervolgens ziet deze er prima uit. Niets meer aan doen, toch? Toch wel! Want door je afbeeldingen te optimaliseren, ga je op diverse manieren nog meer profiteren van de toegevoegde waarde van je de foto’s, infographics en alle andere visuele uitingen die je plaatst.

Afbeeldingen optimaliseren is niet moeilijk. Sterker nog: je kunt dit voor een groot deel automatiseren. We nemen je in de rest van deze blog mee langs de belangrijkste punten.

Waarom is afbeeldingen optimaliseren nodig?

Maar eerst een antwoord op de vraag waarom het optimaliseren van afbeeldingen überhaupt nodig is. Je kunt prima zonder. Toch loont het om wel te investeren in de optimalisatie. Voor het oog maakt het niet uit en dat is een voordeel. Dit betekent namelijk dat je afbeeldingen na optimalisatie niet aan visuele kwaliteit hebben ingeleverd. Het zijn nog steeds dezelfde mooie foto’s, maar aan de achterkant is er een wereld van verschil die een positieve uitwerking heeft op de prestaties van je website, de vindbaarheid en de gebruikerservaring.

Door je afbeeldingen te optimaliseren, zorg je ervoor dat je deze serveert op een manier die optimaal past bij jouw website en elk device waarop je website bekeken wordt. Eigenlijk is dat ook heel logisch. Want waarom zou je op een smartphone een foto moeten laden met een resolutie van 5.000 x 5.000 pixels? Zo’n foto is wel 5x groter dan het scherm van je telefoon. Die foto moet dus worden verkleind voordat deze wordt weergegeven. Dat gebeurt ook, maar dat neemt niet weg dat zonder optimalisatie eerst de volledige foto moet worden geladen. Dat zorgt voor extra werk, een zwaardere site en langzamere laadtijden.

De basis voor een goede optimalisatie van afbeeldingen

Er zijn veel optimalisaties mogelijk, maar kijk vooral naar de onderstaande punten. Doorloop deze en je weet zeker dat je de ideale afbeeldingen op je website serveert.

Zorg voor een goede basis

Hoe minder je hoeft te optimaliseren, hoe beter. Kies dus een basisafbeelding met een goed formaat, de juiste verhoudingen en een goede compositie.

Laat afbeeldingen responsief serveren

Wanneer het op afbeeldingen aankomt, is er geen “one size fits all” principe. Wees je ervan bewust dat jouw website wordt getoond op zeer uiteenlopende devices. Echt goed optimaliseren betekent dus ervoor zorgen dat je afbeeldingen op elk device op de beste manier worden getoond. Dat kan door ze responsief te maken. Binnen WordPress websites zijn hier uitstekende tools voor, bijvoorbeeld ShortPixel Image Optimization en Autoptimize. Zeker met deze twee gecombineerd, heb je een krachtige tool in handen waarmee je zorgt voor responsieve afbeeldingen. Ook kunnen zij helpen bij de volgende punten die nog aan bod komen. Deze plugins zijn gratis, maar pas met de betaalde versies profiteer je maximaal van de voordelen. Deze plugins zijn overigns niet duur.

Afbeeldingen comprimeren

Door afbeeldingen te comprimeren neemt hun bestandgrootte af, en dat is uiteraard goed nieuws voor de laadsnelheid van je website. Het comprimeren van afbeeldingen gaat met gradaties. 80% compressie betekent dat je een foto krijgt met een minimale bestandsgrootte, maar ook met heel veel kwaliteitsverlies. Compressie voegt namelijk gelijksoortige pixels samen. Pas je te veel compressies toe, dan gaan details verloren en holt de algehele kwaliteit achteruit. Maar met een compressie van 10-15% gaat de zichtbare kwaliteit er niet op achteruit, terwijl de bestandsgrootte drastisch afneemt. Een foto van 1 mb wordt bijvoorbeeld zo’n 200-250 kb. De in de vorige paragraaf besproken plugins kunnen afbeeldingen die je uploadt automatisch resizen én comprimeren. Je kunt dit echter ook handmatig doen met een webapp zoals Pixlr. Het kan trouwens ook prima via de verkenner op je Mac of Windows computer.

Serveer afbeeldingen in een speciaal webformaat

Wil je écht het maximale uit het optimaliseren en comprimeren van je foto’s halen, zorg er dan voor dat je foto’s in .webp formaat gebruikt. .Webp is een speciaal voor het web ontwikkeld fotoformaat dat de voordelen van jpg (klein bestandsformaat) en png (hoge kwaliteit, transparantie) combineert en zeer efficent en snel serveert. Op devices en browsers waar .webp niet geserveerd kan worden, zal als alternatief de normale .jpg foto worden getoond.

Gebruik de metadata

Vergeet vooral de metadata van afbeeldingen niet! Hoewel zoekmachines steeds beter kunnen bepalen wat er op een foto te zien is, is het invoeren van metadata (de foto titel en vooral de beschrijving: de meta description) van groot belang voor de vindbaarheid. Bovendien: voor mensen met een visuele beperking worden deze beschrijvingen gebruikt in spraaksoftware zodat ook mensen met deze beperking meekrijgen waar de foto over gaat.

Vergeet lazy loading niet

Tot slot: stel lazy loading in. Lazy loading houdt in dat foto’s pas worden geladen wanneer zij tijdens het scrollen in beeld komen. Dit zorgt er vooral voor dat de initiele laadtijd van je website drastisch wordt versneld. Niet alle foto’s op de pagina hoeven namelijk in een keer geladen te worden. 

Vraag een gratis offerte aan

Wil jij geheel gratis en vrijblijvend een offerte aanvragen voor jouw WordPress website? Vul dan het onderstaande formulier in. Wij nemen zo snel mogelijk contact met je op.