Les images sur le web…

… prennent une place essentielle et prennent aussi la tête : format, compression, colorimétrie, dimensions, affichage, résolution d’écran, css, ressources ; autant de paramètres et de techniques pas toujours faciles à maîtriser.

Les différents formats d’images (format web)

Il faut d’abord distinguer les images au format bitmap (basé sur les pixels) des images vectorielles (basé sur la géométrie et le calcul). La plupart du temps, nous utilisons des images bitmap sur les sites web et ces images sont compressées à la fois pour s’adapter aux écrans (qui ont chacun une résolution spécifique1) et pour proposer des tailles de fichiers acceptables à télécharger.

Ensuite, il faut parler des formats colorimétriques. On utilise le format RVB pour le web : Rouge, Vert, Bleu (ou RGB en anglais (Red, Green, Blue)) qui est le mode par défaut des écrans. Une couleur se définit donc sous la forme de 3 paramètres R (de 0 à 255), V(de 0 à 255) et B(0 à 255). À une couleur RVB correspond une notation hexadécimal (par exemple #FFFFFF pour la couleur blanche), format largement utilisé en CSS.
Le format RVB doit être différencié du format CMJN2 , format en quadrichromie qui, lui, est destiné à l’impression numérique et offset (print). Il est malheureusement aisé de le confondre car il est parfois sauvegardé sous forme de Jpeg…

L’affichage des couleurs dépend aussi de la qualité et du type de votre écran. Sur votre écran, les couleurs affichées peuvent avoir un rendu différent même si la définition RVB est la même.

➔ Green digital : Il faut redimensionner les images en dehors du navigateur. Sur une page web, il est nécessaire de définir la taille d’affichage d’une image. Cette taille se définit en largeur (width) et en hauteur (height) et la plupart du temps en pixels. Les navigateurs ré-adaptent automatiquement la taille d’une image pour celle demandé à l’affichage. L’erreur classique consiste donc, par exemple, à afficher une image de 500px sur 400px sur la page à partir d’une image faisant le double, c’est-à-dire 1000px par 800px ; ce qui augmente énormément le temps de chargement.

La compression d’images bitmap

Voici les 3 principaux formats de compression d’images utilisés actuellement, chacun possédant ses caractéristiques, ses avantages et ses défauts :

  • JPEG (Joint Photographic Expert Group) : Compression de pixels | Ne permet pas la transparence | Statique. La compression est facilement adaptable (en pourcentage) et donne des fichiers légers, visibles sur tous les navigateurs & programmes. Attention, cependant, à la perte de qualité lorsque le fichier est compressé en dessous de 50%. L’utilisation de ce format est parfait pour des photos, images riches en couleurs. Il est bien adapté aux réseaux sociaux.
  • GIF (Graphics Interchange Format) : Compression de couleurs | Permet la transparence brut (sans opacité) | Animé ou non. Connu et largement utilisé pour des animations courtes, il est approprié pour des graphismes avec peu de couleurs. Attention ce format n’affiche pas bien les dégradés de couleurs.
  • PNG (Portable Network Graphics) : Compression de très bonne qualité | Permet la transparence par couche alpha (permet l’opacité) | Statique. Parfaitement adapté pour des graphiques, des logos, des icônes mais un peu lourds pour des photos de grande taille. Attention, il existe des sous-catégories 8 bit, 16 Bit, 24 bit and 32 Bit et même plus (eh oui, ce serait trop simple…).

Vous trouverez également d’autres formats possibles de compression : Jpeg 2000, Jpeg XR, WebP… À étudier pour les plus passionnés.

Les images vectorielles

Une image vectorielle a le grand avantage d’avoir la même taille de fichier quelque soit sa taille d’affichage (redimensionnement sans perte de qualité). Le principal format utilisé est celui-ci :

  • SVG (Scalable Vector Graphics) : Format vectoriel | Permet la transparence par couche alpha | Statique. C’est un format idéal pour les logos et les icônes. Attention, des versions d’anciens navigateurs ne le reconnaissent pas et les réseaux sociaux ne supportent pas toujours ce format.

➔ Green digital : La compression des images sur votre site web est une étape très importante. Effectivement, sur des CMS comme WordPress, les imports d’image s’opèrent sous différents tailles (création de formats intermédiaires (medium – vignettes) mais c’est à vous de déterminer s’il faut utiliser du png, du jpeg ou du gif. Les robots d’indexation sont aujourd’hui très sensibles aux efforts de compression.

Voici aussi d’autres techniques pour économiser des ressources images :

  • Faire du Lazy-loading : cela consiste à n’afficher les images que lorsqu’elles sont visibles à l’écran.
  • Privilégier l’utilisation de CSS à l’utilisation d’images (boutons par exemple).
  • Utiliser des sprites CSS afin de limiter les requêtes http en utilisant un fichier image unique pour afficher des sous-images une à une (propriété background-position).
  • Importer des police d’icônes (font-face) : Les images vectorielles sont encapsulées dans la police et de simples styles css permettent d’afficher les icônes. Attention, si vous n’avez besoin que de deux ou trois icônes, le chargement complet de la police peut s’avérer contre-productif par rapport au gain attendu.

1 On parke aussi de dpi (dots per inch) : C’est une unité de précision communément utilisée pour définir la résolution d’un scanner ou d’un écran. Les écrans de jadis avaient une résolution standard de 72 dpi. Aujourd’hui, les résolutions sont toutes différentes et seul la taille en pixels des images importent. Côté écran Retina, il existe des adaptations possibles pour afficher une image retina spécifique à ces écrans. Cependant, aller dans le sens de processus toujours plus gourmants ne va pas dans le sens du numérique responsable.

2 Pour info, le CMJN (Cyan, Magenta, Jaune, Noir) et un format en quadrichromie (CMYK en anglais) est le mode colorimétrique destiné à l’imprimerie. Il permet de reproduire une large palette de couleurs en mélangeant les 3 couleurs primaires : le cyan, le magenta et le jaune. On ajoute le noir à la fin du processus d’impression. La quadrichromie est adaptée à l’impression . Les presses numériques et offset sont composées de 4 rouleaux sur lesquels on règle un taux d’encrage :un pour le cyan, le magenta, le jaune et le noir. Le format CMJN se trouvent surtout sous Pdf, AI, EPS, PSD et TIFF. qui sont en fait des formats

✹ Green digital ✹

Des questions ?

Je me tiens à votre disposition pour vous répondre »

Mathis, Alternant en Green digital