Waarom is mijn afbeelding wazig?
Een afbeelding is meestal wazig omdat hij te klein is aangeleverd en door de browser wordt opgerekt. De tweede oorzaak is te sterke compressie.
Op een moderne telefoon valt dat extra op.
Daar zit twee tot drie keer zoveel detail in hetzelfde vlak.
Oorzaak één: te klein
Toon je een afbeelding van achthonderd pixels over een breedte van twaalfhonderd, dan wordt hij opgerekt en verliest hij scherpte.
Meer daarover lees je bij hoeveel pixels een afbeelding moet zijn.
Oorzaak twee: te sterk gecomprimeerd
Dan zie je vage vlekken rond scherpe randen, vooral rond tekst en logo’s.
Meer daarover lees je bij pagespeed.
Oorzaak drie: het verkeerde formaat
Een logo als jpeg opslaan geeft altijd rafelige randen. Voor lijnwerk gebruik je een png of een meeschalende tekening.
Meer daarover lees je bij favicon.
Mijn vuistregels
- Twee keer de weergavemaat aanleveren.
- Foto’s als jpeg, lijnwerk als png of tekening.
- Comprimeer, maar controleer het resultaat.
- Kijk op een telefoon.
Die laatste is waar je het verschil het eerst ziet.
Hoe je de oorzaak vindt
Klik met rechts op de afbeelding en bekijk hem apart. Is hij daar scherp, dan zit het in de weergavemaat; is hij daar ook wazig, dan in het bestand.
Meer daarover lees je bij alt tekst.
Bij een geschaald logo
Vervang het door een meeschalende tekening. Die blijft op elk formaat scherp.
Meer daarover lees je bij wat een retina-scherm is.