Zware foto's vertragen je site: zo houd je hem snel

Wat zware beelden je kosten

Tekst en code zijn licht. Een gemiddelde pagina met vijf foto's uit een fototoestel weegt zomaar twintig megabyte, en dat is bijna helemaal beeld. Op glasvezel merk je daar niets van. In de trein wel.

Google kijkt mee. In de Core Web Vitals telt vooral hoe snel het grootste element op het scherm verschijnt, en dat grootste element is op een kantoorwebsite bijna altijd de foto boven aan de pagina. Laadt die traag, dan zakt je positie in de zoekresultaten.

De bezoeker wacht niet. Iemand die op zijn telefoon zoekt naar een hypotheekadviseur in de regio heeft drie tabbladen openstaan. Het tabblad dat als eerste iets laat zien, krijgt de aandacht.

Het merendeel van het bezoek aan een kantoorwebsite komt inmiddels van een telefoon, vaak buiten kantoortijd en niet altijd op een goede verbinding. Juist in die situatie voel je het gewicht van je beelden. Op de desktop van je eigen kantoor, met een snelle verbinding en de pagina al in het geheugen van de browser, merk je er niets van.

Drie ingrepen die het meeste opleveren

Verklein de afmetingen. Een foto van 6000 pixels breed heeft geen nut op een site die het beeld op maximaal 1600 pixels toont. De browser schaalt hem toch terug, maar downloadt eerst wel het hele bestand. Schaal het beeld dus zelf terug naar de breedte waarop het daadwerkelijk verschijnt. Dit is de ingreep die veruit het meeste scheelt.

Sla op als WebP. Dat bestandsformaat is bij gelijke beeldkwaliteit ongeveer een kwart tot een derde kleiner dan JPEG. Elke browser die je bezoekers gebruiken kan ermee overweg. Voor drukwerk houd je het origineel, voor je website gebruik je de WebP-versie.

Zet lazy loading aan. Met het kenmerk loading="lazy" haalt de browser alleen de beelden op die de bezoeker ook echt in beeld krijgt. De teampagina met twaalf portretfoto's laadt dan net zo snel als een pagina met één foto. De meeste websitesystemen hebben hiervoor een schakelaar in de instellingen staan.

Wat dat in de praktijk oplevert: een headerfoto van 4,2 megabyte gaat terug naar ongeveer 180 kilobyte. Dat is dezelfde foto.

Waar het in de praktijk misgaat

De aanname dat je websitesysteem dit vanzelf regelt klopt maar half. WordPress, Wix en Squarespace maken kleinere versies aan van wat je uploadt, maar ze bewaren ook het origineel en tonen dat op de plekken waar het beeld groot in beeld komt. Upload je een bestand van tien megabyte, dan staat er ergens op je site een bestand van tien megabyte.

Twee andere veelvoorkomende oorzaken. De eerste is het bestandsformaat PNG, dat prima werkt voor een logo of een schema maar voor een foto twee tot vijf keer zo zwaar uitpakt als JPEG of WebP. De tweede is de schuivende reeks foto's boven aan de homepage: die laadt vaak alle beelden tegelijk, terwijl de bezoeker er meestal maar één van te zien krijgt. Eén stevige foto met een duidelijke kop werkt beter en laadt sneller.

Let ook op wat er via de achterdeur binnenkomt. Foto's die klanten of collega's aanleveren voor een nieuwsbericht gaan vaak rechtstreeks de site op, zonder tussenstap. Daar sluipt het gewicht er langzaam weer in.

Maak er een werkafspraak van

Een eenmalige opschoonronde is snel gedaan, maar over een jaar staan er weer zware bestanden op je site. Leg daarom vast wat de norm is: maximaal 1600 pixels breed, WebP, en een headerfoto onder de 200 kilobyte. Spreek af wie beelden plaatst, meestal iemand van de binnendienst, en geef diegene een vast gereedschap waarmee het in twee klikken gebeurt.

Draai je belangrijkste pagina's daarna een keer per kwartaal door Google PageSpeed Insights. Onder de verbeterpunten zie je precies welke bestanden te groot zijn. Neem in diezelfde ronde meteen de alt-teksten mee, want een beeld zonder omschrijving levert je in de zoekresultaten niets op.

Bij een website die wij bouwen is dit onderdeel van het werk. Elk beeld gaat verkleind, in het juiste bestandsformaat en met een alt-tekst de pagina op, ook bij latere wijzigingen. Zo blijft snelheid iets waar je niet over hoeft na te denken. Bekijk wat Contaqt Site voor je kantoor doet.