Kort antwoord: Op de meeste trage websites zijn afbeeldingen de grootste boosdoener. Het is meestal ook de goedkoopste winst: dezelfde foto, een fractie van het gewicht.
Waarom maken afbeeldingen een site traag?
Een foto uit een telefoon is al snel vier tot zes megabyte en vijfduizend pixels breed. Op je website wordt hij misschien achthonderd pixels breed getoond. De browser downloadt dan het hele bestand en gooit het grootste deel weg.
Op een goede verbinding merk je dat nauwelijks. Op mobiel internet buiten de stad wel. Dat telt mee in de Core Web Vitals, en belangrijker: het is precies het moment waarop iemand wegklikt.
Wat pas je aan?
Drie dingen. De afmeting: sla de foto op in de maat waarin hij daadwerkelijk wordt getoond, niet groter. Het formaat: WebP is bij gelijke kwaliteit vaak dertig tot zeventig procent kleiner dan JPEG. En de compressie: bij foto’s zie je het verschil tussen kwaliteit 100 en kwaliteit 80 met het blote oog niet.
Op deze site staan alle portfolio-afbeeldingen als WebP met een JPEG als terugval, met vaste breedte en hoogte in de code zodat de pagina niet verspringt tijdens het laden.
Wat heeft dit met vindbaarheid te maken?
Twee dingen. Snelheid weegt mee in hoe Google een pagina beoordeelt, al is het maar een van vele signalen en zelden de doorslaggevende.
Belangrijker is de context rond de afbeelding: een beschrijvende bestandsnaam en een goede alt-tekst. Daarmee kan een afbeelding zelf gevonden worden, en mensen die de afbeelding niet zien krijgen alsnog de betekenis mee.
En logo’s en iconen?
Die horen niet in JPEG of PNG maar in SVG. Een SVG is geen raster van pixels maar een tekeninstructie, dus hij blijft scherp op elk scherm en weegt vaak maar een paar kilobyte.
Heb je alleen een logo in lage resolutie of met een witte achtergrond die niet past, dan is dat het typische geval waar handmatige bewerking nodig is: uitsnijden, achtergrond vrijmaken, omzetten naar vector.
Kun je dit zelf doen?
Voor los werk prima. Er zijn gratis tools waarmee je een foto verkleint en naar WebP omzet. Let er alleen op dat je de afmeting aanpast en niet alleen comprimeert, want dat scheelt het meest.
Bij tientallen afbeeldingen tegelijk of bij logo’s die vrijgemaakt moeten worden loont het om het te laten doen. Dan gebeurt het in een keer goed en consistent.
Veelgestelde vragen over beeldoptimalisatie
Wat is beter: WebP of JPEG?
WebP is bij gelijke kwaliteit meestal een stuk kleiner. Alle moderne browsers ondersteunen het. Een JPEG als terugval meegeven is nog steeds netjes.
Verliest mijn foto kwaliteit?
Bij verstandige compressie zie je het verschil op een scherm niet. Bewaar wel altijd het origineel, want comprimeren is niet omkeerbaar.
Hoe zwaar mag een afbeelding zijn?
Er is geen harde grens, maar onder de tweehonderd kilobyte per afbeelding is een goed streven voor een gewone contentfoto.
Samengevat
Beeldoptimalisatie is meestal de snelste winst die je op een website kunt boeken. Sla afbeeldingen op in de maat waarin ze getoond worden, gebruik WebP, geef ze een beschrijvende alt-tekst, en zet logo’s in SVG.
Deze dienst afnemen? Beeldoptimalisatie staat als losse dienst op de pagina met extra diensten, met de actuele prijs erbij.