Les écrans à haute densité de pixels deviennent rapidement la norme. Les créateurs de contenu doivent s'adapter à cette réalité. Il s'agit d'un guide rapide qui explique comment diffuser des images de haute qualité sur le Web à l'heure actuelle, sans polyfills, JavaScript, piratage CSS ni fonctionnalités de navigateur qui ne sont pas encore 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 de 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 choisir l'image à charger, elle oblige les développeurs à ajouter 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 conformes aux normes. Leur disponibilité universelle est donc encore plus éloignée que l'attribut srcset. Les solutions JavaScript et côté serveur constituent la seule autre alternative, mais ces approches présentent des inconvénients, qui sont décrits dans d'autres articles.
Cet article présente plusieurs utilisations d'images couramment rencontrées sur le Web et propose des solutions simples qui fonctionnent aussi bien sur des écrans à densité de pixels élevée que sur des écrans ordinaires. Pour les besoins de cette discussion, tout appareil qui indique une valeur window.devicePixelRatio supérieure à 1 peut être considéré comme ayant une résolution DPI élevée, car cela signifie que les pixels CSS ne sont pas les mêmes que les pixels de l'appareil et que les images sont mises à l'échelle.
Voici un résumé de ces recommandations :
- Si possible, utilisez CSS/SVG plutôt que des images matricielles.
- Utilisez des images optimisées pour les écrans haute densité par défaut.
- Utilisez des fichiers PNG pour les dessins simples et l'art pixel (par exemple, les logos).
- Utilisez des fichiers JPEG compressés pour les images présentant une variété de couleurs (par exemple, des photos).
- Définissez toujours des tailles explicites (à l'aide de code CSS ou HTML) pour tous les éléments d'une image.
Dessins simples et pixel art
Les petites images peuvent souvent être évitées en utilisant des fonctionnalités CSS ou le format SVG.
Il n'est pas nécessaire d'utiliser des images pour les angles arrondis, par exemple, car la propriété CSS border-radius est largement prise en charge. De même, les polices personnalisées sont largement compatibles. Il est donc déconseillé d'utiliser du texte "image".
Cependant, dans certains cas, comme pour les logos, une image peut être la seule solution. Par exemple, le logo Chrome a une taille naturelle de 256 x 256. Sur un écran Retina, vous pouvez voir l'aliasing des lignes dans les diagonales et les courbes, ce qui semble grossier et mauvais, en particulier par rapport au texte affiché de manière nette:
Dimensions naturelles: 256x256px, taille de l'élément: 31 kB, format: PNG
Vous êtes convaincu ? Très 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 enregistrer les logos et autres éléments graphiques au format avec pertes a tendance à introduire des artefacts. Dans ce cas, j'ai exagéré le problème en utilisant une compression très élevée, mais notez les bandes sur les dégradés, les taches sur les arrière-plans blancs et les lignes désordonnées :
Dimensions naturelles: 512x512px, taille de l'élément: 13 kB, format: JPEG
Pour les images relativement petites, utilisez des PNG 2 x. Notez que la différence de taille entre un PNG 1x et un PNG 2x est généralement assez élevée (52 ko dans ce cas). Toutefois, dans le cas d'un logo, il s'agit de la vitrine de votre site Web et de la première chose que vos visiteurs verront. En lésinant trop sur la qualité au détriment de la taille, ce sera également la dernière chose que vos visiteurs verront.
Voici le logo Chrome dans toute sa splendeur, réduit de moitié pour les écrans 2 x :
Dimensions naturelles : 512x512px, taille de l'asset : 83 kB, format : PNG
Le balisage permettant d'afficher ce qui précède 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. Cela est nécessaire, car la taille naturelle de l'image est de 512 pixels. Il est également bon pour les performances, car le moteur de rendu connaît bien la taille de l'élément et n'a pas besoin de travailler trop pour le calculer.
Une optimisation possible consiste à réduire la taille PNG 24 bits à une version en palettes de 8 bits. Cela fonctionne pour les images comportant 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 6 fois phénoménal par rapport au fichier PNG 512 x 512 d'origine.
Dimensions naturelles: 512x512px, taille de l'élément: 13 kB, format: PNG,
8-bit palette
Images avec une variété de couleurs
J'ai écrit un article sur HTML5Rocks examinant un certain nombre de techniques d'image responsives. J'ai également effectué des recherches sur la compression JPEG 1x et 2x, et comparé les tailles et la qualité visuelle obtenues. Voici une telle carte 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 de leur fidélité visuelle comparée (classée par des chiffres). Ce qui est intéressant ici, c'est que l'image 2x hautement compressée (étiquette 3) est plus petite en taille et a un meilleur aspect que l'image 1x non compressée (étiquetée 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 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 réalisé une étude avec l'hypothèse suivante basée sur l'étude ci-dessus:
Hypothèse
Avec une compression suffisante, une image 2 x sera équivalente à la même image en taille 1 x avec une autre compression (inférieure). Toutefois, dans ce cas, l'image 2 x hautement compressée sera plus petite que l'image 1 x.
Processus
- À partir d'une image 2 x, générez-en une 1 x.
- Compressez les deux images à différents niveaux.
- Créez une page de test affichant les deux ensembles d'images côte à côte.
- Trouvez l'emplacement dans les deux ensembles où les images sont équivalentes.
- Notez des tailles d'image et des niveaux de compression équivalents.
- Essayez-le 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 côte à côte des images au format 1x et 2x, mais aussi de vous permettre 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 comparer la taille des fichiers et la qualité des images. L'idée est d'ajuster les paramètres de plusieurs images, de déterminer la qualité de compression, de mise à l'échelle et de format par rapport à la qualité d'image qui vous convient, et d'utiliser ce paramètre pour toutes vos images.
Vous pouvez utiliser l'outil en lui-même. Vous pouvez effectuer un zoom avant sur l'image en sélectionnant la sous-zone à agrandir.
Analyse
Je dirai d'emblée que la qualité d'image est une chose subjective. En outre, votre cas d'utilisation particulier déterminera probablement où se situent vos priorités en termes de fidélité visuelle par rapport à la 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. Il n'est donc pas nécessairement possible de trouver une solution universelle. L'objectif de cet outil est de vous aider à comprendre en quoi consistent les compressions, les échelles et les formats d'image.
Lorsque j'ai joué avec le zoom, j'ai rapidement
compris certaines choses. Tout d'abord, je préfère les images quality=30 dpr=2x aux images quality=90
dpr=1x, car elles offrent plus de détails. La taille de fichier de ces images est également comparable (dans le cas de l'avion, l'image compressée 2 x est de 76 Ko, tandis que l'image non compressée 1 x est de 80 Ko).
Les images fortement compressées (quality<30) avec des dégradés constituent des exceptions à cette règle. Ils ont tendance à présenter des bandes de couleur, ce qui est tout aussi mauvais quelle que soit l'échelle de l'image. Les exemples d'oiseaux et de voitures trouvés dans l'outil en sont des exemples.
Les images WebP sont beaucoup plus nettes que les images JPEG, en particulier à des niveaux de compression faibles. Ce crénelage de couleur semble être beaucoup moins problématique. Enfin, les images WebP sont bien plus compactes.
Mises en garde et fin
Obtenir un rendu correct des images sur des écrans haute densité ne représente que la moitié des problèmes liés aux images causés par une énorme variation d'é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 être adapté à un écran de téléphone, mais le pupitre devant lui et le drapeau derrière lui, et d'autres peuvent être plus adaptés à l'écran d'un ordinateur portable.
J'ai délibérément évité la partie "direction artistique" pour me concentrer uniquement sur des images haute résolution. Ce problème peut être résolu par un certain nombre d'approches: l'utilisation de requêtes multimédias et d'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 les densités de pixels variables.
Je vais terminer en posant quelques questions ouvertes:
- Effets d'une compression élevée sur les performances. Quelles sont les conséquences du décodage d'images hautement compressées ?
- Quelles sont les pénalités 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 plutôt que d'utiliser des images matricielles. Si des images matricielles sont strictement requises, utilisez des fichiers PNG pour les images dont la palette est limitée et qui comportent de nombreuses couleurs unies, et des fichiers JPEG pour les images comportant de nombreuses couleurs et dégradés. L'avantage de cette approche est que votre balisage reste pratiquement inchangé. Tout ce qui est requis du développeur Web est de générer des éléments 2 x et de dimensionner correctement vos images dans le DOM.
Pour en savoir plus, consultez l'article de Scott Jehl sur un sujet similaire. Vos images seront nettes et votre consommation de données mobiles sera réduite.