Retina afbeeldingen op je website
Meer dan de helft van je bezoekers bekijkt je website op een mobiele telefoon of mobiel device. Veel websites zijn inmiddels al responsive en passen zich aan aan de afmetingen van je mobiele telefoon. Toch zijn bijna al deze sites nog ontworpen voor een desktop / laptop en is de mobiele variant een afgeleide.
Dit is vaak goed te zien aan het logo als je de site bekijkt op een mobiele telefoon.
Waarom het logo er niet scherp uitziet op een smartphone
Tablets en smartphones hebben een zogenaamd ‘retina’ scherm. Dat is eigenlijk een term die door Apple is geintroduceerd, maar houdt in dat het scherm meer pixels heeft op een kleiner oppervlak. De pixels zijn dus kleiner en je hebt veel meer pixels nodig om een afbeelding uit op te bouwen. Hierdoor worden de afbeeldingen superscherp omdat je met het blote oog geen pixels meer kunt onderscheiden.
Omdat de pixels op zo’n scherm heel klein zijn, worden afbeeldingen op zo’n scherm dus ook kleiner.
Bovenstaand logo zou er op een retina scherm uitzien zoals het logo in het midden. Scherp, maar 2x zo klein omdat de pixels 2x zo klein zijn als het scherm van je laptop.
Om de afbeelding op een retina scherm dan toch op het juiste formaat te laten zien, ‘verzint’ de browser er pixels bij om hem toch op de goede grootte te kunnen tonen. Dit verzinnen is niet optimaal, waardoor het logo er uiteindelijk uitziet zoals het logo rechts. Onscherp.
Voor retina schermen zijn 2x zo grote afbeeldingen nodig
Voor retina schermen is het dus nodig om de afbeeldingen dubbel zo groot te maken. Voor desktop / laptop is dit overbodig. Het is daarom goed om alle afbeeldingen in een normaal formaat en in dubbel zo groot formaat op te slaan. Hiervoor zijn verschillende technieken die erop neerkomen dat je als website gebruiker altijd een hele grote foto upload, die dan vervolgens in WordPress op verschillende formaten wordt opgeslagen. Een thumbnail van 150 x 150 maar dus ook een zelfde, dubbel zo grote, thumbnail van 300 x 300 die op een retina scherm wordt gebruikt. Van iedere afbeelding wordt dan dus automatisch een @2x variant opgeslagen die 2x zoveel pixels heeft, zodat hij ook op een retina scherm haarscherp is.
Alleen een responsive website is dus niet voldoende
Je kunt dus eigenlijk niet volstaan met alleen het responsive maken van je website. Er zijn nog veel meer aspecten waarmee je rekening moet houden om te zorgen dat je website er goed uitziet op een mobiel device. Retina images is er daar zeker 1 van!