web-dev-qa-db-fra.com

Images Retina automatiques pour les sites Web

Avec le nouveau Apple MacBook Pro avec affichage Retina, si vous fournissez une image "standard" sur votre site Web, le résultat sera un peu flou. Vous devez donc fournir une image Retina.

Est-il possible de basculer automatiquement sur @2x images, comme iOS (avec Objective-C) fait? Ce que j'ai trouvé, c'est: CSS pour les images haute résolution sur les écrans mobiles et rétiniens , mais j'aimerais pouvoir trouver un processus automatique pour toutes mes images sans CSS ou JavaScript .

C'est possible?

[~ # ~] met à jour [~ # ~]
Je voudrais souligner cet intéressant article article suggéré par @ Paul D. Waite et une discussion intéressante ) liée par Sebastian .

htmlimageretina-display
98
jan267

Il existe un nouvel attribut pour la balise img qui vous permet d’ajouter un attribut retina src, à savoir srcset. Aucun code JavaScript ou CSS requis, aucun 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:

134
mtaube

Il existe différentes solutions, chacune avec ses propres avantages et inconvénients. Laquelle vous convient le mieux dépend de divers facteurs, tels que la conception de votre site Web, le type de technologie utilisé par vos visiteurs habituels, etc. Notez que les écrans Retina ne se limitent pas au Macbook Pro Retina et aux prochains iMac, 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 conception réactive, plutôt que de concevoir pour des périphériques spécifiques. Après tout, la technologie évoluera tout le temps dans le futur.

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

  • Des vecteurs dans la mesure du possible, y compris des techniques CSS (dégradés, angles arrondis, etc.), des polices SVG et des 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 laissez les réseaux mobiles les compresser quand vous en avez vraiment besoin (c'est-à-dire quand ils sont mobiles), comme suggéré par Paul Boag.
  • Images adaptatives, une solution (principalement) côté serveur. Il est basé sur un cookie stockant la résolution de l'écran, un serveur Web configuré pour diffuser des images à partir d'un script PHP) et un script nommé permettant de lire le cookie et de diffuser l'image appropriée.
  • n tas de possibilités bien décrit et discuté sur Smashing Magazine .
  • Servir à peine des résolutions légèrement plus élevées pour lisser un peu la représentation 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 proche avenir, le <picture> tag peut devenir une solution supportée par un groupe de travail du W3C et même par Apple.
  • A technique JavaScript proposé par Jake Archebald .
  • Un discussion approfondie de différentes techniques sur Smashing Magazine et le problème en général.

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

Je me demande comment tester et déboguer certaines de ces techniques sans disposer du (des) périphérique (s) correspondant (s) ...

14
bhell

Voici le moins de mixin que j'utilise pour y parvenir 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 une évaluation de script qui n’est pas prise en charge par dotLess.

Le truc avec tout cela est d'obtenir le support de IE8. La taille de l’arrière-plan ne peut pas être facilement remplacée. Le cas de base (requête multimédia non mobile) doit donc être une simple icône non redimensionnée. La requête du média traite ensuite le cas de la rétine et est libre d'utiliser la classe de taille d'arrière-plan car 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 );

Cela vous oblige à avoir deux fichiers:

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

10
muzzamo

Comme personne n’a encore mentionné l’évident, j’en parlerai: si possible, utilisez SVG. Ils apparaissent à de belles résolutions de la rétine sans aucun effort.

Il est bien pris en charge, IE8 étant le principal dinosaure à s'inquiéter. La taille des fichiers compressés est souvent meilleure que celle des formats bitmapped (png/jpg) et les images sont plus souples. vous pouvez les réutiliser à différentes résolutions et les redessiner si nécessaire, ce qui vous fait gagner du temps de développement et de la bande passante de téléchargement.

10
svachalek

Il vous suffit de fournir des images de rétine à tout le monde et de réduire l'image à la moitié de sa taille native à l'intérieur de l'élément image. Comme, disons, votre image est 400px large et haut - spécifiez simplement la largeur de l'image comme 200px pour le rendre plus net, comme ceci:

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

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

6
webdev

J'ai trouvé ce moyen intéressant de fournir des images à résolution multiple.
Il utilise en réalité CSS, ce que je voulais éviter, et fonctionne dans Safari et Chrome uniquement.
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:

1
jan267

C'est ce que fait mon extrait de code. Aucun jQuery requis, utilisez simplement l'attribut data-hdimg.

https://github.com/ajkochanowicz/High-Res-Images

document.addEventListener 'DOMContentLoaded', ->
  HDimgs = document.querySelectorAll '[data-hdimg]'
  (
    image = new Image()
    image.onload = ->
      console.info 'Image loaded'
      img.src = image.src
      img.style.width = "#{image.width / 2}px"
      img.removeAttribute 'data-hdimg'
    image.onerror = ->
      console.error 'Could not load image'
    image.src = img.dataset.hdimg
  ) for img in HDimgs
1
Adam Grant

si son image de fond 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:

Il suffit de remplacer:

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

avec

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

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

Et le exemple dans 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');            
    });
});
1
Artru

Ce problème est particulièrement délicat avec les sites sensibles où l'image peut être de largeur variable en fonction de la taille du navigateur. De même, lorsque je traite avec un CMS où plusieurs éditeurs sont potentiellement en train de télécharger des milliers d'images, il m'a semblé irréaliste de demander aux personnes 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 au bas de la page et au redimensionnement terminé. 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/

0
Keegan's hairstyle 82