Les écrans avec une densité de pixels élevée deviennent rapidement la norme. Les créateurs de contenu doivent s'y adapter. Il s'agit d'un petit guide sur la diffusion d'images de haute qualité sur le Web, sans polyfills, JavaScript, piratages CSS ni fonctionnalités de navigateur qui ne sont pas encore tout à fait implémentées. En un mot: sans modifier radicalement votre workflow.
Il existe aujourd'hui de nombreuses propositions d'images responsives, dont beaucoup impliquent des modifications importantes pour le développeur Web. L'attribut <img> srcset du suivi standard est difficile à implémenter, en particulier compte tenu de la complexité de la sélection supplémentaire basée sur la fenêtre d'affichage de srcset:
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
Même si la propriété CSS image-set n'utilise que devicePixelRatio pour décider de l'image à charger, elle oblige tout de même les développeurs à écrire beaucoup de balisage supplémentaire pour chaque image.
D'autres propositions, comme l'élément <picture>, sont encore plus détaillées.
De plus, ils ne sont pas de suivi standard, ce qui signifie que leur disponibilité omniprésente est encore plus éloignée que l'attribut srcset. Les solutions JavaScript et côté serveur sont la seule autre alternative, mais ces approches ont leurs propres inconvénients, comme indiqué dans d'autres articles.
Cet article passe en revue plusieurs utilisations d'images couramment trouvées sur le Web et propose des solutions simples qui fonctionnent sur les écrans avec des densités de pixels élevées et les écrans ordinaires. Dans le cadre de cette discussion, tout appareil qui indique une valeur window.devicePixelRatio supérieure à 1 peut être considéré comme un PPP élevé, car cela signifie que les pixels CSS ne sont pas identiques aux pixels de l'appareil et que les images sont mises à l'échelle.
Vous trouverez ci-dessous un récapitulatif :
- Si possible, utilisez le code CSS/SVG plutôt que des images matricielles.
- Utilisez par défaut des images optimisées pour les écrans haute densité.
- Utilisez le format PNG pour les dessins simples et le pixel art (par exemple, les logos).
- Utilisez des fichiers JPEG compressés pour les images de différentes couleurs (par exemple, des photos).
- Définissez toujours des tailles explicites (en CSS ou HTML) pour tous les éléments d'une image.
Dessins simples et pixel art
Il est souvent possible d'éviter complètement les images de petite taille en utilisant les fonctionnalités CSS ou SVG.
Par exemple, il n'est pas nécessaire d'utiliser des images pour les angles arrondis, car la propriété CSS border-radius est largement acceptée. De même, les polices personnalisées sont largement acceptées. L'utilisation de texte "imaged" n'est donc pas recommandée.
Toutefois, dans certains cas, comme les logos, une image peut être le seul moyen d'y parvenir. Par exemple, le logo Chrome a une taille naturelle de 256 x 256. Sur un écran Retina, vous pouvez voir des alias de ligne en diagonale et en courbes, ce qui semble trapu et mauvais, en particulier par rapport au texte affiché de manière nette:
Dimensions naturelles: 256x256px, taille de l'asset: 31 kB, format: PNG
Convaincu(e) ? Bien. Utilisons maintenant une image haute densité. Vous pourriez être tenté de gagner de l'espace en stockant votre logo au format JPEG, mais ce n'est peut-être pas une bonne idée, car l'enregistrement des logos et d'autres éléments graphiques dans un format avec pertes tend à introduire des artefacts. Dans ce cas, j'ai exagéré le problème en utilisant une compression très élevée, mais vous pouvez remarquer la présence de bandes sur les gradients, les mouchetures sur les fonds blancs et les lignes désordonnées:
Dimensions naturelles: 512x512px, taille de l'asset: 13 kB, format: JPEG
Pour les images relativement petites, il est recommandé d'utiliser des fichiers PNG 2x. Sachez que la différence de taille entre un fichier PNG 1x et 2x est généralement assez élevée (52 Ko dans ce cas). Toutefois, dans le cas d'un logo, il s'agit du visage de votre site Web et de la première chose que les visiteurs verront. Si vous lésinez trop sur la qualité au profit de la taille, ce sera la dernière chose que vos visiteurs verront !
Voici le logo Chrome dans toute sa splendeur, redimensionné à la moitié de ses dimensions naturelles pour les écrans x2:
Dimensions naturelles: 512x512px, taille de l'asset: 83 kB, format: PNG
Le balisage pour effectuer le rendu ci-dessus est le suivant:
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
Notez que j'ai spécifié une largeur et une hauteur pour l'image. Cette étape est nécessaire, car la taille naturelle de l'image est de 512 pixels. Il est également favorable aux performances, car le moteur de rendu connaît bien la taille de l'élément et n'aura pas besoin d'effectuer trop de travail pour le calculer.
Une optimisation possible qui pourrait fonctionner consiste à réduire le fichier PNG 24 bits à un fichier PNG 8 bits en palettes. Cela fonctionne pour les images qui présentent un petit nombre de couleurs, y compris le logo Chrome. Pour effectuer cette optimisation, vous pouvez utiliser un outil tel que http://pngquant.org/. Vous pouvez voir un peu de bandes ici, mais ce fichier ne fait que 13 Ko, ce qui représente un gain de taille phénoménal de six fois par rapport au fichier PNG d'origine au format 512 x 512.
Dimensions naturelles: 512x512px, taille de l'asset: 13 kB, format: PNG,
8-bit palette
Des images de différentes couleurs
J'ai rédigé un article sur HTML5Rocks évaluant différentes techniques d'image responsive, et j'ai effectué des recherches sur la compression des fichiers JPEG 1x et 2x, et comparé les tailles et la qualité visuelle obtenues. Voici l'une de ces cartes tirée de l'article ci-dessus:
J'ai étiqueté les images avec leur niveau de compression (indiqué par la qualité JPEG), leur taille (en octets) et mon opinion subjective sur leur fidélité visuelle comparative (classée par nombres). Ce qui est intéressant ici, c'est que l'image 2x hautement compressée (étiquetée 3) est plus petite et est plus belle que l'image 1x non compressée (libellé 4). En d'autres termes, entre les images 4 et 3, nous avons réussi à améliorer la qualité de l'image en doublant chaque dimension et en augmentant considérablement la compression, tout en réduisant la taille de 2 Ko.
Compression, dimensions et qualité visuelle
Je voulais en savoir un peu plus sur les compromis entre le niveau de compression, les dimensions de l'image, la qualité visuelle et la taille de l'image. J'ai mené une étude avec l'hypothèse suivante en me basant sur l'étude ci-dessus:
Hypothèse
Avec une compression suffisante, une image x2 ressemblera à la même image en taille x1 avec une autre compression (inférieure). Toutefois, dans ce cas, l'image x2 hautement compressée sera plus petite que l'image x1.
Traiter
- À partir d'une image x2, générez l'image x1.
- Compressez les deux images à différents niveaux.
- Créez une page de test qui affiche les deux ensembles d'images côte à côte.
- Dans les deux ensembles, trouvez l'endroit où les images sont équivalentes.
- Notez les tailles d'image et les niveaux de compression équivalents.
- Essayez-la sur un écran 1x et 2x.
J'ai créé une application de comparaison d'images côte à côte semblable à la vue de comparaison de Lightroom. L'objectif est d'afficher les images x1 et x2 côte à côte, mais aussi de faire un zoom avant sur n'importe quelle section de l'image pour obtenir plus de détails. Vous pouvez également choisir entre les formats JPEG et WebP et modifier la qualité de compression pour afficher les comparaisons de taille de fichier et de qualité d'image. L'idée est de modifier les paramètres de plusieurs images, de déterminer le compromis entre la qualité de la compression, la mise à l'échelle et le format par rapport à la qualité de l'image, et d'utiliser ce paramètre pour toutes vos images.
L'outil lui-même est mis à votre disposition. Vous pouvez effectuer un zoom avant sur l'image en sélectionnant une sous-zone sur laquelle zoomer.
Analyse
Je dirai d’emblée que la qualité des images est une chose subjective. En outre, votre cas d'utilisation particulier déterminera probablement où se situent vos priorités dans le spectre entre fidélité visuelle et taille de fichier. De plus, les différents types de caractéristiques d'image réagissent différemment à la qualité de mise à l'échelle et de compression. Par conséquent, une solution unique peut ne pas fonctionner ici. L'objectif de cet outil est de vous aider à comprendre les compressions, les mises à l'échelle et les formats de qualité d'image.
Du fait de jouer avec le zoom sur l'image, j'ai vite compris quelques choses. Tout d'abord, je préfère quality=30 dpr=2x images à quality=90
dpr=1x images pour améliorer le niveau de détail. Ces images ont également une taille de fichier comparable (dans le cas d'un avion, l'image 2x compressée fait 76 ko, tandis que l'image non compressée 1x fait 80 ko).
Il existe une exception à cette règle : les images hautement compressées (quality<30) avec des dégradés. Celles-ci ont tendance à subir des bandes colorées, qui sont tout aussi mauvaises quelle que soit l'échelle de l'image. Les exemples d'oiseaux et de voitures fournis dans l'outil en sont des exemples.
Les images WebP semblent beaucoup plus propres que le format JPEG, en particulier à de faibles niveaux de compression. Cette couleur de bande semble être beaucoup moins problématique. Enfin, les images WebP sont beaucoup plus compactes.
Mises en garde et fin
Améliorer le rendu des images sur des écrans haute densité ne représente que la moitié des problèmes liés aux images causés par des variations considérables des écrans. Dans certains cas, vous pouvez diffuser des images complètement différentes en fonction de la taille de la fenêtre d'affichage. Par exemple, le portrait d'Obama peut convenir à un écran de la taille d'un téléphone, mais le support devant lui et le drapeau derrière lui, et certains pourraient mieux convenir à un écran d'ordinateur portable.
J'ai délibérément évité ce thème de la "direction artistique" pour me concentrer uniquement sur les images à PPP élevé. Ce problème peut être résolu par un certain nombre d'approches différentes: en utilisant des requêtes média et des images de fond, via JavaScript, via de nouvelles fonctionnalités telles que image-set, ou sur le serveur. Ce sujet est abordé dans la section Images haute résolution pour des densités de pixels variables.
Je vais terminer par quelques questions en suspens:
- Effets d'une compression élevée sur les performances Quels sont les avantages du décodage d'images hautement compressées ?
- Quelles sont les conséquences en termes de performances liées au redimensionnement de l'image lorsqu'une image x2 est chargée sur un écran x1 ?
Pour résumer, optez pour le CSS et le SVG au lieu d'images matricielles. Si les images matricielles sont strictement requises, utilisez le format PNG pour les images ayant une palette limitée et de nombreuses couleurs unies, et des fichiers JPEG pour les images avec de nombreuses couleurs et dégradés. L'avantage de cette approche est que votre balisage reste pratiquement inchangé. Il suffit au développeur Web de générer deux fois plus d'éléments et de dimensionner correctement vos images dans le DOM.
Pour en savoir plus, consultez l'article de Scott Jehl sur un sujet similaire. Que vos images soient nettes et que votre consommation de données mobiles soit faible !