Hoe lever je afbeeldingen aan voor een retina-scherm?
Afbeeldingen aanleveren voor een retina-scherm doe je op twee tot drie keer de maat waarop ze getoond worden. Daarbij comprimeer je steviger dan je gewend bent.
Die twee gaan samen: op een grote afbeelding valt sterkere compressie nauwelijks op.
Zo houd je scherpte zonder je pagina te verzwaren.
De rekensom
Toon je een afbeelding op zeshonderd pixels breed, lever hem dan aan op twaalfhonderd. Voor een telefoon met drie keer de dichtheid mag het achttienhonderd zijn.
Meer daarover lees je bij pixel.
De compressie
Zet je kwaliteit lager dan bij een gewone afbeelding. Bij een dubbele maat zie je het verschil niet, en je bestand blijft klein.
Meer daarover lees je bij pagespeed.
Wat WordPress zelf doet
Die maakt meerdere formaten aan en biedt ze samen aan, zodat elk apparaat de passende versie kiest.
Meer daarover lees je bij wat srcset is.
Mijn vuistregels
- Twee keer de weergavemaat als standaard.
- Comprimeer op zeventig procent kwaliteit.
- Gebruik een modern bestandsformaat.
- Blijf onder de driehonderd kilobyte.
Die laatste is de grens waar het merkbaar wordt op een mobiele verbinding.
Voor logo’s en pictogrammen
Daar geldt de rekensom niet. Gebruik een vectorbestand en je bent klaar.
Meer daarover lees je bij favicon.
Wat je niet doet
Een kleine afbeelding vergroten in een bewerkingsprogramma. Daar komt geen detail bij, alleen bestandsgrootte.
Meer daarover lees je bij lazy loading.