Menu
A team

Afbeeldingen sneller en slimmer inladen

Perfomance | deel 2

In deel 2 van onze artikelenserie over performance gaan we in op performancewinst door slimmer gebruik van afbeeldingen. Die winst kan groot zijn!

Afbeeldingen hebben door hun bestandsgrootte vaak veel laadtijd nodig. En die groottes blijven groeien, doordat de resolutie en dpi van beeldschermen ook blijven toenemen. Hoe verbeter je de performance door de afbeeldingen op je website aan te passen? Dat kan op vier manieren, die we hieronder verder toelichten:

  1. Zo klein mogelijke afmetingen
  2. Afbeeldingcompressie
  3. Lazy loading
  4. Perceived performance

1. Zo klein mogelijke afmetingen

Met styling in het CMS kun je afbeeldingen automatisch laten schalen naar de maximale breedte van de container. Meestal is dat formaat niet direct te zien, waardoor een webredacteur vaak een (veel) grotere afbeelding gebruikt dan nodig. En dat levert een langere laadtijd op. Zo hoeven banners voor mobiel niet breder te zijn dan 400 pixels, terwijl voor een desktop een breedte van minimaal 1200 pixels nodig is.

Tip: open een afbeelding in een nieuw tabblad om snel het daadwerkelijke formaat te zien.

Gelukkig ondersteunen moderne browsers responsive images. Met deze techniek kan de browser zelf de meest geschikte afmeting kiezen. Je uploadt dan eerst zelf de verschillende varianten van de afbeelding en geeft dan de gewenste afbeeldingsafmetingen per schermbreedte.

Nog handiger is het als de contentbeheerder hiervoor maar één versie van de afbeelding hoeft te uploaden. Het CMS kan die afbeelding dan op de achtergrond opslaan in de verschillende, van tevoren vastgestelde afmetingen.

Bij een van onze klanten was dit automatisch ‘resizen’ geen optie, omdat ze per schermbreedte een andere afbeelding wilden tonen. Op mobiel bijvoorbeeld een vierkante afbeelding met weinig informatie en voor desktops een grotere, rechthoekige banner. In zo’n geval is het wel nodig om voor iedere schermbreedte een aparte variant van dezelfde afbeelding naar het CMS te uploaden.

Lees meer over responsive images

2. Afbeeldingcompressie

Naast het formaat heeft de afbeeldingcompressie invloed op de bestandsgrootte. En daarmee op de laadsnelheid. Wat compressie is? Simpel gezegd: het verwijderen van bepaalde data uit de afbeeldingscode zodat de bestandsgrootte verkleint. Nadeel is dat de kwaliteit van de afbeelding hierdoor achteruitgaat. Gelukkig merk je daar online niet zo veel van. Pas bij afdrukken is het kwaliteitsverlies goed zichtbaar. De meeste online afbeeldingen kun je comprimeren tot een derde of zelfs een vijfde van de originele grootte, zonder een zichtbare kwaliteitsvermindering.
 

Onze website maakt gebruik van cookies om je de best mogelijke beleving te bieden. Lees ons privacy statement voor meer informatie.