Comment réduire la taille des images sans perte de qualité
Le Robot /image/optimize, que nous affectionnons, et le Robot /image/resize sont nos outils les plus puissants pour lutter contre les fichiers trop volumineux et les longs temps d’exécution. Aujourd’hui, nous allons examiner des chiffres réels pour voir précisément dans quelle mesure ces Robots peuvent réduire la taille de vos fichiers.
Méthode
Pour collecter les données de ce billet, j’ai écrit un petit script Python qui crée une Assembly afin d’optimiser plusieurs images de test différentes, en modifiant un seul paramètre à chaque itération. Ainsi, chaque Assembly est isolée des précédentes, ce qui nous donne des résultats plus fiables. Chaque type de fichier testé dispose en outre d’au moins deux images de test.
Vous trouverez le code du script ici sur GitHub.
Deux Templates ont été utilisés pour tester chaque Robot individuellement. Isoler chaque Robot est important pour garantir que nos données reflètent uniquement l’impact de ce Robot précis. Les deux Templates sont présentés ci-dessous.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"optimize": {
"use": ":original",
"robot": "/image/optimize",
"preserve_meta_data": false,
"priority": "conversion-speed"
}
}
}
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"quality": {
"use": ":original",
"robot": "/image/resize",
"result": true,
"quality": 20,
"imagemagick_stack": "v3.0.1"
}
}
}
Nous devons également définir une métrique pour mesurer la réduction globale de la taille des fichiers : le % de différence de taille. Il s’agit de l’écart en pourcentage entre la taille du fichier d’entrée et celle du fichier de sortie. Voici la formule que nous utilisons pour le calculer :
Examinons maintenant quelques données.
Priorité
Le premier paramètre que nous allons examiner est le paramètre priority. Nous avons le choix entre deux
algorithmes différents, compression-ratio et conversion-speed, selon que nous préférons un taux de
compression légèrement inférieur, d’environ 18 %, pour des temps d’exécution plus courts, ou un taux
de compression plus élevé, d’environ 31 %, pour une taille de fichier minimale.
Priorité compression-ratio
Comme vous pouvez le voir ci-dessous, la priorité compression-ratio entraîne généralement une réduction de
taille de fichier plus importante que la priorité conversion-speed.
Toutefois, si vous choisissez de ne pas conserver les métadonnées du fichier, les deux priorités utiliseront le même algorithme de compression, ce qui explique pourquoi la réduction de taille est identique pour les deux priorités.
Priorité conversion-speed
La priorité conversion-speed, comme son nom l’indique, aide à lutter contre les longs temps d’exécution.
Comme le montre le graphique ci-dessous, sur les quelque cinquante Assemblies exécutées, le
temps d’exécution global a été réduit en moyenne d’une seconde avec la priorité conversion-speed.
Format d’entrée
Bien entendu, l’ampleur de nos optimisations est limitée par le type de fichier. Voyons quels types de fichiers vous permettent d’espérer les gains les plus importants.
Différence de taille
Comme le montre clairement le graphique ci-dessous, les fichiers .webp affichent une réduction moyenne de taille nettement plus importante, tandis que les fichiers .jpg ne montrent presque aucune réduction. L’écart entre .gif, .png, .svg et .jpg est également faible, si bien que les résultats peuvent varier davantage selon les fichiers que vous choisissez d’utiliser.
Temps d’exécution
En matière de temps d’exécution, .gif l’emporte clairement, suivi de près par .webp. Cependant, le résultat le plus surprenant est peut-être le temps de traitement nettement plus long des fichiers .svg et .png, peut-être parce que ces deux formats utilisent une compression sans perte.
Essayez le même processus d’optimisation avec notre compresseur GIF (English) interactif.
Qualité
Taille de fichier
L’un des meilleurs moyens de réduire la taille d’un fichier consiste à baisser la qualité avec le Robot /image/resize. Comme vous pouvez le voir sur le graphique ci-dessous, une qualité de 75 ou moins entraîne des réductions de taille significatives. En revanche, des valeurs de qualité supérieures à 75 font en réalité augmenter la taille du fichier.
Réduire la qualité améliore également le temps d’exécution global d’une Assembly. Dans ce cas, les différences sont plus linéaires.
Qualité d’image
Alors, quel impact la qualité a-t-elle réellement sur l’apparence d’une image ?
Voici la même image avec quatre niveaux de qualité différents. Aux niveaux de qualité inférieurs, le nombre de couleurs diminue, ce qui produit les bandes de couleur visibles ci-dessous.
Il s’agit toutefois d’une image assez grande, avec beaucoup de couleurs différentes. Avec des images plus simples, comme le logo Transloadit, la différence de qualité est pratiquement invisible.
Cette image ne comporte que deux couleurs, ce qui signifie que vous pouvez baisser la valeur de qualité sans voir aucune différence.
Bien sûr, le mieux est de faire vous-même quelques petites expériences pour trouver une valeur de qualité offrant un bon compromis entre taille de fichier et qualité d’image.
Conclusions
Après toutes ces informations, prenons le temps de les passer en revue pour voir comment elles peuvent vous être utiles dès maintenant.
Le point le plus important à retenir est peut-être l’utilisation du format .webp. Que vous cherchiez à réduire les temps d’exécution ou la taille des fichiers, vous en tirerez un avantage. Vous pouvez comparer le résultat avec nos convertisseurs interactifs PNG vers WebP (English) et JPG vers WebP (English). Combiner ce format avec une qualité légèrement réduite dans un seul Step utilisant /image/resize donnera probablement les meilleurs résultats.
Autre point important : choisir la bonne valeur pour le paramètre priority selon votre cas d’usage.
Pour ma part, je choisirais l’algorithme compression-ratio, compte tenu de l’ampleur que peut atteindre la
réduction de taille. Mais encore une fois, n’hésitez pas à l’essayer vous-même.
Enfin, j’espère que ce billet vous aura donné envie de vous lancer dans une série d’optimisations de vos Templates, et qu’il constituera un bon tremplin pour bien démarrer. Nous serons ravis de vous accompagner dans la mesure du possible : n’hésitez donc pas à nous contacter via le support ou sur Twitter.