Optimiser les images d’un site web : taille, format, chargement

Un domaine viticole de La Neuveville, au bord du lac de Bienne, a un nouveau site web. En haut, une grande image des vignes dans la lumière d’automne ; en dessous, les vins, chacun avec la photo de sa bouteille, et une galerie de la fête du domaine. Sur l’ordinateur du bureau, tout est beau. Sur le téléphone, dans le train, la page se construit morceau par morceau, et le texte saute vers le bas dès qu’une image a fini de se charger.

Les deux tiennent aux images. Et les deux s’améliorent nettement en quelques étapes, sans que les images soient moins belles.

Pourquoi les images pèsent sur le temps de chargement

Un indicateur répandu du temps de chargement ressenti d’une page est le Largest Contentful Paint (LCP). web.dev, un site d’information de Google consacré au développement web, le décrit ainsi : il mesure le moment où la plus grande image, le plus grand bloc de texte ou la plus grande vidéo de la zone visible est affiché, à compter de l’ouverture de la page. Une valeur de 2,5 secondes ou moins est considérée comme bonne.

Sur une page comme celle du domaine, le plus grand élément est une image — celle des vignes. La rapidité avec laquelle cette seule image se charge façonne donc la première impression.

La bonne taille

Le levier le plus important est la taille. Une photo prise avec un appareil actuel mesure plusieurs milliers de pixels de large ; sur un téléphone, elle s’affiche peut-être sur 400 points de large. MDN relève qu’il n’y a aucune raison d’intégrer des images aussi grandes pour un petit écran : cela gaspille de la bande passante, et qui navigue en déplacement ne souhaite pas télécharger une grande image prévue pour un ordinateur quand une petite suffit.

Le calcul est quadratique. web.dev rappelle qu’un écran à densité de pixels double a besoin de quatre fois plus de pixels. À l’inverse, une image de largeur moitié moindre n’a plus qu’un quart des pixels.

Plusieurs versions avec srcset et sizes

Comme les téléphones, les tablettes et les ordinateurs ont besoin de tailles différentes, un site web peut proposer la même image en plusieurs versions. MDN décrit pour cela les attributs srcset et sizes :

• srcset énumère les versions disponibles avec leur largeur en pixels, par exemple l’une de 480 et l’autre de 800 pixels de large.
• sizes indique au navigateur la largeur à laquelle l’image s’affiche selon la taille de l’écran.

Le navigateur choisit alors lui-même la version adaptée. Pour les écrans à haute densité de pixels, on peut en outre indiquer des versions en résolution double. Certains outils de création de sites et programmes pour sites web produisent automatiquement ces versions — il vaut la peine de vérifier si c’est le cas.

Le format

Pour les images matricielles sur le web, MDN recommande en premier lieu WebP ou AVIF, avec une solution de repli en JPEG ou en PNG pour les navigateurs qui ne connaissent pas ces formats. À titre indicatif, MDN précise que les images WebP avec perte sont en moyenne 25 à 35 pour cent plus légères que des images JPEG de qualité comparable. Quel format convient à quelle image, c’est ce que décrit l’article Quel format d’image pour quoi.

Indiquer largeur et hauteur

Le texte qui saute a une cause propre : tant qu’une image n’est pas chargée, le navigateur ne sait pas quelle place elle occupe. Quand elle arrive, elle repousse le reste de la page vers le bas.

MDN décrit la solution : si la largeur et la hauteur de l’image sont indiquées dans le HTML, le navigateur peut calculer les proportions avant que l’image soit chargée et réserver la place nécessaire. Cela réduit ou empêche le décalage — selon MDN, un élément important d’une bonne expérience utilisateur.

Chargement différé

La galerie de la fête du domaine se trouve tout en bas de la page. Qui veut seulement voir les vins n’a pas besoin de ces images. Avec l’attribut loading="lazy", le navigateur diffère le chargement d’une image jusqu’à ce qu’elle approche de la zone visible. MDN explique qu’ainsi, le réseau et la mémoire ne sont pas sollicités pour des images avant qu’il soit raisonnablement sûr qu’elles seront nécessaires.

Pour la grande image tout en haut, en revanche, différer n’apporte pas grand-chose : elle est de toute façon visible à l’ouverture et doit apparaître le plus vite possible. MDN souligne en outre que la largeur et la hauteur sont particulièrement importantes pour les images chargées en différé.

Textes alternatifs

Optimiser, c’est aussi rendre les images accessibles à toutes et à tous. Selon MDN, l’attribut alt contient un texte qui peut remplacer l’image — les lecteurs d’écran le lisent à voix haute, et il s’affiche quand une image ne peut pas être chargée. Un texte alternatif vide signale une image purement décorative. Pour les photos de bouteilles du domaine, une courte phrase comme « Bouteille de Chasselas 2025 du lac de Bienne » suffit.

Les images d’arrière-plan comptent aussi

Toutes les images ne figurent pas comme img dans le HTML. Certains sites placent de grandes images en arrière-plan au moyen de CSS, par exemple derrière un titre. web.dev range aussi ces images d’arrière-plan parmi les éléments pris en compte pour le Largest Contentful Paint. Les mêmes règles s’y appliquent : bonne taille, bon format. Seules la largeur et la hauteur ne peuvent pas y être indiquées par des attributs — la place est définie par la mise en page.

Mesurer plutôt que deviner

Une mesure montre si les changements font effet. web.dev recommande d’observer le Largest Contentful Paint au 75e centile des chargements de page, séparément pour les appareils mobiles et les ordinateurs — autrement dit, de sorte que trois chargements sur quatre atteignent la valeur. Les outils de développement des navigateurs montrent en outre, pour chaque page, quelles images sont chargées, quelle est leur taille et combien de temps cela prend. Un coup d’œil avant et après l’optimisation rend l’effet visible.

Métadonnées et lieu de prise de vue

Les photos d’appareils et de téléphones contiennent souvent des métadonnées, parfois aussi le lieu exact de la prise de vue. Sur un site web, elles sont superflues et alourdissent le fichier. Pour des photos prises dans son propre logement, elles révèlent en outre l’adresse. On peut les retirer au moment de réduire les images.

Pour le domaine viticole au bord du lac de Bienne

Le domaine passe ses images en revue une fois : l’image des vignes est produite en trois largeurs et proposée via srcset, en WebP avec repli en JPEG. Toutes les images reçoivent une largeur, une hauteur et un texte alternatif, la galerie est chargée en différé, et les métadonnées sont retirées. Sur le téléphone, dans le train, le texte reste désormais en place pendant que les images se chargent.

Les outils image que nous développons réduiront et compresseront les images, les convertiront entre JPG, PNG, WebP et HEIC et en retireront les métadonnées — traitées en Suisse, en mémoire, sans qu’aucune image ne reste enregistrée, et en mode confidentiel entièrement sur votre propre appareil.