Étude : écologie et images sur le web
5 types d'image au banc d'essai, exportés dans divers formats et compressions. Les visuels sont en définition Full HD. Objectifs : trouver le meilleur ratio qualité / poids. Pas de chichi, preuve à l’appui.
Poids d'une image et empreinte carbone
Le poids d’une image, en octets, kilooctets ou mégaoctets, a un impact direct sur la vitesse de chargement et la consommation d’énergie des appareils. Plus le fichier est lourd, plus il nécessite de bande passante et de puissance pour être affiché, ce qui se répercute sur les serveurs, les réseaux et les appareils des utilisateurs. Une image inutilement lourde alourdit les pages web et ralentit le chargement tout en augmentant la consommation d’énergie et donc les émissions carbones.
Un visuel bien optimisé pour le web peut peser des dizaines de fois moins lourd que son équivalent non optimisé améliorant concomitamment :
- l’expérience utilisateur (ca va plus vite)
- et l’impact environnemental de la navigation sur Internet (ca bouffe moins de ressources et ca pollue moins).
- le meilleur format,
- la meilleur compression,
- pour une qualité perçue de très bonne à parfaite.
1. logo MONOCHROME
Certains n’apprendront rien, mais pour vos logos, icones, illustration de faible complexité avec très peu de couleurs, le format le plus performant est le .svg pour le web, et le .pdf pour le print.
De fait, il faudrait avoir conçu vos création en vectoriel, sinon le format de sortie vectoriel n’aura aucun sens.
Redimensionnable à l’infini sans perte de qualité, le .svg offre une légèreté de fichier optimale pour le web. Ce dernier est particulièrement adapté pour des logos avec des formes géométriques et des couleurs uniformes en faible nombre. Et en bonus, pour les codeurs, avec un peu de code CSS, les couleurs sont adaptables !
- .svg
- 5 Ko
- Qualité perçue : parfaite
- .pdf
- 8 Ko
- 1,6 x plus lourd que le fichier le plus léger
- Qualité perçue : parfaite
- .webp (compression 80 avec perte)
- 10 Ko
- 2 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
- .webp (compression 80)
- 12 Ko
- 2,4 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
- .gif
- 15 Ko
- 3 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
- .png
- 32 Ko
- 6,4 x plus lourd que le fichier le plus léger
- Qualité perçue : parfaite
- .jpg (compression 50)
- 45 Ko
- 9 x plus lourd que le fichier le plus léger
- Qualité perçue : bonne
- .jpg (compression 80)
- 50 Ko
- 10 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
- .jpg (compression 100)
- 77 Ko
- 15,4 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
2. illus flat design
Pour un rendu parfait de vos logos, icones, illustration de faible complexité avec quelques couleurs (9 dans notre essai), le format le plus performant est le .svg pour le web, et le .pdf pour le print. 6-9ko en sortie.
Coté Bitmap, le .png reste le format de prédilection de ce genre d’image (52ko, mais rendu parfait)), suivi de près par le .webp (80% sans perte), qui aura l’avantage de peser 2x moins lourd (26ko pour une perception très bonne de la qualité).
- .svg
- 6 Ko
- Qualité perçue : parfaite
- .pdf
- 9 Ko
- 1,5 x plus lourd que le fichier le plus léger
- Qualité perçue : parfaite
- .webp (compression 80 avec perte)
- 16 Ko
- 2,67 x plus lourd que le fichier le plus léger
- Qualité perçue : moyenne
- .gif
- 22 Ko
- 3,67 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
- .webp (compression 80)
- 26 Ko
- 4,33 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
- .jpg (compression 50)
- 50 Ko
- 8,33 x plus lourd que le fichier le plus léger
- Qualité perçue : moyenne
- .png
- 52 Ko
- 8,67 x plus lourd que le fichier le plus léger
- Qualité perçue : parfaite
- .jpg (compression 80)
- 58 Ko
- 9,67 x plus lourd que le fichier le plus léger
- Qualité perçue : bonne
- .jpg (compression 100)
- 110 Ko
- 18,33 x plus lourd que le fichier le plus léger
- Qualité perçue : bonne
3. long texte / illus monochrome
Pour vos illustrations complexes avec peu de couleurs, ou pour vos images contenant beaucoup de texte, le format le plus performant est le .pdf (polices non vectorisées) mais non adapté au web. Généralement, pour vos textes, évitez les images (cela va un peu de soit …). Pour vos illustrations monochromes ou vos longs textes, privilégiez le .webp !
Vectorisation des textes et poids d’un fichier
Lorsque vous vectorisez du texte, ce sont des dizaines de milliers de petites formes géométriques et formules mathématiques qui sont stockées dans le fichier. Les formats .svg et .pdf, idéaux pour des formes simples deviennent médiocre dans le cas de formes complexes. Ils pèsent entre 46 à 82 fois plus lourd, avec 782ko et 1399ko.
On préférera toujours un bitmap dans ce cas. Le .webp va optimiser le stockage des éléments par couleur (ici, 2 couleurs) et référencer chaque pixel. Le visuel ne pèse que 83 ko dans ce cas.
- .pdf (polices non vectorisées)
- 17 Ko
- Qualité perçue : parfaite
- .webp (compression 80)
- 83 Ko
- 4,88 x plus lourd que le fichier le plus léger
- Qualité perçue : parfaite
- .pdf
- 782 Ko
- 46 x plus lourd que le fichier le plus léger
- Qualité perçue : parfaite
- .svg
- 1399 Ko
- 82,29 x plus lourd que le fichier le plus léger
- Qualité perçue : parfaite
4. photo noir et blanc
Pour vos photographies ou illustrations non vectorielles en noir et blanc, avec beaucoup de détails, c’est le .webp (80%, avec perte) qui l’emporte haut la main avec 50ko en sortie. La perte de qualité est quasi imperceptible.
- .webp (compression 80 avec perte)
- 50 Ko
- Qualité perçue : très bonne
- .jpg (compression 50)
- 76 Ko
- 1,52 x plus lourd que le fichier le plus léger
- Qualité perçue : mauvaise
- .jpg (compression 80)
- 124 Ko
- 2,48 x plus lourd que le fichier le plus léger
- Qualité perçue : bonne
- .webp (compression 80)
- 702 Ko
- 14,04 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
- .jpg (compression 100)
- 784 Ko
- 15,68 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
5. photo couleur / illus complexe
C’est le sujet qui nous intéresse le plus pour le web. Nous avons donc procédé à beaucoup de tests, notamment de compression.
Les formats qui s’en sortent le mieux sont le .webp que l’on peut compresser jusqu’à 60% avec perte en conservant un très bonne perception de la qualité (170ko), et le .jpeg compressé à 80% (346ko). Notez à quel point les format sans perte, tel le .png, pèse bien plus lourd (2818ko) !
- .webp (compression 60 avec perte)
- 170 Ko
- 1 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
- .jpg (compression 50)
- 204 Ko
- 1,2 x plus lourd que le fichier le plus léger
- Qualité perçue : moyenne
- .webp (compression 80 avec perte)
- 261 Ko
- 1,54 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
- .jpg (compression 80)
- 346 Ko
- 2,04 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
- .gif
- 891 Ko
- 5,24 x plus lourd que le fichier le plus léger
- Qualité perçue : très mauvaise
- .jpg (compression 100)
- 1440 Ko
- 8,47 x plus lourd que le fichier le plus léger
- Qualité perçue : parfaite
- .webp (compression 100)
- 1902 Ko
- 11,19 x plus lourd que le fichier le plus léger
- Qualité perçue : parfaite
- .webp (compression 80)
- 1908 Ko
- 11,22 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
- .png (compression 100)
- 2818 Ko
- 16,58 x plus lourd que le fichier le plus léger
- Qualité perçue : parfaite
- .jpg (compression 100 / CMJN)
- 6261 Ko
- 36,83 x plus lourd que le fichier le plus léger
- Qualité perçue : parfaite
la bonne dimension d'affichage pour le bon poids
Une fois objectivé le fait que ces formats (.wepb, .jpg) et ces ratios de compression (60% avec perte, 80%) étaient les meilleurs, nous avons regarder l’impact d’un redimensionnement sur le poids.
Il faut toujours penser “taille max d’affichage”, si bien que si votre visuel sur le web n’est jamais affiché plus grand que 1280, 640 ou 320px de large par exemple, il faudra les exporter aux dimensions utiles tant l’économie en ko est considérable.
Un visuel HD est 1,16x moins lourd que son équivalent Full HD, un visuel 640px de large sera lui 3,54x moins lourd et enfin une vignette de 320px (parfois totalement suffisant pour les smartphones par exemple) pèsera 11,33x moins lourd !
1280×720
- .webp (compression 60 avec perte)
- 146 Ko
- 9,73 x plus lourd que le fichier le plus léger parmi toutes les dimensions
- Qualité perçue : très bonne
- .jpg (compression 80)
- 177 Ko
- 1,21 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
640×360
- .webp (compression 60 avec perte)
- 48 Ko
- 3,2 x plus lourd que le fichier le plus léger parmi toutes les dimensions
- Qualité perçue : très bonne
- .jpg (compression 80)
- 57 Ko
- 1,19 x plus lourd que le fichier le plus léger
- Qualité perçue : très bonne
320×180
- .webp (compression 60 avec perte)
- 15 Ko
- Qualité perçue : très bonne
- .jpg (compression 80)
- 21 Ko
- 1,4 x plus lourd que le fichier le plus léger de cette dimension
- Qualité perçue : très bonne
Pour le web, 2 formats l'emporte sur tous les autres : le .svg pour toutes vos créations vectorielles simples (logo, icones, illustration flat design) et le .webp pour littéralement tout le reste.
À vous de choisir le bon niveau de compression pour vos photographies, mais les formats avec perte, même très compressés (60%) ont un niveau de rendu très suffisant dans l'extrême majorité des cas.
Adoptez cette pratique dans votre flux de travail. Plus vos visuels sont consultés sur des sites web, plus votre effort à les avoir optimiser aura un impact minimisé.
Sources
D’après [V-MM] Le Poids Carbone d’un message David Délis, Collectif Volcan, Mega Magma, 2024.
Sur les mêmes thèmes
David Délis
Hey ! J'aime bien faire des études qui n'intéressent que moi, et parfois, coup de bol, ça intéresse d'autres personnes !