Les images sont des éléments essentiels pour le design et la communication de chaque site web. 95,3 % des sites web intègrent des images sous une forme ou une autre. Les images font toutefois partie, et de loin, du type de contenu qui influence le plus la taille d’un site web. En comparaison directe, cela se présente à peu près comme suit :
Plus les données d’un site web sont volumineuses, plus le temps de chargement de ces données est long.
Étant donné que le temps de chargement est un facteur décisif pour les moteurs de recherche lors de l’évaluation de son propre site web et qu’il influence de manière déterminante l’expérience utilisateur, il convient de le maintenir aussi bas que possible. Il existe de nombreuses possibilités d’optimiser les temps de chargement et de les maintenir au minimum malgré l’utilisation de plusieurs images.
Le lazy loading natif (chargement retardé des contenus) et l’attribut CSS « srcset » pour le chargement des images sont les deux plus utilisés – après la mesure la plus efficace : l’optimisation des images.
Plus précisément, il s’agit d’une compression des images qui sont traitées de manière automatisée soit par un procédé Lossy (avec perte de qualité), soit par un procédé Lossless (sans perte de qualité).
Les procédés Lossy sont souvent la meilleure façon de réduire le poids des fichiers d’une image.
Nous te présentons 6 applications web et outils en ligne gratuits qui s’occupent de la compression et de l’optimisation de tes images.
6 Outils gratuits pour la compression d’images
1. TinyPNG
La plupart des développeurs et des designers considèrent TinyPNG comme la norme industrielle en matière de compression rapide, simple et efficace d’images. Avec la version gratuite de TinyPNG, tu peux compresser 20 images à la fois, chacune d’une taille maximale de 5 Mo. Nous utilisons également TinyPNG dans probablement 90% des cas où une image doit être comprimée.
Pour aller plus loin, découvrez comment gagner de l’espace en fusionnant des photos JPG.
2. Optimizilla
D’après notre expérience, Optimizilla est clairement l’une des meilleures alternatives à TinyPNG. Également basé sur un procédé Lossy, Optimizilla compresse jusqu’à 20 images à la fois, mais permet, outre une adaptation individuelle de chaque image optimisée, un aperçu comparatif direct par image. Même si Optimizilla ne le mentionne pas dans son texte, la taille maximale de chaque image est limitée à 5 Mo lors du téléchargement.
3. Squoosh
Squoosh te permet d’optimiser des images individuelles de manière très ciblée. Après avoir téléchargé une image, tu as la possibilité de tester différents procédés de compression en comparaison directe avec l’image d’origine et de procéder à des réglages fins.
4. iLoveIMG
iLoveIMG propose tout un ensemble d’outils pour le traitement, la conversion et la compression d’images. Sans inscription et gratuitement, il est possible d’optimiser jusqu’à 15 images à la fois. Il convient de mentionner qu’iLoveIMG utilise un procédé de perte et poursuit ainsi l’objectif de réduire la taille des fichiers sans perdre la qualité de l’image.
5. Compressor.io
Compressor.io est également l’un des meilleurs outils de compression d’images et permet de compresser facilement plusieurs images à la fois, avec un maximum de 10 Mo par fichier. Compressor.io permet de changer le type de compression de Lossy à Lossless en un seul clic et même Custom, qui te permet de personnaliser le réglage de la compression.
6. Ezgif
Ezgif est l’un des outils les plus anciens et les plus populaires pour l’adaptation, la conversion et l’optimisation d’images de toutes sortes – avec une taille maximale respectable de 50 Mo. En raison de l’impossibilité d’adapter plusieurs images en même temps, Ezgif convient davantage à l’optimisation d’images isolées avec des résultats tout à fait solides.
Chaque outil fonctionne différemment et pourtant de manière similaire
Les développeurs et les fournisseurs de ces outils tentent de mettre au point le Saint Graal de la compression d’images. Tous les outils fonctionnent donc de la même manière, mais différemment, ce qui fait que tu obtiendras des résultats différents en termes d’économie de taille et de qualité lors de l’optimisation d’une image avec des paramètres supposés identiques. Souvent, on parle objectivement de quelques points de pourcentage et d’une perception subjective de la modification de la qualité. Pour te donner une idée des différents résultats, nous allons faire le test. Nous nous basons sur la photo suivante de Kara Eads sur Unsplash :
Nous avons fait compresser la photo test en tant que JPG avec une résolution de 2560 x 1707 pixels avec une taille de sortie de 712 Ko par tous les outils présentés et avons obtenu les résultats suivants :
TinyPNG : 253 KB (65% d’économie)
Optimizilla : 253 KB (65% d’économie) – avec une qualité de 70%.
Squoosh : 258 KB (64% d’économie) – avec 70% de qualité
iLoveIMG : 315 KB (56% d’économie)
Compressor.io : 250 KB (65% d’économie) – avec procédé Lossy
Ezgif : 346 KB (51% d’économie) – avec 70% de qualité.
Même si la compression d’iLoveIMG et d’Ezgif est nettement inférieure en comparaison, chaque outil a permis d’économiser plus de 50% de la taille du fichier – et ce sans perte nettement perceptible de la qualité de l’image.
Je m’appelle Marc. J’ai toujours été passionné par l’informatique depuis mon plus jeune âge… et la création d’Internet ! 😜 J’en ai fait mon métier puisque je travaille dans une agence de webmarketing aujourd’hui. J’adore également partagé autour de moi mes connaissances. Ce qui fait que j’ai énormément de questions de mes clients et de mes proches… Quoi de mieux qu’un blog pour lister ses interrogations et y répondre pour que cela serve au plus grand nombre !