Optimalisering van je afbeeldingen – in 5 stappen naar een snellere site
Mooie afbeeldingen zijn een fantastische toevoeging aan je website. Ze ondersteunen je verhaal en trekken de aandacht. Maar, afbeeldingen kunnen je site enorm vertragen. Volgens onderzoek bestaat 21,9% van de data van websites uit afbeeldingen! Optimalisering van je afbeeldingen kan veel ruimte besparen en snelheid opleveren.
optimalisering van je afbeeldingen - kollektif media

Als bezoekers langer dan 3 seconden moeten wachten, gaan ze weg. Een trage site kost dus conversies! En, het zorgt er ook voor dat Google jouw website een lagere rating geeft, waardoor je lager in de lijst met zoekresultaten komt te staan. 

Daarom is optimalisering van je afbeeldingen voor het web erg belangrijk. In dit artikel leg ik uit hoe je afbeeldingen in elkaar zitten en hoe je ze kunt optimaliseren. Ten slotte behandel ik website-analyse en geef ik nog twee tips.

Pixels en resolutie

Voor we aan de slag gaan met optimalisering van je afbeeldingen, eerst wat basiskennis. Een scherm toont een afbeelding door middel van pixels. Elke pixel bevat informatie en al die pixels samen vormen de afbeelding. Hoe meer informatie en pixels, hoe gedetailleerder je afbeelding.

Gedetailleerdere afbeeldingen bestaan uit meer pixels, maar gebruiken daarom ook meer Kb’s of Mb’s, met als gevolg dat je site trager wordt omdat al die info geladen moet worden. Je afbeeldingen moeten de juiste vorm, afmetingen en resolutie hebben om goed te werken op je site.

De bestandsvorm van je afbeelding

Verschillende types afbeeldingen komen voor in verschillende vormen. De meest voorkomende zijn JPG, PNG en GIF. GIF’s zijn die bewegende beelden die steeds hetzelfde loopje laten zien. JPG gebruik je doorgaans voor foto’s en PNG voor overige afbeeldingen, zoals grafieken en symbolen. 

Ook als je afbeeldingen met transparante onderdelen wilt opslaan, gebruik je PNG, omdat JPG transparantie niet ondersteunt. Voor het converteren van je afbeeldingen van het ene formaat naar het andere kun je bijvoorbeeld terecht op websites als image-converter.

Wat betreft PNG’s heb je vaak de keuze tussen PNG-8 en PNG-24. PNG-8 is kleiner in Mb’s, maar heeft minder kleuropties. Je raadt het al, PNG-24 heeft meer mogelijkheden wat betreft kleur maar levert daardoor grotere afbeeldingen.

De resolutie van je afbeelding

De resolutie is het aantal pixels van je afbeelding. Meer pixels betekent een hogere resolutie. In bijvoorbeeld magazines heb je meer pixels nodig dan op websites om de afbeelding mooi te tonen. In print wordt daarom een resolutie van 300 pixels aangehouden terwijl op sites 72 vaak genoeg is.

Afmetingen van je afbeelding

Afbeeldingen met kleinere afmetingen nemen minder ruimte in. Sommige foto’s zijn te groot voor je website maar die zijn aan te passen. Doe dit niet op de Word-manier, door je afbeelding te vergroten of te verkleinen. Dit zorgt ervoor dat de afbeelding met dezelfde hoeveelheid informatie afgebeeld moet worden op een te groot of te klein oppervlak, waardoor de afbeelding wazig wordt. Met tools zoals PicResize en Photoshop kun je al je afbeeldingen aanpassen naar de juiste afmetingen.

Gewicht van je afbeelding

Afbeeldingen kun je comprimeren om ze het juiste formaat te geven. Het aantal gegevens wordt dan verkleind wat de afbeelding kleiner in Mb’s maakt. Het gewicht van je afbeelding in Mb’s wordt lichter. Dit is beter voor je site maar heeft wel een nadelig effect op de kwaliteit van de afbeelding. Foto’s kunnen dit vaak prima hebben, afbeeldingen zoals grafieken en symbolen vaak niet dus wees daar voorzichtig mee.

ResizeMe en ook weer Photoshop zijn goede tools hiervoor, al zijn er nog vele andere on- en offline tools te vinden. Je kunt plugins gebruiken om afbeeldingen te optimaliseren die al op je website staan. 

BJ Lazy Load bijvoorbeeld is een plugin voor WordPress die ervoor zorgt dat afbeeldingen pas geladen worden wanneer je websitebezoeker naar beneden scrollt en ze in beeld krijgt. Hierdoor hoeft je site minder afbeeldingen per keer te laden waardoor hij sneller wordt. 

Maar, let op, te veel plugins vertragen je site ook dus wees er zuinig mee. Als je alles door plugins laat doen dan vreet dat ook nog eens de schijfruimte van je webhosting op. Dus comprimeer eerst zelf snel je afbeelding voordat je deze uploadt, dan kun je de plugins het laatste werk laten doen.

Analyse: hoe snel is je website?

Tools als Google Page Speed Insights helpen je bij het analyseren van de prestaties van je site. Ze geven je site een score, vertellen wat er fout gaat en hoe je dit kunt oplossen. Vertragende afbeeldingen zijn een factor waar ze je op beoordelen.

Page Speed Insights is enorm handig, omdat het een overzicht biedt van de grootste afbeeldingen op een pagina. Daardoor weet je welke je aan moet passen en of je er een over het hoofd gezien hebt.

Overige tips

Heb je meerdere kleine afbeeldingen naast elkaar op je website, zoals afbeeldingen voor mail, telefoon en Linkedin? Maak er dan 1 afbeelding van, dat is voor een site sneller te laden.

Heb je al een lading afbeeldingen op je website staan die allemaal verbeterd moeten worden? Dan kun je een WP-plugin zoals Smush gebruiken om het allemaal in 1 keer te doen.

Geef je afbeeldingen relevante benaderingen. In plaats van afb-86.png kun je beter beschrijven wat er te zien is. Een foto van een groene auto is zowel voor jou als voor Google beter te vinden en herkennen wanneer het bestand groene-auto.jpg heet. 

Vul ook de title- en alt-tags in. Ook dat zijn beschrijvingen van je afbeeldingen waar zoekmachines op kunnen zoeken. Via WordPress is dit altijd aan te passen en het levert een extra manier op voor zoekmachines om je te kunnen vinden.

Optimalisering van je afbeeldingen –een praktijkvoorbeeld in 5 stappen

Met deze kennis op zak ben ik aan de slag gegaan om de afbeelding voor dit artikel te optimaliseren. 

Stap 1 – De afbeelding

Wij gebruiken graag foto’s van hoge kwaliteit voor een goede uitstraling. De foto download ik als .jpg vanaf Unsplash dus de image converter tools hoef ik niet te gebruiken.

Stap 2 – Benaming

Vervolgens pas ik de naam aan naar photoshop-image-optimization.jpg zodat Google de afbeelding kan vinden. Gebruik streepjes tussen de woorden, zodat alle webbrowsers de benaming kunnen lezen! Spaties of rare tekens kunnen het namelijk moeilijk maken voor de browser.

Stap 3 – Bijsnijden

Vervolgens zoek ik op welke afmetingen de foto moet hebben. De afbeeldingen op onze blog-pagina hebben een grootte van 1080×540. In Photoshop kan ik mijn afbeelding aanpassen. De verhouding op onze blog-pagina is 2:1, dus eerst moet ik mijn afbeeldingen croppen (bijsnijden). Dat doe je met de crop tool. Vul de verhoudingen in en je krijgt vanzelf het bijbehorende cropkader. Kies welk deel van de afbeelding je wilt behouden, ga in het menu naar Image → Crop en voilà! Je afbeelding is gecropt.

Stap 4 – Grootte aanpassen

Nu kunnen we ook de grootte van de afbeelding aanpassen. Zoals gezegd moet de afbeelding een grootte hebben van 1080×540 pixels. Ik ga in het menu naar Image → Image Size en vul daar de gewenste afmetingen in. Vervolgens sla ik de afbeelding op.

Stap 5 – Comprimeren

Tot slot comprimeer ik de afbeelding met Compressjpg.com. De kwaliteit wordt verlaagd tot een niveau waarmee je nog steeds een mooie afbeelding behoudt. Wel is het gewicht van de afbeelding aanzienlijk verkleind. In plaats van een afbeelding van 1,5 Mb in het begin neemt ze nu nog maar 48 Kb in, een besparing van 97%!

Succes!

Nu ben je in staat om je afbeeldingen te optimaliseren zodat je website soepeler zal lopen! Wil je nog meer weten? Kijk dan naar dit Web Fundamentals artikel dat een meer technische uitleg geeft over optimalisering van afbeeldingen.

Sluit Menu