Wat is een retina-scherm?
Een retina-scherm heeft twee tot drie keer zoveel echte puntjes als de pixels waarmee je opmaak rekent. Daardoor oogt tekst en beeld er scherper.
Retina is de merknaam van Apple; andere fabrikanten noemen het een scherm met hoge puntdichtheid.
Vrijwel elke telefoon heeft er tegenwoordig een.
Wat dat voor je afbeeldingen betekent
Een afbeelding van achthonderd pixels breed wordt op zo’n scherm uitgerekt over zestienhonderd echte puntjes. Dat zie je als wazigheid.
Meer daarover lees je bij waarom je afbeelding wazig is.
De oplossing
Lever twee keer zo groot aan en laat je opmaak hem op de halve maat tonen.
Meer daarover lees je bij hoeveel pixels een afbeelding moet zijn.
Wat er niet verandert
Je tekst. Die wordt door de browser opnieuw getekend en is altijd scherp, ongeacht het scherm.
Meer daarover lees je bij favicon.
Mijn vuistregels
- Afbeeldingen op twee keer de maat.
- Logo’s en pictogrammen als meeschalende tekening.
- Comprimeer steviger bij grote maten.
- Controleer op een telefoon.
Die tweede lost het probleem definitief op voor alles wat geen foto is.
Waarom je het zelf niet altijd ziet
Als je op een ouder scherm werkt, oogt alles prima. Je bezoeker met een nieuwe telefoon ziet iets anders.
Meer daarover lees je bij pagespeed.
Het gewicht
Grotere afbeeldingen wegen meer, dus comprimeer steviger. Bij een dubbele maat valt sterkere compressie nauwelijks op.
Meer daarover lees je bij lazy loading.