Matronix.fr Le blog d'un prof de primaire
Les écrans type Retina ont une densité de pixels deux fois plus importante qu’un écran classique. Les produits Apple en sont pourvus par défaut, mais on en trouve aussi chez la concurrence, parfois sous d’autres noms.
Une plus grande densité de pixels permet d’avoir un écran plus joli, avec la sensation d’une image “imprimée” directement sur l’écran, les pixels étant invisibles. L’image paraissant plus naturelle, en découle une fatigue oculaire amoindrie. C’est non seulement plus agréable pour les images qui paraissent extrêmement nettes, mais également pour les polices (le texte) quand vous lisez beaucoup.
Le soucis pour les images, c’est que si votre écran Retina a deux fois plus de pixels, les images d’une résolution définie paraitra forcément deux fois plus petite (les pixels étant deux fois plus petits). Pour éviter cela, les ordinateurs agrandissent alors deux fois l’image, afin de l’afficher d’une taille correcte. Résultat, cette image parait floue sur l’écran Retina puisqu’agrandit. La solution est donc d’apporter deux versions de la même image : une image classique, de résolution x*y, qui sera affichée sur les écrans non Retina ; et la même image de résolution 2x*2y, qui ne sera affichée que pour les écrans Retina. Il suffit de rajouter au nom de votre fichier image, à la fin, “@2x”.
Exemple concret :
J’ai un fichier image.png de résolution 200*200 px. Je crée un fichier image@2x.png, de résolution 400*400 px.
J’envoie les deux fichiers, mais je n’ajoute dans mon article que le fichier image.png. Le fichier image@2x.png ne sera chargé que si un écran Retina est détecté, et ce, de manière automatique.
Cas pratique 1 : une photo de 1200*600 px. Ce fichier sera le fichier @2x. Avec un éditeur d’image (Paint, Photoshop, GIMP, Pixelmator, etc) je réduis ce fichier à la moitié (600*300 px). Ce sera le fichier affiché dans ma page. En jpg progressif.
Cas pratique 2 : une capture d’écran, d’écran Retina. Ce fichier sera le fichier @2x. Je réduis le fichier à la moitié, ce sera le fichier de base, de résolution classique pour un écran non Retina. En png.
Pour les deux cas, j’envoie les deux fichiers, mais j’insère le fichier non @2x dans la page. Il sera remplacé par la version @2x automatiquement pour les écrans Retina.
La banderolle en haut de mon site est une image @2x : elle paraitra deux fois plus nette sur un écran Retina.
Donc en gros : faire un “effort” pour les possesseurs de Mac and co.
Fuck :p
Lol, y’a pas que les produits Apple qui sont concernés, mais tous ceux avec un haut DPI.
En plus les écrans type Retina vont forcément devenir la norme, autant s’y mettre tout de suite.
@Gilles : en effet, pas seulement Apple : les écrans de portable en Full-HD sur du 5 pouces ont un écran supérieur à rétina : le rétina c’était 326dpi, un écran full-HD en 5 pouces, c’est 384 (en diagonale).
Idem pour d’autres PC à très haute définition d’écran sur du 14 ou 13 pouces : on en trouve chez tous les fabricants.
Sinon, comment est détectée ce « @2x » ? C’est WordPress qui fait ça ? Le navigateur ? Le système ?
Pour ma part je ne pense pas me faire chier avec deux illustrations à chaque fois. Il n’y a que pour les icônes de l’interface que je trouve ça important. Pour ça je fait juste une image en haute résolution (même si elle fait 25 ko au lieu de 18 ko) : http://lehollandaisvolant.net/?d=2015/08/02/16/27/18-css-astuce-simple-pour-des-icones-nettes-sur-les-mobile (même si je devrais passer au SVG pour ça).
Désolé j’ai oublié de te répondre, mais j’en sais rien en fait.