Images Retina automatiques pour les sites Web

Avec le nouvel Apple MacBook Pro avec écran Retina, si vous fournissez une image «standard» sur votre site Web, ce sera un peu flou. Vous devez donc fournir une image de la rétine.

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

C'est possible?

MISE À JOUR
Je voudrais souligner cet article intéressant suggéré par @Paul D. Waite et une discussion intéressante à ce sujet liée par Sebastian .

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écessaire, pas de double chargement d'images.

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

Prise en charge du navigateur: http://caniuse.com/#search=srcset

Autres ressources:

• Publication de la version WebKit
• Documentation W3C pour srcset
• bonne explication sur pourquoi et comment utiliser srcset
• Message de Chris Coyer pour plus de bonnes infos

Il existe différentes solutions, chacune avec ses avantages et ses inconvénients. Le choix qui vous convient le mieux dépend de divers facteurs, tels que la conception de votre site Web, le type de technologie que vos visiteurs habituels utilisent, etc. Notez que les écrans Retina ne se limitent pas au Macbook Pro Retina et aux iMac à venir, mais incluent également 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 de conception réactive génériques, au lieu de concevoir pour des appareils spécifiques. Après tout, la technologie continuera également à changer tout le temps à l'avenir.

Certaines des solutions / discussions que j'ai notées:

• Des vecteurs dans la mesure du possible, y compris des techniques CSS (dégradés, coins arrondis, etc.), SVG et polices d'icônes.
• Servir des images haute résolution ("retina"), mais les compresser davantage (qualité JPEG), comme suggéré par Yoav Weiss , ou laisser les réseaux mobiles les compresser quand on en a vraiment besoin (c'est-à-dire quand ils sont mobiles), comme suggéré par Paul Boag .
• Adaptive Images , une solution (principalement) côté serveur. Il est basé sur un cookie stockant la résolution de l'écran, un serveur Web configuré pour servir des images à partir d'un script PHP, et un script nommé pour lire le cookie et servir l'image appropriée.
• Un tas de possibilités bien décrites et discutées sur Smashing Magazine .
• Servir des résolutions légèrement plus élevées pour lisser un peu la représentation de la rétine, comme suggéré dans une vidéo de Paul Boag .
• La technique @ 1.5x sur A List Apart est fondamentalement la même idée.
• Dans un futur proche, le <picture>tag pourrait devenir une solution soutenue par un groupe de travail du W3C et même Apple.
• Une technique JavaScript proposée par Jake Archebald .
• Une discussion approfondie des différentes techniques sur Smashing Magazine et du problème en général.

Comme le montrent les autres réponses, il existe encore plus de techniques - mais probablement aucune meilleure pratique pour le moment.

Une chose que je me demande, c'est comment tester et déboguer certaines de ces techniques, sans avoir le ou les périphériques respectifs disponibles ...

Puisque personne n'a encore mentionné l'évidence, je vais le faire flotter là-bas: si possible, utilisez simplement SVG. Ils apparaissent à de belles résolutions de rétine sans aucun effort.

Le support est bon, IE8 étant le principal dinosaure dont il faut s'inquiéter. Les tailles de fichier gzippées sont souvent meilleures que les formats bitmap (png / jpg) et les images sont plus flexibles; vous pouvez les réutiliser à des résolutions différentes et les redéfinir si nécessaire, ce qui économise à la fois du temps de développement et de la bande passante de téléchargement.

Voici le moins de mixin 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 lui-même utilise une évaluation de script qui n'est pas prise en charge dans dotLess.

L'astuce avec tout cela est d'obtenir le support IE8. Il ne peut pas facilement faire la taille de l'arrière-plan, donc le cas de base (requête multimédia non mobile) doit être une icône simple et non mise à l'échelle. La requête multimédia gère alors le cas de la rétine et est libre d'utiliser la classe de taille d'arrière-plan 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;
         }
}

Échantillon d'utilisation:

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

Cela nécessite que vous ayez deux fichiers:

• start_grey-97_12.png
• [email protected]

Où le 2xfichier est en double résolution pour la rétine.

Fournissez simplement des images de rétine à tout le monde et réduisez l'image à la moitié de sa taille native à l'intérieur de l'élément d'image. Comme disons que votre image est 400pxlarge et haute - spécifiez simplement la largeur de l'image 200pxpour la rendre nette comme ceci:

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

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

si ses images d'arrière-plan, un moyen simple de le faire est:

    #image { background: url(image.png); }

@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) {
           #image { background: url([email protected]); background-size: 50%; }
}

un autre moyen simple consiste à utiliser cette méthode:

Remplacez simplement:

<img src="image.jpg" alt="" width="200" height="100" />

avec

<img src="[email protected]" alt="" width="200" height="100" />

J'ai trouvé cette manière intéressante de fournir des images à plusieurs résolutions.
Il utilise en fait CSS, ce que je voulais éviter, et ne fonctionne que dans Safari et Chrome.
Je parle de image-set.

Voici un exemple , fourni par Apple ( ici ):

header {
    background: -webkit-image-set( url(images/header.jpg)    1x,
                                   url(images/header_2x.jpg) 2x);
    height: 150px; /* height in CSS pixels */
    width: 800px; /* width in CSS pixels */
}

Je veux partager aussi ces deux liens:

• Safari 6 et Chrome 21 ajoutent un ensemble d'images pour prendre en charge les images Retina
• La image-set()notation @ W3C

Avec JSF, vous pouvez créer une balise Facelets personnalisée pour éviter d'avoir à ajouter srcsetà chaque image.

Dans votre taglib.xmlvous pourriez avoir quelque chose comme:

<tag>
  <tag-name>img</tag-name>
  <source>tags/img.xhtml</source>
  <attribute>
    <name>src2x</name>
    <required>true</required>
    <type>java.lang.String</type>
  </attribute>
</tag>

Et votre tag pourrait ressembler à quelque chose comme:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

  <img src="#{fn:replace(src2x, '@2x', '')}"
       srcset="#{src2x} 2x"/>

</ui:composition>

Qui pourrait être utilisé comme:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:myTag="http://your.com/namespace-of-taglib">
  <myTag:src2x="[email protected]"/>
</html>

Et rendra:

<img src="image.jpg"
     srcset="[email protected] 2x"/>

Ce problème est particulièrement délicat avec les sites réactifs où l'image et la largeur peuvent varier en fonction de la taille du navigateur. De même, lorsque j'ai affaire à un CMS où plusieurs éditeurs téléchargent potentiellement des milliers d'images, il me semblait irréaliste de demander aux gens de télécharger des images spécialement compressées.

J'ai donc écrit un script qui prend cela en compte, il se déclenche en bas de page et à la fin du redimensionnement. A chaque fois en tenant compte de la densité de pixels et de la taille occupée par l'image.

http://caracaldigital.com/retina-handling-code/

Si vous n'êtes pas frustré par la peur d'utiliser java-script, voici un bon article http://www.highrobotics.com/articles/web/ready-for-retina.aspx . Il a une solution très simple.

Et l' exemple de JSFiddle vaut mille mots.

En utilisant:

<img onload="getImgSrc(this,'image_x1.png')" width="100" height="100" />

JS:

/* RETINA READY IMG SRC */
function getImgSrc(img, src) {
    var srcResult = src;
    // if high-res screen then change _x1 on _x2
    if (window.devicePixelRatio > 1 && 
        src.indexOf("_x1.")>=0) {
          srcResult = src.replace("_x1.", "_x2.");
    }
    img.onload = null; //protect from second rasing
    img.src = srcResult;    
}

$(document).ready(function(){
  // fire onload trigger on IMG tags that have empty SRC attribute
  var images = $('img:not([src=""])');
    images.each(function(i) {
        $(this).trigger('onload');            
    });
});