Niveau
Vitesse
Publié le 22/12/2020, mis à jour le 28/01/2021 ▷ 05:24
format, compression, colorimétrie, dimensions, affichage, résolution d'écran, css, ressources ; autant de paramètres et de techniques pas toujours faciles à maîtriser.
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.
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.
Voici les 3 principaux formats de compression d'images utilisés actuellement, chacun possédant ses caractéristiques, ses avantages et ses défauts :
Vous trouverez également d'autres formats possibles de compression : Jpeg 2000, Jpeg XR, WebP... À étudier pour les plus passionnés.
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 :
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 :
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
Pour retravailler ses images, pas la peine d'utiliser Adobe, choisissez plutôt GIMP, c'est un Open Source.
Par Mathis Prévost | Alternant Green digital