Optimiser ses images pour les écrans Retina sous WordPress

Les écrans type Reti­na ont une den­si­té de pixels deux fois plus impor­tante qu’un écran clas­sique. Les pro­duits Apple en sont pour­vus par défaut, mais on en trouve aus­si chez la concur­rence, par­fois sous d’autres noms.

Une plus grande den­si­té de pixels per­met d’a­voir un écran plus joli, avec la sen­sa­tion d’une image “impri­mée” direc­te­ment sur l’é­cran, les pixels étant invi­sibles. L’i­mage parais­sant plus natu­relle, en découle une fatigue ocu­laire amoin­drie. C’est non seule­ment plus agréable pour les images qui paraissent extrê­me­ment nettes, mais éga­le­ment pour les polices (le texte) quand vous lisez beau­coup.

Le sou­cis pour les images, c’est que si votre écran Reti­na a deux fois plus de pixels, les images d’une réso­lu­tion défi­nie parai­tra for­cé­ment deux fois plus petite (les pixels étant deux fois plus petits). Pour évi­ter cela, les ordi­na­teurs agran­dissent alors deux fois l’i­mage, afin de l’af­fi­cher d’une taille cor­recte. Résul­tat, cette image parait floue sur l’é­cran Reti­na puis­qu’a­gran­dit. La solu­tion est donc d’ap­por­ter deux ver­sions de la même image : une image clas­sique, de réso­lu­tion x*y, qui sera affi­chée sur les écrans non Reti­na ; et la même image de réso­lu­tion 2x*2y, qui ne sera affi­chée que pour les écrans Reti­na. Il suf­fit de rajou­ter au nom de votre fichier image, à la fin, “@2x”.

Exemple concret :

J’ai un fichier image.png de réso­lu­tion 200*200 px. Je crée un fichier image@2x.png, de réso­lu­tion 400*400 px.

J’en­voie les deux fichiers, mais je n’a­joute dans mon article que le fichier image.png. Le fichier image@2x.png ne sera char­gé que si un écran Reti­na est détec­té, et ce, de manière auto­ma­tique.

 

Cas pra­tique 1 : une pho­to de 1200*600 px. Ce fichier sera le fichier @2x. Avec un édi­teur d’i­mage (Paint, Pho­to­shop, GIMP, Pixel­ma­tor, etc) je réduis ce fichier à la moi­tié (600*300 px). Ce sera le fichier affi­ché dans ma page. En jpg pro­gres­sif.

Cas pra­tique 2 : une cap­ture d’é­cran, d’é­cran Reti­na. Ce fichier sera le fichier @2x. Je réduis le fichier à la moi­tié, ce sera le fichier de base, de réso­lu­tion clas­sique pour un écran non Reti­na. En png.

Pour les deux cas, j’en­voie les deux fichiers, mais j’in­sère le fichier non @2x dans la page. Il sera rem­pla­cé par la ver­sion @2x auto­ma­ti­que­ment pour les écrans Reti­na.

 

La ban­de­rolle en haut de mon site est une image @2x : elle parai­tra deux fois plus nette sur un écran Reti­na.