Hoe ik afbeeldingen op deze website geschikt maak voor retina

Sommige afbeeldingen op deze website kunnen alleen scherp getoond worden als ik ze op de juiste manier upload.

De WordPress retina plugin van Wouter Postma (toevallig ook eigenaar van WPLounge) helpt gelukkig enorm! Ik hoef alleen maar een tweede afbeelding te uploaden met het dubbele formaat.

Zou ik een bestand uploaden dat afbeelding.png heet, met de afmetingen 200×200 pixels, dan upload ik er nog één die afbeelding@2x.png heet met de afmeting van 400×400 pixels. De plugin zorgt dan dat die grotere afbeelding gebruikt wordt voor retina-schermen en die gebruikers dus automatisch een scherpe afbeelding te zien krijgen.

De grotere afbeelding (met dubbel formaat) wordt nog steeds op het originele formaat getoond. Dus de afbeelding van 400×400 wordt getoond als een afbeelding van 200×200, maar is alléén scherp op iPhones en iPads als ik die grotere afbeelding upload. Dit komt doordat retina-schermen een hogere pixel density (pixel-dichtheid) hebben. Klinkt misschien als saaie materie, maar ik vind het razend interessant! Meer uitleg over retina-schermen vind je hier.

@2x

Wat is @2x? Dat zul je je nu misschien afvragen. Dit is de algemeen bekende naamconventie voor retina-afbeeldingen. Wat ik zelf raar vind is dat Apple niet standaard deze afbeeldingen inlaadt, zonder tussenkomst van JS-bestanden of plugins. Maar dit is nu eenmaal de realiteit en dus gebruik ik met alle plezier de Retina @2x-plugin voor WordPress, die ook vernoemd is naar deze naamconventie.

Welke apparaten gebruiken retina?

Retina-schermen zitten op veel Apple-apparaten, waaronder iPads, iPhones en nieuwe MacBooks. Vooral de MacBook Pro heeft een zeer indrukwekkend scherm dat ontzettend scherp is, net als de iPad Pro overigens.

MacBook Pro