Selon HTTP Archive, en décembre 2018, les images représentaient plus de 40% du poids moyen des pages d’un site Web sur les ordinateurs de bureau et les appareils mobiles. C’est énorme ! 😮 Lorsqu’il s’agit du nouvel index et de la performance, l’optimisation de l’image joue un rôle crucial dans la vitesse de chargement de votre site WordPress. La compression d’image est l’une des optimisations les plus faciles que vous puissiez mettre en œuvre et qui, à son tour, aura le plus grand impact. Il s’agit essentiellement de réduire la taille du fichier de vos images en utilisant deux formes de compression populaires : la compression avec perte (lossy) et la compression sans perte (lossless). WEBP supporte les deux méthodes de compression !

Aujourd’hui, nous allons nous plonger dans ces deux types de compression d’image et discuter de celui que nous vous recommandons d’utiliser. Cela peut varier selon le type d’entreprise que vous exploitez.

Compression avec perte (Lossy)

La première forme de compression est avec perte. La compression avec perte (Lossy) implique l’élimination de certaines données de votre image. Pour cette raison, cela signifie que vous pourriez voir une dégradation (réduction de la qualité ou ce que certains appellent une pixellisation). Il faut donc faire attention de combien vous réduisez votre image. Non seulement en raison de la qualité, mais aussi parce que vous ne pouvez pas inverser le processus. Bien sûr, l’un des grands avantages de la compression avec perte et pourquoi c’est l’une des méthodes de compression les plus populaires est que vous pouvez réduire la taille du fichier d’une très grande quantité.

  • Les JPEG et les GIF sont tous deux des formats d’image avec perte.
  • Les JPEG sont parfaits pour les sites qui ont besoin de temps de chargement rapides car vous pouvez ajuster le niveau de qualité pour un bon équilibre entre la qualité et la taille du fichier.

(Lecture suggérée : JPG vs JPEG : Comprendre le format de fichier image le plus courant)

WordPress compresse automatiquement les images

Saviez-vous que WordPress compresse automatiquement vos fichiers JPEG lorsque vous les téléversez dans la médiathèque ? Par défaut, WordPress compresse automatiquement les images jusqu’à 90% de leur taille originale. Cependant, depuis WordPress 4.5, ils ont augmenté ce pourcentage à 82% pour augmenter encore les performances de l’ensemble du système. Si vous vous demandez pourquoi vos images ont l’air un peu pixélisées sur une nouvelle installation WordPress, voilà pourquoi.

Bien que la compression automatique soit excellente, nous avons généralement constaté que 82% n’est en aucun cas suffisant lorsqu’il s’agit d’avoir un impact réel sur les performances de votre site. Par conséquent, vous pouvez désactiver cette option si vous le souhaitez en ajoutant le filtre suivant au fichier functions.php de votre thème. Rappelez-vous, faîtes toujours une sauvegarde avant de modifier votre site.

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

Si vous voulez augmenter le taux de compression automatique de WordPress, vous pouvez ajouter le filtre et réduire le pourcentage du fichier original, par exemple 70% dans l’exemple ci-dessous.

add_filter( 'jpeg_quality', create_function( '', 'return 70;' ) );

N’oubliez pas que cela n’aura pas d’impact sur les images déjà téléversées. Vous aurez besoin d’une extension comme Regenerate Thumbnails pour l’appliquer à votre bibliothèque existante. Ou mieux encore, nous vous conseillons simplement de laisser votre thème tranquille et d’utiliser une extension d’optimisation d’image WordPress (sur laquelle nous nous pencherons plus tard) ou de compresser davantage vos images avant de les téléverser.

Compresser les images avec Enregistrer pour le Web (logiciel)

Vous pouvez utiliser des outils tels qu’Adobe Photoshop, Affinity Photo, Affinity Designer ou d’autres éditeurs d’images pour ajuster les réglages de qualité d’une image (voir ci-dessous). Dans la plupart des outils, c’est sous « Enregistrer sur le Web » ou « Réglages d’exportation ».

Changer la qualité de la photo
Changer la qualité de la photo

Si nous faisons une petite comparaison des taux de compression avec perte, nous pouvons voir que 50% semble excellent. 33% commence à s’estomper un peu sur certains détails de l’arrière-plan (mais cela passera plutôt inaperçu), et 5% n’est évidemment pas acceptable. Ce n’est qu’un exemple de la raison pour laquelle les 82% automatiques dans WordPress ne sont pas suffisants. Vous pouvez et devriez comprimer à des taux beaucoup plus élevés pour réduire davantage la taille des fichiers.

  • original.JPG 2,82 MB (2000 px par 1463 px)
  • compressé avec perte-1.JPG : 227 KB (2,000 px par 1463 px) Réduction de 91.95%.
  • compressé avec perte-2.JPG : 185 KB (2,000 px par 1463 px) 93.44% de réduction
  • compression avec perte-3.JPG : 5 KB (2,000 px par 1463 px) 99.82% de réduction
Comparaison de la compression avec perte
Comparaison de la compression avec perte

Disons que vous choisissez d’opter pour la version compressée à 50%. La taille du fichier est de 227 Ko, ce qui est certainement beaucoup plus petit que le fichier original de plus de 2 Mo. Cependant, ce n’est toujours pas génial si ce n’est qu’une des 15 autres images d’une page. En général, il est préférable de garder toutes vos images en dessous de 100 Ko si possible. Dans mon cas, vous devriez pouvoir être beaucoup plus petit. C’est donc ici qu’il est important de redimensionner vos images. L’image de 50% redimensionnée d’abord à 1251 px par 916 px n’est que de 95 Ko.

Mais n’oubliez pas, vous ne voudrez peut-être pas réduire la taille de vos images jusqu’au bout, car WordPress 4.4 prend désormais en charge les images réactives (et non les images réduites par CSS). WordPress crée automatiquement plusieurs tailles de chaque image téléversée dans la médiathèque. En incluant les tailles disponibles d’une image dans un attribut srcset, les navigateurs peuvent maintenant choisir de télécharger la taille la plus appropriée et ignorer les autres. Voyez ci-dessous un exemple de ce à quoi ressemble votre code.

exemple d'images réactives avec srcset dans le code
exemple d’images réactives avec srcset dans le code

Ainsi, avec de plus en plus d’écrans HiDPI de nos jours, il peut être bon de trouver un juste milieu. Disons 2x ou 3x la taille de la colonne ou de la div de votre site, mais toujours inférieure à la taille originale. Le navigateur affichera la bonne taille en fonction de la résolution de l’appareil.

Google recommande la compression avec perte

Utilisez-vous Google PageSpeed Insights ? Si c’est le cas, vous connaissez probablement l’avertissement qui dit « Optimiser les images ». En 2017, Google a mis à jour sa documentation pour recommander l’utilisation de la compression avec perte comme moyen d’accélérer encore plus votre site.

Avertissement Google PageSpeed Insights d’optimisation des images
Avertissement Google PageSpeed Insights d’optimisation des images

Si vous voulez vous débarrasser de ces avertissements, l’un des moyens les plus simples est d’utiliser la compression avec perte pour apaiser Google.

Compression sans perte (Lossless)

Maintenant, il est temps de plonger dans la seconde forme de compression qui est celle sans perte. La compression sans perte, contrairement à la compression avec perte, ne réduit pas la qualité de l’image. Comment est-ce possible ? Cela se fait généralement en supprimant les métadonnées inutiles (données générées automatiquement par l’appareil qui capture l’image). Cependant, le plus grand inconvénient de cette méthode est que vous ne verrez pas une réduction significative de la taille du fichier. En d’autres termes, cela occupera beaucoup d’espace disque avec le temps.

  • RAW, BMP, GIF et PNG sont des formats d’image sans perte.
  • Vous pouvez effectuer une compression sans perte sur votre ordinateur en utilisant des outils tels que Photoshop, FileOptimizer ou ImageOptim.
  • Certaines extensions appliqueront la compression Gzip aux images (minification).

Les utilisateurs de Kinsta peuvent profiter de la fonction de minification du code qui est intégrée directement dans le tableau de bord MyKinsta. Cela permet aux clients d’activer facilement la minification automatique de CSS et JavaScript d’un simple clic. Cela peut aider à accélérer un site sans aucun effort manuel.

Si nous faisons une petite comparaison des taux de compression avec perte, nous pouvons voir que lorsque vous utilisez la compression sans perte, vous ne perdez aucune qualité. Cependant, la taille du fichier de l’image n’a été réduite que de 10,84%. Comparé à plus de 90% en utilisant la compression avec perte.

  • original.JPG : 227 KB (2,000 px par 1463 px)
  • JPG : 203 Ko (2 000 px par 1463 px)
Compression sans perte
Comparaison de compression sans perte

Quelle méthode de compression est la meilleure ?

La réponse à cette question dépend en fait de vous. Pour la majorité des utilisateurs, nous recommandons l’utilisation de la compression avec perte car vous pouvez facilement compresser une image bien au-delà de 70% (parfois même plus de 90% !) sans perte de qualité. Multipliez ceci par 15 images sur une page et cela jouera un rôle significatif dans la réduction du temps de chargement de votre site. Non seulement cela, mais la compression avec perte vous assurera d’utiliser le moins d’espace disque possible. Ce qui signifie que vous pourriez économiser de l’argent sur l’hébergement.

La compression sans perte est pour ceux qui ne peuvent se permettre aucune perte de qualité. Photographes, blogueurs culinaires et mannequins ne sont que quelques-uns de ceux qui viennent à l’esprit et qui comptent sur des images au pixel près pour gagner leur vie. Dans ces cas, il est essentiel que vous hébergez vos images sur un CDN. En raison de leur taille, vous pourriez même avoir besoin de les transférer vers un service de stockage tiers comme Amazon S3 ou Google Cloud Storage.

Comment utiliser la compression avec perte dans WordPress

Si vous êtes toujours confus entre avec perte et sans perte ne vous inquiétez pas, il existe de nombreuses extensions WordPress d’optimisation d’images que vous pouvez choisir et qui appliquent automatiquement la compression avec perte.

Certains hébergeurs proposent des outils ou des services pour vous aider à optimiser vos images directement depuis le tableau de bord de votre hébergement. Par exemple, Kinsta offre une fonctionnalité gratuite d’optimisation d’image à tous ses clients qui crée des copies WebP des images d’un site (stockées sans frais supplémentaires), puis livre le plus petit des deux fichiers au visiteur. Cette fonction accélère les temps de chargement et améliore l’expérience de l’utilisateur, d’autant plus qu’elle est associée au CDN ultrarapide de Kinsta.

Si votre hébergeur ne propose pas un tel service, vous pouvez utiliser un outil d’optimisation d’image tiers. Voici quelques-unes des options les plus utilisées :

Remarque : celles énumérées ci-dessus utilisent leurs propres serveurs tiers pour la compression des images. Vous devriez toujours compresser les images en groupe hors site pour des raisons de performance. 👍

Imagify est l’une des options les plus populaires que nous avons listées. Elle dispose d’un plan gratuit, mais même ses plans pro sont proposés à des prix très raisonnables. Vous pouvez optimiser un grand nombre d’images en utilisant uniquement le plan « Lite » (1 Go par mois), et ils proposent des options de paiement mensuel ou annuel peu couteuses.

Imagify a trois niveaux d’optimisation différents :

  • Normal : Ce mode utilise la compression sans perte, ce qui signifie que vos images ne perdront aucune qualité, mais qu’elles ne seront pas trop réduites en taille.
  • Agressif : Ce mode utilise la compression avec perte et permet de réaliser des économies drastiques sur le poids initial, avec une légère réduction de la qualité de l’image. La plupart du temps, on ne le remarque même pas.
  • Ultra : Ce mode utilise la compression avec perte et applique toutes les optimisations disponibles pour une compression d’image maximale. Cela vous permettra d’économiser énormément sur le poids initial, mais vous remarquerez très probablement une certaine dégradation de l’image.
Réglages Imagify
Réglages Imagify

Nous utilisons le mode Agressif chez Kinsta et nous réalisons généralement des économies de 60 à 70% en fonction de l’image. Note : nous utilisons en fait beaucoup plus de PNG que de JPEG parce que la plupart de nos images sont des icônes et des illustrations, pas des photos.

Économies de fichiers de compression d'images
Économies de fichiers de compression d’images

Vous pouvez activer l’auto-optimisation des images lors du téléversement (ce que nous vous recommandons pour ne pas oublier) ou utiliser leur optimiseur d’images en masse dans la bibliothèque média. Vous pouvez également sauvegarder l’image originale. Cela vous permet de convertir votre image à d’autres niveaux d’optimisation ultérieurement ou même de restaurer votre image originale. Si vous n’utilisez pas cette fonction, nous vous recommandons de la désactiver pour économiser de l’espace disque.

Vous devriez généralement redimensionner vos images à l’avance, mais Imagify a une fonction Redimensionner les images plus grandes au cas où vous oublieriez ou n’auriez pas le temps. En plus de la compression avec perte, c’est une autre grande économie de taille de fichier !

Imagify redimensionne des images
Imagify redimensionne des images

En fait, nous venons tout juste d’utiliser la fonction d’optimisation d’images en masse sur l’ensemble de notre médiathèque WordPress. Comme vous pouvez le voir, il s’est allégé de plus de 700 Mo ! C’est énorme quand il s’agit de performances sur l’interface publique.

Économies d'optimisation d'images en masse
Économies d’optimisation d’images en masse

Tests de vitesse

Faisons un petit test ! Étant donné que nous voyons constamment des utilisateurs téléverser des images en pleine résolution sans compression, nous allons faire une petite comparaison sur l’impact que cela a sur la performance globale de votre site.

Test 1 – Original non compressé

Nous avons d’abord téléversé 10 images non compressées. Nous avons ensuite fait 5 tests sur Pingdom et pris la moyenne. Nous pouvons voir que le temps de chargement total est de 3,04 secondes avec une taille de page totale de 28,4 Mo.

  • non compressé-1.jpg (2.82 MB)
  • non compressé-2.jpg (2.82 MB)
  • non compressé-3.jpg (2.82 MB)
  • non compressé-4.jpg (2.82 MB)
  • non compressé-5.jpg (2.82 MB)
  • non compressé-6.jpg (2.82 MB)
  • non compressé-7.jpg (2.82 MB)
  • non compressé-8.jpg (2.82 MB)
  • non compressé-9.jpg (2.82 MB)
  • non compressé-10.jpg (2.82 MB)
Test de vitesse non compressé
Test de vitesse non compressé (Pingdom)

Test 2 – Compressé

Nous avons ensuite téléversé à nouveau exactement les mêmes images, mais cette fois nous avons activé « auto-optimiser » dans l’extension Imagify. Nous avons ensuite effectué à nouveau 5 tests sur Pingdom et pris la moyenne.

  • compressé-1.jpg (69.3 KB)
  • compressé-2.jpg (69,3 Ko)
  • compressé-3.jpg (69.3 KB)
  • compressé-4.jpg (69.3 KB)
  • compressé-5.jpg (69,3 Ko)
  • compressé-6.jpg (69,3 Ko)
  • compressé-7.jpg (69,3 Ko)
  • compressé-8.jpg (69.3 KB)
  • compressé-9.jpg (69.3 KB)
  • compressé-10.jpg (69.3 KB)

Nous pouvons voir que le temps de chargement total est maintenant de 522 ms avec une taille de page totale de 901.4 KB. Ainsi, nos images compressées avec perte ont réduit le temps de chargement des pages de 82,83% ! 😮 La taille totale de la page a également été réduite de 96,83%, ce qui est énorme. Et grâce à Imagify, nos images sont toujours de haute qualité.

Test de vitesse compressé
Test de vitesse compressé (Pingdom)

Résumé

Une fois que vous avez déterminé la qualité des images dont vous avez besoin sur votre site, vous pouvez choisir si vous voulez utiliser la compression avec ou sans perte. Encore une fois, pour ceux qui sont plus préoccupés par la vitesse et moins par la qualité, nous recommandons d’opter pour la compression avec perte. Rappelez-vous que les images compressées avec perte peuvent être belles si vous trouvez le bon équilibre. Si vous avez besoin d’images au pixel près, vous devriez toujours opter pour la compression sans perte.

Qu’en pensez-vous ? Utilisez-vous la compression avec ou sans perte sur votre site WordPress ? Faites-nous le savoir ci-dessous dans les commentaires.

Matteo Duò Kinsta

Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.