Blog · Performance

Livrer des images plus légères sans perdre en qualité

Un flux de travail reproductible pour les équipes web : choisissez le bon format, redimensionnez avant de compresser, fixez un objectif de qualité perceptuelle, et automatisez les tâches fastidieuses.

fewer KB · same pixels

Les images sont généralement l'élément le plus lourd d'une page, ce qui en fait aussi le gain de performance le plus simple et le plus important. L'objectif n'est pas « plus petit à tout prix » — c'est le fichier le plus petit qui a toujours l'air correct sur l'écran où il atterrit. Voici un flux de travail qui y arrive sans examiner chaque export à l'œil nu.

Redimensionnez avant de compresser

La plus grosse économie vient généralement des dimensions, pas du codec. Une image hero de 4000px servie dans un emplacement de 800px gaspille environ 96 % de ses pixels avant même que la compression ne commence. Déterminez la taille d'affichage réelle, tenez compte des écrans à haute densité de pixels (2× suffit largement pour la plupart des photos), et réduisez d'abord à cette taille. Compressez une image à la bonne taille et chaque étape suivante a moins de travail à faire.

Choisissez le bon format pour la tâche

Photos : AVIF ou WebP, avec un repli JPEG si vous en avez encore besoin. Interface plate, logos et captures d'écran : PNG sans perte ou WebP. Ne publiez pas un PNG d'une photographie ni un JPEG d'une capture d'écran — les deux sont le mauvais outil et vous coûtent des octets et de la qualité. En cas de doute, encodez des deux façons et gardez le gagnant.

Fixez un objectif de qualité perceptuelle

« Qualité 80 » signifie des choses différentes selon les encodeurs, visez donc un résultat perceptuel plutôt qu'un chiffre magique. Un score SSIMULACRA2 autour de 80–90 est visuellement sans perte pour la plupart des photos ; en dessous d'environ 70, cela commence à se voir sur les dégradés et les peaux. Fixez un plancher, laissez l'encodeur l'atteindre, et vous obtenez une qualité cohérente sur toute une bibliothèque au lieu de tâtonner fichier par fichier.

# Redimensionnez à la taille d'affichage, puis convertissez avec un plancher de qualité
imageforge hero.png --resize 1600 --convert avif --quality 82
imageforge ./gallery/*.jpg --convert webp --quality 80 --recursive

Automatisez-le

Un flux de travail ne tient dans la durée que s'il est ennuyeux à exécuter. Traitez tout un dossier en lot, laissez les originaux intacts, et laissez l'outil indiquer ce qu'il a économisé afin que vous puissiez faire confiance au résultat. L'idée est de faire de « plus léger » le chemin par défaut, pas une corvée manuelle que quelqu'un oublie avant le lancement.

Publiez le fichier le plus petit qui a toujours l'air correct — pas le fichier le plus petit tout court. Cette différence, c'est tout le travail.

Mesurez, ne devinez pas

Bouclez la boucle en vérifiant l'économie réelle et la qualité réelle, pas seulement la taille du fichier. Un fichier 90 % plus petit qui a l'air dégradé n'est pas une victoire ; un fichier 60 % plus petit visuellement identique en est une. Suivez les deux et vous pourrez pousser les réglages en toute confiance au lieu de jouer la prudence.

Faites de « plus léger » votre export par défaut.

Redimensionnez en lot, convertissez et comparez la qualité en une seule passe — entièrement sur votre Mac.

Continuer la lecture