Comparatif : les formats d’illustrations
Manu a réalisé ce comparatif à partir de cette illustration. Elle est suffisamment simple pour intégrer à ses tests le format SVG.
À partir de cette illustration il a généré 4 tailles d’image, dont la largeur est indiquée en pixels sur la colonne de gauche. Il a converti cette même illustration dans les formats SVG, PNG (transparent), JPEG (opaque), WebP (opaque) et WebP (transparent) afin d’en comparer les poids, en Ko.
Il a également appliqué une optimisation à chaque format.
La dernière ligne correspond au poids de ces images sur l’espace serveur, c’est-à-dire la somme des poids de toutes les tailles pour un même format.
Export Figma
| SVG | JPEG (opaque) | PNG (transparent) | WEBP (opaque) | WEBP (transparent) | |
|---|---|---|---|---|---|
| 400px | 71 ko | 75 ko | 25 ko | 8 ko | 9 ko |
| 800px | 71 ko | 183 ko | 53 ko | 17 ko | 20 ko |
| 1200px | 71 ko | 299 ko | 81 ko | 27 ko | 31 ko |
| 1600px | 71 ko | 421 ko | 112 ko | 36 ko | 42 ko |
| Espace serveur | 71 ko | 978 ko | 271 ko | 88 ko | 102 ko |
Après optimisation
| SVG | JPEG (opaque) | PNG (transparent) | WEBP (opaque) | WEBP (transparent) | |
|---|---|---|---|---|---|
| 400px | 37 ko | 14 ko | 10 ko | 8 ko | 9 ko |
| 800px | 37 ko | 37 ko | 20 ko | 17 ko | 20 ko |
| 1200px | 37 ko | 60 ko | 31 ko | 27 ko | 31 ko |
| 1600px | 37 ko | 87 ko | 43 ko | 36 ko | 42 ko |
| Espace serveur | 37 ko | 198 ko | 104 ko | 88 ko | 102 ko |