Images Retina automatiques pour les sites web

Question

Avec le nouveau MacBook Pro d'Apple doté d'un écran retina, si vous fournissez une image "standard" sur votre site web, elle sera un peu floue. Vous devez donc fournir une image retina.

Existe-t-il un moyen de passer automatiquement à @2x comme le fait iOS (avec Objective-C) ? Ce que j'ai trouvé, c'est que CSS pour les images haute résolution sur les écrans mobiles et rétina Mais j'aimerais trouver un processus automatique pour toutes mes images, sans CSS ni JavaScript .

Est-ce possible ?

MISE À JOUR
J'insiste sur ce point intéressant article suggéré par Paul D. Waite et une intéressante discussion à ce sujet, reliée par Sébastien .

Answer 1

Il existe un nouvel attribut pour la balise img qui vous permet d'ajouter un attribut retina src, à savoir srcset. Aucun javascript ou CSS n'est nécessaire, pas de double chargement d'images.

<img src="low-res.jpg" srcset="high-res.jpg 2x">

Support des navigateurs : http://caniuse.com/#search=srcset

Autres ressources :

• Publication de WebKit
• Documentation du W3C pour srcset
• bonne explication sur le pourquoi et le comment de l'utilisation de srcset
• Poste de Chris Coyer pour plus d'informations

Answer 2

Il existe différentes solutions, chacune ayant ses avantages et ses inconvénients. Celle qui vous convient le mieux dépend de plusieurs facteurs, tels que la conception de votre site web, le type de technologie utilisée par vos visiteurs habituels, etc. Notez que les écrans retina ne se limitent pas au Macbook Pro Retina et aux prochains iMacs, mais qu'ils englobent également les appareils mobiles, qui peuvent avoir leurs propres besoins.

Le problème est également étroitement lié aux images dans les conceptions réactives en général. En fait, il est probablement préférable d'utiliser des techniques génériques de responsive design, plutôt que de concevoir pour des appareils spécifiques. Après tout, la technologie ne cessera d'évoluer à l'avenir.

Quelques-unes des solutions/discussions que j'ai notées :

• Vecteurs dans la mesure du possible, y compris les techniques CSS (dégradés, coins arrondis, etc.), SVG et polices d'icônes.
• Servir des images à haute résolution ("rétine"), mais les compresser davantage (qualité JPEG), comme suggéré par Yoav Weiss ou laisser les réseaux mobiles les compresser lorsqu'ils en ont vraiment besoin (c'est-à-dire lorsqu'ils sont mobiles), comme le propose Paul Boag .
• Images adaptatives une solution (principalement) côté serveur. Elle est basée sur un cookie stockant la résolution de l'écran, un serveur web configuré pour servir des images à partir d'un script PHP, et nommé script pour lire le cookie et servir l'image appropriée.
• Un ensemble de possibilités bien décrite et discutée sur le site Smashing Magazine .
• Servir des résolutions légèrement plus élevées pour adoucir un peu l'image de la rétine, comme le suggère une vidéo de Paul Boag .
• La technique @1.5x sur Une liste à part est fondamentalement la même idée.
• Dans un avenir proche, la <picture> étiquette peut devenir une solution soutenue par un Groupe de travail du W3C et même Apple.
• A Technique JavaScript proposé par Jake Archebald .
• Un discussion approfondie des différentes techniques sur les Smashing Magazine et le problème en général.

Comme le montrent les autres réponses, il existe encore d'autres techniques, mais il n'y a probablement pas encore de meilleure pratique.

Une chose que je me demande, c'est comment tester et déboguer certaines de ces techniques, sans avoir le(s) dispositif(s) correspondant(s) à disposition...

Answer 3

Puisque personne n'a encore mentionné l'évidence, je me permets de la lancer : dans la mesure du possible, utilisez SVG. Ils s'affichent à de belles résolutions rétiniennes sans le moindre effort.

La prise en charge est bonne, IE8 étant le principal dinosaure dont il faut se préoccuper. La taille des fichiers compressés est souvent meilleure que celle des formats bitmap (png/jpg) et les images sont plus souples ; vous pouvez les réutiliser à différentes résolutions et les remodeler si nécessaire, ce qui permet d'économiser du temps de développement et de la bande passante de téléchargement.

Answer 4

Voici le mixin less que j'utilise pour réaliser cela pour les images d'arrière-plan. retina.js ne fonctionne pas pour les images d'arrière-plan si vous utilisez dotLess, car il nécessite son propre mixin qui utilise lui-même l'évaluation script qui n'est pas prise en charge dans dotLess.

L'astuce consiste à obtenir la prise en charge d'IE8. Il ne peut pas facilement utiliser la taille de l'arrière-plan, de sorte que le cas de base (requête média non mobile) doit être une icône simple, non mise à l'échelle. La requête média gère alors le cas de la rétine et est libre d'utiliser la classe background-size puisque la rétine ne sera jamais utilisée sur IE8.

.retina-background-image( @path, @filename,@extension, @size )
{
     .background-size( cover );
     background-image: url( "@{path}@{filename}@{extension}" );
         @media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
                only screen and ( -moz-min-device-pixel-ratio: 2 ),
                only screen and ( -o-min-device-pixel-ratio: 2/1 ),
                only screen and ( min-device-pixel-ratio: 2 )
         {
             background-image:url( "@{path}@{filename}@x2@{extension}" );
             background-size:@size @size;
         }
}

Exemple d'utilisation :

.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );

Pour ce faire, vous devez disposer de deux fichiers :

• start_grey-97_12.png
• start_grey-97_12@2x.png

Où le 2x Le fichier est en double résolution pour la rétine.

Answer 5

Il suffit de fournir des images rétina à tout le monde et de réduire l'image à la moitié de sa taille native à l'intérieur de l'élément image. Disons que votre image est 400px large et haute - il suffit de spécifier la largeur de l'image en tant que 200px pour qu'il ait l'air net comme ceci :

<img src="img.jpg" width="200px" height="200px" />

Si votre image est photographique, vous pouvez probablement augmenter la compression JPG sans en aggraver l'aspect, car les artefacts de compression JPG ne seront probablement pas visibles lorsque l'image sera affichée à l'écran. 2x : voir http://blog.netvlies.nl/design-interactie/retina-revolution/