Les images représentent souvent la plupart des octets téléchargés sur une page Web et occupent également une part importante d'espace visuel. Par conséquent, l'optimisation des images permet souvent de réaliser les économies d'octets et les améliorations de performances les plus importantes pour votre site Web : moins le navigateur doit télécharger d'octets, moins la concurrence est forte pour la bande passante du client, et plus le navigateur peut télécharger et afficher rapidement le contenu utile à l'écran.
L'optimisation d'image est à la fois un art et une science : un art, car il n'existe pas de réponse définitive quant à la meilleure façon de compresser une image, et une science, car il existe de nombreux algorithmes et techniques bien développés permettant de réduire considérablement la taille d'une image. Pour trouver les paramètres optimaux pour votre image, vous devez effectuer une analyse minutieuse selon de nombreuses dimensions : capacités des formats, contenu des données encodées, qualité, dimensions en pixels, etc.
Optimiser les images vectorielles
Tous les navigateurs récents sont compatibles avec le format SVG (Scalable Vector Graphics), un format d'image basé sur XML pour les graphiques en deux dimensions. Vous pouvez intégrer le balisage SVG directement sur la page ou en tant que ressource externe. La plupart des logiciels de dessin vectoriel peuvent créer des fichiers SVG, ou vous pouvez les écrire à la main directement dans votre éditeur de texte préféré.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
</g>
</g>
</svg>
L'exemple ci-dessus affiche la forme circulaire simple ci-dessous avec un contour noir et un arrière-plan rouge. Il a été exporté depuis Adobe Illustrator.
<?xml version="1.0"coding="utf-8"?>
Comme vous pouvez le constater, elle contient de nombreuses métadonnées, telles que des informations sur les calques, des commentaires et des espaces de noms XML, qui sont souvent inutiles pour afficher l'élément dans le navigateur. Par conséquent, il est toujours judicieux de réduire la taille de vos fichiers SVG à l'aide d'un outil tel que SVGO.
Le SVGO réduit de 58 % la taille du fichier SVG généré par Illustrator, qui passe de 470 à 199 octets.
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>
Le format SVG étant un format XML, vous pouvez également appliquer une compression GZIP pour réduire la taille de transfert. Assurez-vous que votre serveur est configuré pour compresser les éléments SVG.
Une image matricielle est simplement une grille à deux dimensions de "pixels" individuels. Par exemple, une image de 100 x 100 pixels correspond à une séquence de 10 000 pixels. À son tour, chaque pixel stocke les valeurs "RVBA" : (R) canal rouge, (G) canal vert, (B) canal bleu et (A) canal alpha (transparence).
En interne, le navigateur alloue 256 valeurs (nuances) à chaque canal, soit 8 bits par canal (2 ^ 8 = 256) et 4 octets par pixel (4 canaux x 8 bits = 32 bits = 4 octets). Par conséquent, si nous connaissons les dimensions de la grille, nous pouvons facilement calculer la taille du fichier:
- Une image de 100 x 100 pixels est composée de 10 000 pixels.
- 10 000 pixels x 4 octets = 40 000 octets
- 40 000 octets / 1 024 = 39 Ko
| Dimensions | Pixels | Taille du fichier |
|---|---|---|
| 100 x 100 | 10 000 | 39 Ko |
| 200 x 200 | 40 000 | 156 Ko |
| 300 x 300 | 90 000 | 351 Ko |
| 500 x 500 | 250 000 | 977 Ko |
| 800 x 800 | 640 000 | 2 500 Ko |
39 Ko pour une image de 100 x 100 pixels n'est peut-être pas un problème, mais la taille du fichier explose rapidement pour les images plus grandes, et le téléchargement des composants Image est à la fois lent et coûteux. Pour l'instant, cet article ne se concentrait que sur le format d'image "non compressé". Heureusement, il est possible de réduire la taille du fichier image.
Une stratégie simple consiste à réduire la "profondeur de bits" de l'image de 8 bits par canal à une palette de couleurs plus petite : 8 bits par canal nous donnent 256 valeurs par canal et 16 777 216 (256 ^ 3) couleurs au total. Que se passe-t-il si vous réduisez la palette à 256 couleurs ? Vous n'auriez alors besoin que de 8 bits au total pour les canaux RVB et économiserez immédiatement deux octets par pixel, soit 50% de réduction de la compression par rapport au format d'origine de 4 octets par pixel !
Les scènes complexes avec des transitions de couleurs progressives (par exemple, les dégradés ou le ciel) nécessitent des palettes de couleurs plus grandes pour éviter les artefacts visuels tels que le ciel pixélisé dans l'élément 5 bits. En revanche, si l'image n'utilise que quelques couleurs, une grande palette ne fait que gaspiller des bits précieux.
Ensuite, une fois que vous avez optimisé les données stockées dans des pixels individuels, vous pouvez être plus intelligent et examiner les pixels à proximité : il s'avère que de nombreuses images, et en particulier les photos, ont de nombreux pixels proches de couleurs similaires (le ciel, les textures répétitives, etc.). Grâce à ces informations, le compresseur peut appliquer l'encodage delta. Au lieu de stocker les valeurs individuelles pour chaque pixel, vous pouvez stocker la différence entre les pixels proches : si les pixels adjacents sont identiques, le delta est égal à zéro et vous n'avez besoin de stocker qu'un seul bit. Mais pourquoi s'arrêter là...
L'œil humain a différents niveaux de sensibilité aux différentes couleurs : vous pouvez optimiser votre encodage couleur pour tenir compte de cela en réduisant ou en augmentant la palette de ces couleurs. Les pixels "À proximité" forment une grille à deux dimensions. Cela signifie que chaque pixel a plusieurs voisins : vous pouvez utiliser cette information pour améliorer davantage l'encodage delta. Au lieu de consulter uniquement les voisins immédiats pour chaque pixel, vous pouvez examiner de plus grands blocs de pixels proches et encoder différents blocs avec des paramètres différents.
Comme vous pouvez le constater, l'optimisation d'image devient rapidement compliquée (ou amusante, selon votre point de vue), et constitue un domaine actif de la recherche universitaire et commerciale. Les images occupent beaucoup d'octets, et le développement de meilleures techniques de compression d'image peut s'avérer très utile. Si vous souhaitez en savoir plus, consultez la page Wikipédia ou consultez le livre blanc sur les techniques de compression WebP pour obtenir un exemple pratique.
Encore une fois, c'est très bien, mais aussi très théorique : en quoi cela vous aide-t-il à optimiser les images sur votre site ? Il est important de comprendre la forme du problème: pixels RVBA, profondeur de bits et diverses techniques d'optimisation. Tous ces concepts sont essentiels à comprendre et à garder à l'esprit avant de vous plonger dans les discussions sur les différents formats d'images matricielles.
Compression d'images sans perte ou avec pertes
Pour certains types de données, tels que le code source d'une page ou un fichier exécutable, il est essentiel qu'un compresseur ne modifie pas les informations d'origine et ne les perde pas : une seule donnée manquante ou incorrecte pourrait complètement changer la signification du contenu du fichier ou, pire, l'endommager complètement. Pour certains autres types de données, tels que les images, l'audio et la vidéo, il peut être tout à fait acceptable de fournir une représentation "approximative" des données d'origine.
En fait, en raison du fonctionnement de l'œil, nous pouvons souvent éviter de supprimer certaines informations sur chaque pixel afin de réduire la taille du fichier d'une image. Par exemple, nos yeux ont une sensibilité différente aux différentes couleurs, ce qui signifie que nous pouvons utiliser moins de bits pour encoder certaines couleurs. Par conséquent, un pipeline d'optimisation d'images classique comprend deux grandes étapes:
- L'image est traitée avec un filtre avec perte qui élimine certaines données de pixels.
- L'image est traitée avec un filtre sans perte qui compresse les données de pixels.
La première étape est facultative. L'algorithme exact dépend du format d'image en question, mais il est important de comprendre que toute image peut faire l'objet d'une étape de compression avec pertes afin de réduire sa taille. En fait, la différence entre les différents formats d'image, tels que GIF, PNG et JPEG, réside dans la combinaison des algorithmes spécifiques qu'ils utilisent (ou omettent) lors de l'application des étapes avec et sans perte.
Quelle est la configuration "optimale" de l'optimisation avec et sans pertes ? La réponse dépend du contenu de l'image et de vos propres critères, tels que le compromis entre la taille du fichier et les artefacts introduit par la compression avec pertes : dans certains cas, vous pouvez ignorer l'optimisation avec pertes pour communiquer des détails complexes de manière très fidèle. Dans d'autres cas, vous pouvez appliquer une optimisation avec pertes agressive pour réduire la taille du fichier du composant Image. C'est là que votre propre jugement et votre propre contexte doivent entrer en jeu : il n'y a pas de cadre universel.
Par exemple, lorsque vous utilisez un format avec pertes tel que JPEG, le compresseur affiche généralement un paramètre de "qualité" personnalisable (par exemple, le curseur de qualité fourni par la fonctionnalité "Enregistrer pour le Web" d'Adobe Photoshop), qui est généralement un nombre compris entre 1 et 100 qui contrôle le fonctionnement interne de la collection spécifique d'algorithmes avec perte et sans perte. Pour de meilleurs résultats, testez différents paramètres de qualité pour vos images et n'ayez pas peur d'en réduire la qualité. Les résultats visuels sont souvent très bons et les économies de taille de fichier peuvent être importantes.
Effets de la compression d'images sur les métriques Core Web Vitals
Étant donné que les images se prêtent souvent au Largest Contentful Paint, réduire la durée de chargement des ressources d'une image peut se traduire par un meilleur LCP dans l'atelier et sur le terrain.
Lorsque vous utilisez les paramètres de compression sur des images matricielles, pensez à tester les formats WebP et AVIF pour voir si vous pouvez diffuser la même image avec un encombrement minimal par rapport aux formats plus anciens.
Veillez cependant à ne pas surcompresser les images matricielles. Une bonne solution consiste à utiliser un CDN d'optimisation d'image pour trouver les meilleurs paramètres de compression. Toutefois, une autre solution peut être d'utiliser des outils comme Butteraugli pour estimer les différences visuelles afin de ne pas encoder les images trop de manière agressive et de ne pas perdre trop de qualité.
Checklist pour l'optimisation des images
Voici quelques conseils et techniques à garder à l'esprit lorsque vous travaillez à l'optimisation de vos images:
- Préférez les formats vectoriels:les images vectorielles sont indépendantes de la résolution et de l'échelle. Elles sont donc parfaitement adaptées au monde multi-appareil et haute résolution.
- Réduisez et compressez vos éléments SVG:le balisage XML produit par la plupart des applications de dessin contient souvent des métadonnées inutiles qui peuvent être supprimées. Assurez-vous que vos serveurs sont configurés pour appliquer une compression GZIP aux éléments SVG.
- Privilégiez WebP ou AVIF aux formats matriciels plus anciens: les images WebP et AVIF sont généralement beaucoup plus petites que les anciens formats d'image.
- Choisissez le meilleur format d'image matricielle:déterminez vos exigences fonctionnelles et choisissez le format adapté à chaque élément.
- Testez des paramètres de qualité optimaux pour les formats matriciels:n'ayez pas peur de réduire les paramètres de "qualité". Les résultats sont souvent très bons et les économies d'octets sont considérables.
- Supprimez les métadonnées d'image inutiles : de nombreuses images matricielles contiennent des métadonnées inutiles à propos de l'élément (informations géographiques, informations sur l'appareil photo, etc.). Utilisez les outils appropriés pour supprimer ces données.
- Diffusez des images mises à l'échelle:redimensionnez les images et assurez-vous que la taille "d'affichage" est aussi proche que possible de la taille "naturelle" de l'image. Portez une attention particulière aux grandes images, car elles représentent une surcharge plus importante lorsqu'elles sont redimensionnées.
- Automatisation, automatisation, automatisation:investissez dans des outils et une infrastructure automatisés pour vous assurer que tous vos composants Image sont toujours optimisés.