Bonnes pratiques pour images web

Bonjour,

Je parle d'un site bien responsive mais plutôt faiblard côté images.

Les images sont au format jpg, optimisées par photoshop avec 400px de large et hauteur variable (rarement plus de 400 px), en général dans les 20 Ko.

Ces images sont utilisées :
En "grand" format dans leur taille réelle. CSS : width; 400px; height: auto.
En petit format. CSS : width: auto; height: auto; max-width: 100%
En vignette avec déclaration dans le html :
<img src="im/326G.jpg" width="110" height="94" alt="" loading="lazy" />

Le test avec PageSpeed Insights donne quelques pistes :

Diffusez des images aux formats nouvelle génération
Encodez les images de manière efficace
Diffuser des images responsive

J'ai cherché dans les tutos Alsacréations et je n'ai rien trouvé (à mon étonnement).

On trouve en ligne des masses de conseils mais savez-vous quelles documentations / tutos sont les plus fiables ?

Après avoir consulté cette documentation je reviendrai avec des questions plus précises.
Modifié par boteha_2 (25 May 2025 - 19:57)

Hello,

Si tu cherches précisément dans les "tutos d'Alsacréations", tu trouveras des ressources plutôt éparpillées.

Par contre dans nos Guidelines, nous avons une section dédiée aux images : https://github.com/alsacreations/kiwipedia/blob/main/guidelines/html.md#images

Bonjour Raphaël,

Merci pour le lien.

Pour des images de produits, partant d'images .jpg de qualité correcte ou moyenne, conseillez-vous de les ré-enregistrer en .avif ?
Ou est-ce du temps perdu ?

Salut,

Raphael a écrit :

Par contre dans nos Guidelines, nous avons une section dédiée aux images : https://github.com/alsacreations/kiwipedia/blob/main/guidelines/html.md#images

alsacreations a écrit :

SVG
Les imgages au format SVG sont à optimiser via SVGOMG.

Pas mal, cet outil. J'utilise cet outil depuis des lustres :
Scour

salut, images nouvelle génération: faudrait passer au webp

boteha_2 a écrit :
Pour des images de produits, partant d'images .jpg de qualité correcte ou moyenne, conseillez-vous de les ré-enregistrer en .avif ?
Ou est-ce du temps perdu ?

C'est toujours compliqué de répondre à ce genre de questions sans connaître le projet, son envergure et son process.

Mais… Globalement les chiffres te diraient "oui".

Par rapport à une image JPG déjà optimisée :
- WEBP c'est globalement 30% de gain à qualité égale
- AVIF c'est globalement 50% de gain à qualité égale

Par rapport à une image JPG non optimisée :
- JPG optimisé sous MozJPG c'est globalement 50% de gain à qualité égale
- WEBP et AVIF c'est globalement 70% à 90% de gain à qualité égale

Sachant qu'il y a des outils pour optimiser par lot d'images entiers, je pense que ça en vaut la peine, mais encore une fois cela dépend de tes contraintes de projet.
Modifié par Raphael (26 May 2025 - 09:26)

Bonjour,

Raphael a écrit :
Sachant qu'il y a des outils pour optimiser par lot d'images entiers, je pense que ça en vaut la peine, mais encore une fois cela dépend de tes contraintes de projet.

J'essaye d'avoir le meilleur résultat possible donc je vais réenregistrer en AVIF, même s'il y a quelques centaines d'images.

Je pense qu'il va falloir :
1) Légèrement redimensionner la plupart des images.
2) Les repasser en largeur 400px (quand l'image a été redimensionnée)
3) Les réenregistrer en AVIF.

Quel(s) outil(s) conseilles-tu ?

J'ai vu que le *.avif n'est pas encore supporté partout. Je veux dire que les anciennes versions de Edge 120 (octobre 2023), ça ne passerait pas.

boteha_2 a écrit :

1) Légèrement redimensionner la plupart des images.
2) Les repasser en largeur 400px (quand l'image a été redimensionnée)
3) Les réenregistrer en AVIF.

Quel(s) outil(s) conseilles-tu ?

Hello, dans le cas où tu as plusieurs opérations à effectuer sur un lot d'image, les outils en ligne de commande deviennent nécessaires.

Par exemple Sharp qui figure dans le lien que j'avais laissé plus haut : https://github.com/alsacreations/kiwipedia/blob/main/guidelines/html.md#images

PS : comme le dit Niuxe, AVIF n'a pas un support total à ce jour (93.5% selon caniuse). À toi de décider si tu souhaites te contenter de WebP, qui serait déjà un gros progrès.