En web-design, les images sont un aspect tout à fait essentiel mais difficile à gérer correctement, que ce soit du point de vue de la mise en page (la plupart d’entre vous avez fait l’expérience des grids et autres flex-boxs du démon) ou de la connsomation de bande passante. Aujourd’hui, nous allons faire un pas de côté du design vers la programmation, et endosser temporairement, notre casquette de déveleppeuses (et développeurs), afin de comprendre les enjeux techniques et esthétiques de la diffusion d’images sur le web.
Les images : du scan au site
En tant que graphistes formés à la création de livres, chacun d’entre nous fait l’expérience de la peur panique du pixel visible. Une image imprimée, agrandie au-delà de son nombre de points par pouce (résolution) ou qui comporte trop peu de points par pouce (une trop faible résolution), révélera, parrallèlement à son objet, les points qui la compose: ont la dira "pixellisée". L’image pixellisée est le cauchemard du graphiste (et plus encore du photograveur). D’où notre tendence, lorsque nous scannons un visuel, à choisir la résolution la plus haute, quitte à obtenir des images incroyablement lourdes, dont chaque pouce comporte des milliers de pixels.
Choisir la résolution maximale au moment du scan est un choix sage, pour celui qui possède un large espace disque. Il garantit que l’image puisse être imprimée dans des dimensions importantes, sans perte de qualité, et plus encore, laisse ouvertes une myriade de possibilités d’impressions et de traitement (zoom, agrandissement, déclinaison à différents supports...). Nénamoins, il y a quelque chose d’un peu ridicule dans le fait d’utiliser des millions de pixels pour décrire une image qui sera imprimée en tout petit, ou par une imprimante incapable de rendre une résolution si élevée. Un conseil : toujours se poser à minima la question de la destination. Toutes les images n’ont pas besoin d’être démesurément définies, surtout si les imprimantes ou les écrans qui les reproduisent ne peuvent rendre compte de toutes leurs subtilités.
En web, l’enjeu de la pixellisation des images ne disparait pas, mais est adossé à une contrainte supplémentaire, absente, ou plutôt moins présente, dans le cas du print : le poids (size en anglais). Un site web, comme expliqué précedement, est une série de fichiers téléchargés depuis un serveur vers un ordinateur client, puis, lus par cet ordinateur client. Plus le site est lourd, plus le temps de téléchargement sera important, et donc, plus le site mettra du temps à apparaitre, et plus il consomera de bande passante. Il faut donc faire en sorte qu’il soit le plus léger possible, afin de garantir un affichage rapide et un coût minimal en données, tout en conservant une qualité d’image optimale.
Afin de réaliser cet exploit, il nous faut retourner à l’essence de l’image numérique.
Images matricelles & images vectorielles
Une image matrcielle est une image composée d’une série de pixels[1], où chacun des pixels peut prendre une série de valeurs, qui correspondent à une couleur. Les images matrcielles diffèrent des images vectorielles qui sont décrites par une série de points et de tracés les reliant (contours). Elles représentent l’écrasante majorité des images en circulation sur web, c’est pourquoi nous allons nous concertrer sur elles, leur traitement, et les paramètres qui les définissent :
- L’espace colorimétrique d’une image est la manière dont sont décrites les couleurs la composant. Les espaces colorimétriques les plus courants sont RVB et CMJN. L’espace RVB est défini par trois couches de lumières (qui correspondent à trois valeurs) utilisée pour décrire chaque pixel : Rouge, Vert et Bleu. Cet espace est destiné à être lu et reproduit par un écran, qui rend les couleurs par un mélange de signaux lumineux rouge, vert et bleu. Il utilise le principe de la synthèse additive. L’espace CMJN décrit chaque point par quatre couche d’encre, Cyan Magenta Jaune et Noir. En impression, on parle de points et non pas de pixels car les imprimantes et presses matérialisent les images comme des séries de points (ciculaires) extremement rapprochés. L’espace CMJN est exclusivement destiné aux machines de type imprimantes ou presses offset. Il est basé sur la synthèse soustractive, car les couleurs sont reproduites par accumulation d’encres.
- La profondeur de couleurs d’une image désigne le nombre de couleurs total que peut prendre un pixel ou un point. Il depend du nombre de couches de couleurs décrivant une image, et du nombre de valeurs que peut prendre chaque couleur de chaque pixel. Communément, chaque couleur peut prendre 256 valeurs (c’est le cas également pour les couleurs CSS), qui correspondent à 8 bits de mémoire occupés. La profondeur de couleur s’exprime en bits. Une image RVB comporte donc généralement une profondeur de 24-bits (16.7 millions de couleurs possibles), et une image CMJN de 32-bits, car elle comporte une couche de couleur supplémentaire.
- La définition d’une image numérique est le nombre de pixels total qui compose l’image, exprimé par largeur x longueur. La définition d’une image imprimée serait le nombre de points qui la compose.
- La résolution d’une image numérique est la densité de pixels sur une zone donnée, exprimée en ppi, pixel par pouce (pixel per inch). La résolution d’une image imprimée désigne également la densité, non pas de pixels mais de points sur une zone donnée, exprimée en dpi, point par pouce (dots per inch). Les deux unités, dpi et ppi sont souvent confondues. L’emploi de l’une ou l’autre est normalement conditionné au contexte de rendu de l’image, sur un écran ou sous forme d’impression. Cette confusion importe finalement peu, car le passage de l’une à l’autre se fait pas un ratio de 1:1, c’est-à-dire que 1 ppi est égal à 1 dpi. On utilise l’unité ppi lorsque l’on travaille une image en amont d’une impression.
Le terme résolution peut s’avérer difficile car, appliqué à un écran (display), il désigne le nombre total de pixels que cet écran est capable d’afficher (display resolution, screen resolution), ou ce que nous avons appelé définition dans le cas d’une image. Le pixel est une unité par définition relative à l’écran d’un ordinateur. La taille en unité absolue d’un pixel dépend de la taille (en pouce) et de la résolution (en pixels) de l’écran. Plus l’écran est permformant, plus il est capable d’afficher de pixels pour une zone donnée, et donc, plus un pixel sera petit, et plus les images apparaiteront détaillées. Pour la plupart des appareils, il est possible de faire varier la résolution d’un écran, c’est-à-dire de modifier (toujours réduire) le nombre de pixels total que l’écran va afficher. Par exemple, si votre écran est capable d’afficher 1920 x 1080 pixels (full HD), vous pouvez modifier les paramètres de votre système de telle sorte qu’une résolution moins importante comme 1366 x 768 pixels (HD) soit utilisée pour rendre les contenus. Dans les deux cas, un pixel n’aura donc pas la même taille en unité absolue.
Définition, résolution et taille d’image appliqués au web
La densité de pixels necessaire à une image web est totalement déconnectée de la densité de pixels de l’appareil qui va la rendre, c’est-à-dire du nombre de pixels par pouce que l’écran de l’appareil client est capable d’afficher. Ce qui compte sont les pixels eux-mêmes, c’est-à-dire la défintion, le nombre de pixels total qui composent l’image. La notion de pixel par pouce n’a pas de sens car l’ordinateur affichera tous les pixels de l’image suivant la résolution de l’écran qui la rend, sans considération aucune pour la taille en unité absolue donnée à l’image (cm, mm, pouce...), qui n’est valable que dans un contexte d’impression. Il est déconseillé d’utiliser des unités absolues en CSS pour définir la taille des images, notemment car cela peut aboutir à étirer ou réduire inutilement une image suivant l’écran qui la rend, car un nombre de pixels varaible sera contenu dans une unité absolue (1 cm ne comporte par le même nombre de pixels suivant la résolution de l’écran).
Ce qu’il nous faut regarder lorsque l’on prépare des images pour le web, c’est le nombre de pixels contenus dans cette image. En sachant qu’un écran 5k (5000) est capable d’afficher 5120 x 2880 pixels, il apparait complemetement inutile, dans un contexte web, d’utiliser des images avec une définiton supérieure, car celles-ci ne seront quasiment jamais vues dans leurs dimensions réèlles. De plus, une image de 5120 x 2880 pixels serait utile seulement dans le cas où celle-ci serait affichée en plein écran sur le site web! En plus de se poser la question des écrans et de leur capacité, il faut également se poser la question de la mise en page du site, et de la taille qu’une image est suceptible de prendre dans ce contexte précis. Et pour finir, dans le cas de résolutions très importantes, les navigateurs affichent nativement généralement les sites web dans une résolution inférieure à la capacité de l'écran, par fois de deux fois! Ce qui signifie que la taille maximale dans laquelle notre image sera vue dans le cas d'une résolution 5k sera non pas 5120 pixels, mais 2560.
La balise picture
Il existe depuis peu une balise en CSS qui permet de charger une image différente selon la taille de l’écran qui la rend, ce qui représente une gain énorme en terme de bande passante. Cette balise s’appelle picture. Utiliser cette balise necessite de générer plusieurs copies de la même image, avec plusieurs définitions correspondants aux différents seuils mis en place par la balise (elle fonctionne sur un principe similaire au max-width CSS responsive). La balise picture permet également de charger le format d’image supporté par le navigateur client. Certains formats d'image très performants mais nouveaux (comme le webp, voir plus bas) ne sont pas supportés par les naviagteurs les plus anciens. Grâce à la balise picture, il est possible d'intégrer plusieurs formats pour une même image, ce qui permet au navigateurs de charger le format le plus efficace qu'il supporte. Le principe est simlaire à celui utiliser pour le chargement des fonts.
Ainsi, le gain en bande passante se paye par une complexité du code accrue, et par la consomation d’espace disque par différentes copies de la même image. Rien n’est gratuit. Cette technique est largement utilisé dans un contexte profesionel, mais nous n’allons néanmoins pas en voir le détail aujourd’hui : notre stratégie consistera plutôt à générer une seule image, qui devra fonctionner sur toutes les tailles d’écran.
Espace colorimétrique & web
Lorsque l’on prépare des images pour le web, il faut veiller, dans le cas de format d’images matrcielles compatibles avec le CMJN, à bien convertir leur espace colorimétrique en RVB si necessaire. Une image décrite en CMJN apparaitera si elle est insérée dans un site web, mais son poids sera inutilement plus important. De plus, une image en espace colorimétrique CMJN affichée sur un écran reste essentiellement une traduction étant donné qu’elle est décrite par des niveaux d’encres et non pas de lumières. Dans le cas d’images destinées à être vues exclusivement sur des écrans et jamais imprimées, il est inutile de passer par cette étape supplémentaire sujette à interprétation, et préférable d’utiliser la description lumineuse appropriée (l’espace colorimétrique RVB).
Principaux formats d’image web: choisir le format adapté à ses besoins
Un format est une somme de données numériques (nombres) destinée à être interprétée par un ordinateur (ou une autre machine) selon une série de règles pré-établies, qui visent ici à rendre une image, matricielle ou vectorielle, numérique ou imprimée.
Les principaux formats d’images destinés au web sont: png, jpg, gif, bmp, svg et pour finir webp. Chacun d’entre eux possèdent des spécificités :
- GIF (Graphics Interchange Format) : Célèbre pour sa capacité à générer des animations d’images, le gif (statique à l’origine) a été conçu en 1987 pour permettre à des images en couleurs d’être téléchargées rapidement sur un réseau. C’est le plus vieux format encore supporté par les navigateurs. La stratégie adopté par le gif pour réduire la taille des images est différente de celle du jpg (à venir), qui supprime des pixels. Plutôt que de réduire le nombre de pixels, ce que le gif optimise est le nombre de couleurs, grâce à la technique dite de "la palette". Concretement, chaque image enregistrée en gif ne peut comporter plus de 256 couleurs (une palette). Ces 256 couleurs peuvent être choisies parmi les 16.7 millions de couleurs du RVB 24-bits, mais restent en nombre fini (pour l’image complète à l’origine, aujourd’hui pour une zone de l’image). Ainsi, au lieu de décrire entièrement chaque couleur pour chaque pixel (3 nombres entre 0 et 255), le gif donne seulement la référence de la couleur sur la palette (1 nombre entre 0 et 255). Ce qui, sur des milliers de pixels, comporte un gain de caractères (et donc de poids) considérable ! Le gif accepte également des palettes plus réduites, comportant moins de 256 couleurs (128 (16-bits), 64 (8-bits), 32 (4 bits)...) ce qui permet de réduire encore le poids. Parallement à la réduction des couleurs, le utilise gif aussi un algorithme de compression appellé LZW (que vous avez peut-être déjà croisé en compressant des images en tiff), qui permet d’optimiser les données d’une image sans perte. Ainsi, aucun pixel n’est perdu. La compression viens entierement de la réduction des couleurs. Petit plus : le gif peut également gérer une couche de transparente, mais on lui préfère souvent le png compte tenu de ses limitations de couleurs.
- JPG (Joint Photographic Expert Group) : Mis au point en 1992 avec de nombreuses versions successives, le format jpg fut jusqu’à aujourd’hui le format le plus utilisé pour mettre en ligne des images matrcielles sur le web. Son atout réside dans sa capacité de compression qui lui permet de génèrer des images très légères, et son très grand support par les navigateurs. Attention! Jpg est un format destructeur, ce qui signie que chaque compression successive en jpg supprime des pixels. Il fonctionne par moyenne, c’est-à-dire qu’il selectionne une zone de pixels, établit la dominante colorée et remplace la zone par un pixel unique de cette couleur moyenne. Les pixels ainsi remplacés sont perdus, ce qui signifie qu’il ne faut jamais travailler une image en jpg, mais seulement générer ce format une fois que les éventuelles modifications sont terminées (le travail doit se toujours se faire dans un format non-destructeur comme tiff ou psd pour les utilisateurs de Photoshop).
- PNG (Portable Network Graphics) : Inventé en 1996 pour remplacer le gif, la particularité du format png est à l’origine, sa composition chromatique et sa capacité à rendre sans perte des images matricielles RVB en 24-bits avec ou sans palette. En png, une image n’est pas composée de trois couches, Rouge Vert et Bleu (RVB) mais de quatre: Rouge Vert Bleu et Alpha. La couche alpha est utilisée pour décrire une série de pixels qui définissent des zones de transparence. Le format png est un format non-destrcuteur, qui génère des images plutôt lourdes, mais de grande qualité. Avec une exception notable : les images contenant des aplats seront plus légères stockées en png.
- BMP (BitMaP) : Le bmp est un format d’image matrcielle exclusivement RVB sans aucune compression (description de chaque pixel par rangée), mis au point par Microsoft pour le système d’exploitation Windows dans les années 90. Il est très flexible acceptant de nombreuses profondeurs de couleurs (du noir et blanc strict au millions de couleurs). Il possède également une large compatibilité avec de nombreux logiciels. Son principal défaut dans le cadre du web réside dans son poids important, car chaque pixel est individuellement décrit.
- SVG (Scalable Vector Graphics) : Développé en 1999, le format svg est un format d’image vectoriel basé sur le langage de description XML (qui ressemble énormément au HTML), décrivant comme son nom l’indique, des vecteurs redimensionables. Dans une page HTML, les images svg peuvent être importée en tant qu’image avec la balise <img> ou alors, intégrées directement au code HTML, et modifiées à l’aide du CSS (ce qui est génial). Pas de question de pixels ou couleurs à se poser pour elles, le poids viens principalement du nombre de points et de tracés. Il existe des stratégies pour réduire des images SVG trop lourdes (notemment avec le superbe logiciel potrace) mais nous n’allons pas en parler aujourd’hui.
- WEBP : Inventé par Google en 2010, webp est un format ultra-light, conçu pour remplacer progressivement les formats d’images matrcielles web historiques cités précedemement. Il s’agit du format à ce jour le plus efficace et le plus léger pour les images statiques. Il existe en deux versions : avec perte, plus léger, et sans perte, plus lourd mais avec la conservation intégrale des données. Le seul défaut du webp se trouve dans son support : étant relativement récent, les navigateurs n’ont implémenté son support que depuis quelques années, ce qui signifie que certains utilisateurs pourraient ne pas voir s’afficher les images au format webp. Graduellement, à la suite de mise à jour et de changements d’appareils, le support s’agrandit, ce qui permet aux développeurs de l’utiliser de manière croissante.
Ici, un résumé tout à fait pertinant des pour et contre de chaque format : https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types.
Préparer des images pour le web: 3 règles essentielles
1 / Choisir le format approprié
Mon image comporte-t-elle de la transparence ? Une animation ? Est-ce que je peux la compresser sans perte significative de qualité ? Qu’est ce qui est le plus important pour mon site web, un support 100% des images pour tous les navigateurs ou un chargement ultra-rapide ? La réponse à ces questions dépend du contexte d’application de votre site web et des priorités que vous établissez !
2 / Donner une définition (dimensions) d’image appropriée
- Quelque soit le contexte, la définition d’une image web ne doit jamais dépasser 3000 pixels, car l’immense majorité des écrans seront incapables de la montrer échelle 1.
- La définition d’une image dépend:
- de le mise en page du site : une image est-elle montré en petit ou en plein écran ?
- de l’écran qui la rend : on peut décider par exemple de laisser de côté les écran 5K (peu courant) pour se concentrer sur un rendu optimal pour une résolution full HD (1920 x 1080 pixels).
Pour tester directement la taille d’une image, je vous conseille de l’ouvrir dans un navigateur, sans passer par un site web. Si la taille est supérieure à la taille de votre écran, il faut vous demander directement si elle ne devrait pas être redimensionée.
3 / Veiller à conserver un espace colorimétrique approprié
Ou dit autrement, bannir absoluement le CMJN. Suivant les formats d’images que vous choisirez d’utiliser, l’espace colorimétrique pourra être RVB ou parfois Grayscale ou Bitmap :)
La péréapration des images pour le web dépend beaucoup du contexte, et necessite de toujours se poser la question des appareils de rendu, ainsi que de la mise en page. Il n’y a pas de dimensions et de formats magiques !
Des logiciels de préparation
- Photoshop
Photoshop reste un outil essentiel pour préparer des images pour le web, lorsque l’on travaille en statique. Suivant la mise en page de votre site web, il est possible d’utiliser la fonction Script pour donner des dimensions similaires à une série d’images avec un gabarit similaire.
- ImageMagick
ImageMagick est un logiciel en ligne de commande absolument magnifique (et je peèse mes mots) qui permet d’appliquer des transformations d’images depuis un terminal. Il est largement utiliser pour redimensionner des images à la volée dans des contextes de sites web dynamiques.
Pour rappel : toutes les images générées pour le web doivent être des COPIES. Veillez à toujours conserver une version de travail de chacune de vos images dans un format non-destructeur, ou alors à ne pas travailler directement dans l’image de base (en JPG pour la plupart des appareils photo).
[1] Le mot pixel désigne une unité de surface permettant de décrire une image numérique. Concretement, il s’agit d’un zone carrée, qui comporte une certaine teinte chromatique.