A propos des écrans Retina

[Sephi-Chan]

J'extrais ce sujet de la discussion Graphisme et illustrations de mon prochain MMORPG pour ne pas partir hors sujet.

Justement, les écrans d'iPhone — mais pas seulement, même certains ordinateurs aujourd'hui — ont une haute densité de pixels (Retina), donc il faut avoir une image source de dimensions doubles et les afficher dans la taille classique (donc la moitié de l'image Retina).

Voilà pourquoi il faut travailler avec de gros PSD de nos jours.

donc on fait des images à 200% ?

ça a de gros désavantages pour les "non utilisateur de Retina" puisqu’on impose le téléchargement d'une images plus lourdes (même si celle-ci peut-être optimisée) à
ceux qui ont des écrans à densité classique ou moins importante, donc qui n’ont pas besoin d’une telle précision. En résulte des temps de chargement plus longs...

De plus l’antialiasing sur certains moteurs de rendu devient problématique pour les icones et les petites images, ça à tendance à faire des bords moins net / trop net. :heu:

c'est uniquement bon pour les possesseurs d'écran retina.
pour le reste du monde c'est essayer de mettre une vidéos HD (la 4K ça serait légèrement abusé) sur un Nokia 3310.

dans ce cas il faut passé par les Media Queries et doubler toutes les images sur le serveur. ? x)

Oui. Et ça implique effectivement d'avoir chaque image en double (foo.png, et foo@2x.png).

Effectivement, ça peut avoir un coût pour les utilisateurs d'écrans basse densité. Heureusement, les navigateurs fournissent de quoi couvrir les utilisateurs d'écran Retina sans impacter sur les autres en servant les images adaptées (srcset, media queries).

Pour rappel, les écrans Retina datent de juin 2010 sur les smartphones, puis en mars 2012 sur les tablettes et juin 2012 sur les ordinateurs) ! Il faut s'y mettre !

[niahoo]

Mais comment on fait sur un écran rétina pour dire "cette image de 100x100 tu me l'affiches en 1:1 et celle ci en 1:4" ?

[Ter Rowan]

moi ce que j'imagine, mais jamais essayé:

j'ai une image de x * y



je veux afficher l'image en x' * y'
je fais <img src="mon image" width="x'px"height="y'px">


et puis je laisse le navigateur se démerder

est ce que ça suffit ?

[Sephi-Chan]

Il faut systématiquement spécifier les dimensions des images sur la page. Et seule la source change.

<!-- Pas Retina -->

<img width="200" height="200" src="http://placehold.it/200" />



<!-- Retina -->

<img width="200" height="200" src="http://placehold.it/400" />

Une bonne astuce à connaître concernant les images JPG Retina, c'est qu'on peut les compresser beaucoup plus et ça rend toujours meilleur. Ce site permet de s'en rendre compte.

[@lucard]

tout d'abord, merci pour le Nouveau sujet.

Il faut systématiquement spécifier les dimensions des images sur la page. Et seule la source change.

<!-- Pas Retina -->

<img width="200" height="200" src="http://placehold.it/200" />



<!-- Retina -->

<img width="200" height="200" src="http://placehold.it/400" />

Une bonne astuce à connaître concernant les images JPG Retina, c'est qu'on peut les compresser beaucoup plus et ça rend toujours meilleur. Ce site permet de s'en rendre compte.

J'ai un doute concernant la qualité de la photo d'origine sur les 2 images en comparaisons.
c'est un peu comme la pub (sur DVD ) de la comparaison Blu-Ray vs DVD.
(où comment faire paraître une image plus belle que le format DVD sur un format DVD.... )

Bref, j'attends beaucoup de srcset sur tout les navigateurs =)
en attendant

@media 

(-webkit-min-device-pixel-ratio: 2), 

(min-resolution: 192dpi) { 

    /* Valeurs pour les écrans Retina */

}

[Sephi-Chan]

Le site n'a aucun intérêt à mentir. Et tu peux essayer de ton côté dans Photoshop et tu verras que ce n'est pas du flan.

[@lucard]

Le site n'a aucun intérêt à mentir. Et tu peux essayer de ton côté dans Photoshop et tu verras que ce n'est pas du flan.

Okay, okay... effectivement... en jpg la compression d'une grande image est meilleur, cependant une grande image à une compression pour 5%, sur un écran rétina ça ne doit pas être le top.

J'ai un doute sur la compression PNG avec les nuances d'alpha. (j'ferais quelques test quand même.)

[Sephi-Chan]

Je n'ai parlé que du JPG.
Tu es de mauvaise foi avec l'exemple des 5%.

[@lucard]

Je n'ai parlé que du JPG.
Tu es de mauvaise foi avec l'exemple des 5%.

je me suis mal exprimer, j'ai bien compris qu'il ne s'agissait que du jpg =)
et pour l'autre phrase, c'était plus une question qu'un reproche... je veux justement savoir si à 5%, l'image n'est pas trop compressé pour une haute résolution ?

comme le ppi est plus important sur des écran retina est-ce qu'une photo jpg (de la résolution maximal de l'écran) est différente entre 50% et 5%, à l'œil j'entend ?
J'imagine que, comme les pixels sont plus "serré" sur un Ipad, la différence doit-être minime,
mais sur un Mac book pro avec un écran 15" ? (d'ailleurs retina ne va pas au-delà non ?)

En revanche je pense que, à poids égal, une image jpeg down-sized a un meilleur rendu. j'vais peut-être revoir un de mes préjugés sur Paple.

[Sephi-Chan]

D'accord.

Une compression de 95% (donc 5% de la qualité originale) produit trop d'artefacts, donc c'est pas magnifique. Généralement je sauvegarde mes images Retina autour de 30% (de la qualité originale) avec de bons résultats (je compresse plus pour des images de background qui seront partiellement masquées). Pour les images non Retina, je sauvegarde généralement autour de 70%. Les 2 versions ont alors un poids sensiblement équivalent.

Bien sûr c'est du cas par cas : une photo de ciel bleu a tendance à se compresser de manière assez sale, il faut alors tendre vers 40%, voire plus.


Effectivement, une des stratégie pour supporter le Retina et les écrans standards est d'utiliser uniquement des images @2x bien compressées.


Sur les tailles d'écran Retina, je crois que ça monte jusqu'à 17" (pas chez Apple pour le moment). J'utilise un MacBook Pro 15" Retina dont la définition réelle est 2880*1800 et qui affiche en 1440*900 (on peut afficher aussi en 1680*1050 mais moi j'affiche en 1920*1200, mais c'est un peu "moins" Retina, du coup). Je le couple à un Thunderbolt Display 27" qui affiche en 2560*1440 (mais qui n'est pas Retina). Ce genre de gros écrans avec une résolution Retina ne sont pas encore distribués (mais la piste du 4K est la plus probable d'après les rumeurs).

Certains constructeurs montent encore plus haut qu'Apple en terme de résolution. Comme d'habitude, après une évolution majeur, on retombe dans une course classique à la caractéristiques technique. Au moins, ça permettra au plus grand nombre d'accéder à ce genre d'écrans. A ce jour, c'est un luxe auquel on s'habitue facilement ! Quand j'utilise de petits écrans (laptop, tablettes et surtout smartphones) non Retina, ça me pique les yeux !