Afbeeldingen scherper maken zonder extra megabytes

Elke afbeelding heeft twee eigenschappen die je los van elkaar kunt aanpassen. De eerste is het aantal pixels van het bronbestand. De tweede is de compressie, dus hoeveel informatie je opoffert om het bestand lichter te maken. Een bestand kan te zwaar zijn omdat het te veel pixels heeft, omdat de compressie te mild is, of door allebei.

De cursus Learn Performance van web.dev beschrijft afbeeldingen als een groot deel van de overgedragen data op veel pagina's. De module over afbeeldingen gaat over optimaliseren en efficiënt aanbieden, zodat je verspilde bytes beperkt, ongeacht het apparaat. Haal daar vooral het principe uit: lever wat het scherm nodig heeft en niet meer.

Wat 'scherp genoeg' is, hangt af van je beeld, je doelgroep en je merk. Daarom begin je met een eigen vergelijking en niet met een vaste kwaliteitsinstelling.

Je weet pas hoeveel pixels nodig zijn als je weet hoe groot de afbeelding op het scherm verschijnt. Doe dit per type pagina, niet per bestand.

1. Open de pagina in een browser en gebruik de ontwikkelaarstools om het element te selecteren.
2. Noteer de weergavebreedte in CSS-pixels, eerst op een smal en dan op een breed scherm.
3. Noteer de intrinsieke grootte van het bronbestand, dus de echte afmetingen van het bestand zelf.
4. Controleer de pixeldichtheid van je testtoestel. Een scherm met dichtheid 2 toont per CSS-pixel twee fysieke pixels in elke richting.
5. Bekijk in het netwerkpaneel hoeveel bytes het bestand echt gedownload heeft.

Je vergelijkt dus drie getallen: weergavebreedte, bronbreedte en bestandsgrootte. Is de bron veel breder dan de weergavebreedte maal de pixeldichtheid, dan betaal je voor pixels die het scherm niet kan tonen.

Een vergelijking van bestanden heeft alleen zin als je de kwaliteit gelijk houdt. Anders vergelijk je een scherp bestand met een wazig bestand en trek je de verkeerde conclusie.

• Kies per beeldtype een referentie: een product, een portret, een logo, een afbeelding met tekst. Verschillende types reageren verschillend op compressie.
• Bekijk de referentie en de kandidaat naast elkaar op het toestel waarop je klanten waarschijnlijk surfen, op 100 procent weergave.
• Let op randen, huidtinten, kleurverlopen en tekst in de afbeelding. Daar valt compressie het eerst op.
• Laat een tweede persoon blind kiezen als dat kan. Je eigen oog weet al welke versie 'de lichte' is.
• Noteer de instelling waarbij je geen verschil meer ziet. Dat is jouw drempel voor dit beeldtype.

Deze drempel is een besluit over jouw beelden en jouw scherm, geen algemene waarde.

Dit voorbeeld is verzonnen en bevat geen resultaten. Stel dat een foto op je pagina 600 CSS-pixels breed getoond wordt in een kolom op een breed scherm. Het bronbestand is 3000 pixels breed.

Rekenstap: 600 CSS-pixels maal pixeldichtheid 2 is 1200 fysieke pixels. Bij een scherm met pixeldichtheid 2 is een bronbestand van 3000 pixels dus meer dan nodig. Als smalle schermen de foto op 360 CSS-pixels tonen, is 360 maal 2 gelijk aan 720 pixels.

Kandidaten: maak een versie van 720 en een van 1200 pixels breed en bied beide aan zodat de browser kan kiezen.

Verwachte controles: op een breed scherm laadt de browser het grotere bestand, op een smal scherm het kleinere. Je vergelijkt beide met je referentie. Laad je een afbeelding uitgesteld, doe dat dan niet voor de belangrijkste afbeelding bovenaan de pagina. De MDN-pagina over webprestaties beschrijft in algemene termen dat je de ervaring zo snel mogelijk beschikbaar maakt en langere staartonderdelen asynchroon laadt. Of uitgesteld laden bij een bepaald beeld past, controleer je zelf: bepaal per beeld of het bij de eerste weergave zichtbaar moet zijn.

Herhaal de meting uit stap twee na elke wijziging. Vergelijk weergavebreedte, bronbreedte en gedownloade bytes met je notities van vóór de ingreep. Test op een echt toestel en een trage verbinding, want ontwikkelaarstools simuleren niet alles. Bekijk ook of de beeldverhoudingen kloppen, zodat de pagina niet verspringt tijdens het laden.

Behoud bij vervanging van bestanden de alternatieve tekst. De W3C-tutorials over toegankelijkheid behandelen onder meer toegankelijke afbeeldingen. Een lichter bestand dat zijn beschrijving verliest, is geen verbetering voor mensen die een schermlezer gebruiken.

Meet het effect op je eigen pagina's met eigen metingen en trek geen algemene conclusies over snelheid, bezoekersgedrag of ranking. Wil je weten welke publieke signalen van je site zichtbaar zijn, bekijk ze dan via Marketing Scan. Een publieke scan ziet wat zichtbaar is en vervangt je eigen controle in de browser niet.