Bien gérer ses images

1. L’impact des images :

Les images représentent 44% du poids d’une page web en 2022.

2. Les questions à se poser :

• Avez-vous besoin de cette image ?

Est-ce que l’image portera un message particulier ? Une explication, une justification ou bien est-ce un moyen de rendre la lecture plus aisée et fluide ?

Pouvez-vous faire autrement qu’en utilisant une image ?

• Quel meilleur format d’image fera passer mon message ?

Les photos sont les images les plus lourdes et consommatrices à l’affichage.

Vous pouvez envisager d’autres formats peut-être plus adaptés comme des icônes ou illustrations (dessins) qui stockent moins de données.

• Quelle est la taille suffisante pour être lisible ?

Y a-t-il des inscriptions qui doivent être lisibles et nécessitent une bonne qualité ou taille d’image importante ?

Y a-t-il besoin de zoomer dans cette image ?

3. Optimiser mes images :

Pour optimiser vos images, vous devez passer par 2 étapes :

3.1 1 - Choisir l'extension appropriée :

Pour les photos : WebP, PNG ou JPEG (selon l'usage)

3 extensions sont possibles pour les photos (prise par un appareil photo, à différencier d'une illustration qui est dessinée) :

- JPEG a été conçu pour les photographies. Il peut contenir des millions de couleurs. La taille du fichier est relativement petite. Il est pris en charge sur de nombreux navigateurs. Cependant, le JPEG est mauvais pour les images à contraste élevé (les textes au format JPEG ont tendance à être flous).

- PNG est très utile pour son algorithme de compression sans perte cependant cela génère des tailles de fichier plus importantes. Il gère très bien la transparence, les dégradés et assure une bonne lecture de l'image.

- WebP est un format open source. Il est très bon en optimisation, taille plus compacte (notamment son niveau 2 WebP Lossless). Cependant, il n'est encore pris en charge par tous les navigateurs.

Finalement, nous vous conseillons de vérifier les extensions supportées par les navigateurs de vos utilisateurs (sur ce site : https://caniuse.com/?search=webp).

Si votre contexte de connexion le permet, utilisez le format WebP par défaut. 

Sinon faites le choix du PNG ou du JPEG en fonction de l'usage :

- PNG s'il y a besoin de transparence, dégradés, contraste élevé ou le déchiffrage d'écriture

- JPEG pour les autres.

Pour les icônes : glyphes

Les glyphes sont des tracés inclus dans les polices de caractères du système d’exploitation. Il s'agit en fait des polices/fonts spéciales qui peuvent contenir une grande quantité d’images différentes (chaque image étant un caractère). Celles-ci sont chargées en une seule fois sur un site. C'est donc plus économique à partir du moment où une icône est chargée sur plusieurs pages.

Si vous avez la possibilité d'ajouter une police de caractères différente (et de l'utiliser) sur votre plateforme, vous pouvez la créer sur le site web suivant en ajoutant toutes les icônes concernées au format SVG :

https://icomoon.io/app/#/select

Pour le design : CSS

Lorsque vous devez réaliser un design particulier (par exemple l'encadré d'un texte) et dans les cas où la plateforme utilisée le permet, nous vous recommandons d'utiliser les propriétés CSS3 à la place d’images.

En effet, le poids d’une feuille de styles est bien plus faible, surtout si elle est compressée. L’appel d’une feuille de styles ne génère qu’une seule requête HTTP, contre un grand nombre si l’on emploie beaucoup d’images (une requête HTTP pour chaque image).

Pour tout le reste : SVG

Pour tout ce qui n’est pas glyphes, CSS ou photo, utiliser une image vectorielle de type SVG.

En informatique, une image vectorielle est une image numérique composée de plusieurs objets géométriques individuels (droites, polygones, arcs de cercle).

L’image vectorielle est créée à partir d’équations mathématiques. Chaque forme dépend de plusieurs paramètres (hauteur, largeur, rayon) donnés à des vecteurs.

L’image vectorielle est souvent opposée à l’image matricielle ou “bitmap” qui est un assemblage de points numériques, appelés pixels généralement de formes rectangulaires.

Lorsque ces points deviennent visibles sur l’image et la déforment, on parle alors de pixélisation.

Grâce à cette bonne pratique, l’interface est indépendante de la résolution de l’écran.

3.2 2 - Redimensionnement :

C’est-à-dire réduire la taille originale tout en gardant les proportions (et sans rogner l'image).

Par exemple, passer de 6720x4480 pixels à 800x533pixels qui sont largement suffisants pour de l'affichage web.

Cette étape devrait être faite avant chargement sur une plateforme pour éviter d'avoir des sauvegardes de la version la plus grande (ce qui est souvent le cas lorsqu'il est proposé un redimensionnement ou différents choix de taille d'image par le système).

Pour redimensionner votre image, vous devez savoir quelle est la taille attendue sur l'emplacement où vous souhaitez la mettre (par ex : 800px de largeur pour une image plein écran).

Le redimensionnement d'une image peut se faire dans n'importe quel outil graphique (depuis Paint jusqu'à Illustrator).

3.3 3 - Compression :

Pour les photos (de type WebP, PNG ou JPEG) : 

La compression pour les images est une perte de qualité. Le taux de compression doit donc dépendre de l'utilisation que vous souhaitez faire de cette image (cf. 3e question à se poser).

Vous trouverez de nombreux sites web gratuits ou payants pour compresser vos images en ligne, par exemple :

https://imagecompressor.com/

https://shortpixel.com/

https://tinypng.com/

(Faites toujours attention à la confidentialité de celles-ci avant de les charger sur ces sites)

et une solution en locale avec installation sur Windows (cela évite les impacts de bande passante au chargement de l'image) :

RIOT : https://riot-optimizer.com/ 

Pour les images vectorielles (de type SVG) :

La plupart des images SVG contiennent de nombreuses métadonnées qui ont été nécessaires à leur création. C’est par exemple le cas des informations de couche (layer), des commentaires, etc., qui sont indispensables pour éditer l’image, mais inutiles pour l’afficher.

D’où l’idée de les supprimer pour réduire le poids des fichiers. Contrairement aux photos, il ne s'agit pas d'une dégradation linéaire de la qualité.

Le taux de compression via gzip varie selon la complexité de l’image. Mais il est toujours élevé, car il s’agit de compresser du texte (le code du SVG) : en général, on atteint des ratios de l’ordre de 75 % à 80 %.

Vous trouverez également de nombreux sites web pour les SVG, voici nos préférés : 

https://jakearchibald.github.io/svgomg/ (très utile pour avoir une compression fine et choisir le niveau de détails ou quelles données à enlever).

https://compressor.io/  

3.4 4 - Accessibilité :

Le texte inclus directement dans les images n’est pas accessible : il ne peut pas être lu par les lecteurs d’écran (utilisé entre autres par les personnes malvoyantes, celles ayant des troubles de la concentration ou des difficultés de lecture). Il est donc important de ne pas inclure de texte important dans les images. 

La description alt-text est une description de l'image inscrite dans le code du site. Elle est lue par le lecteur d'écran. Elle est aussi affichée lorsque la connexion est lente et ne permet pas de charger les images. La description alt-text est une obligation du RGAA.

La description doit contenir l’objet, l’action, et le contexte de la photo, par exemple “Pancarte Black Lives Matter dans une foule.”

Google utilise l’attribut Alt pour référencer les sites.

4. D’autres alternatives :

4.1 Laisser une place limitée aux images dans le design

Effectivement, là où l'on peut éviter une grande partie de l'impact c'est en éco-concevant !  

En choisissant un design plus épuré, axé sur des illustrations au lieu de photos, des tailles d'images plus petites par exemple, vous réalisez des choix de conception plus sobres pour notre planète.

4.2 Effet old school / vintage

Les effets "old school" sur des photos d'une qualité très basse les rendent à la fois lisibles tout en donnant un style particulier à vos pages. Si c'est adapté à votre charte graphique, n'hésitez pas à jouer à fond le jeu du low-tech.

Voici un site pour tester les effets sur vos photos : https://ditherit.com/

4.3 Ruser pour charger l'image uniquement si besoin

Vous estimez que toutes les images n'ont pas besoin d'être affichées à toutes les personnes visitant la page web ? Une astuce utilisée par la marque Organic Basics sur leur site Low Impact mérite d'être prise pour inspiration : afficher une photo que sur clic sur une illustration très basse qualité.

C'est un moyen innovant de laisser la possibilité à leurs client·e·s d'afficher de belles photos de shooting de leurs produits, uniquement pour les produits pour lesquel·le·s ils et etlles sont intéressé·e·s.

4.4 Chargement paresseux (lazy load)

C'est une technique qui consiste à ne charger une image que lorsque son emplacement devient visible à l'écran. Ainsi, toutes les images ne sont pas chargées en même temps que la page. Cela a un intérêt en termes de performance de chargement ainsi que pour éviter le transfert de données inutiles si l'utilisateur quitte la page avant d'avoir scroller jusqu'en bas. 

Selon les solutions techniques, l'attribut HTML "loading=lazy" est intégré par défaut, par option/plugin ou doit être ajouté techniquement.

4.5 Fournir des "Responsive images"

Le concept de “Responsive images” permet de fournir une sélection de formats et de tailles d'images au navigateur afin que celui-ci puisse choisir lui-même laquelle charger en fonction du terminal utilisé ou de la vitesse de connexion.

Ainsi, il est recommandé après avoir correctement compressé son image, de la stocker sur le serveur du site en plusieurs résolutions : à minima une pour Desktop et une pour Mobile. Cela est possible plus ou moins directement selon les plateformes utilisées.

Le résultat : 

- Économie de transfert de données : Éviter de charger sur un mobile de 375px de largeur, une image de 1600px qui est inutilement lourde

- Économie d'électricité consommée au niveau du serveur : Éviter également au navigateur d'avoir à redimensionner dynamiquement l'image pour le terminal d'affichage, ce qui nécessite de la puissance de calcul du serveur.