Le guide ultime de l'optimisation des images pour WordPress

1 … 2 … 3 … – votre client potentiel vient de fermer votre site car il est toujours en cours de chargement. Sonne familier? Je crois que vous avez été ce visiteur impatient et frustré à plusieurs reprises. Je sais que j'étais. C'est pourquoi j'ai compilé une liste ultime de choses que vous devez savoir sur l'optimisation d'image. Il va être long, mais j'espère que vous le trouverez intéressant à lire.

Table des matières

• Le contenu de cet article en vidéo de 3 min
• Avantages de l'optimisation des images
• Formats d'images
• Redimensionner les images avant de les télécharger
  • Plugin WordPress Imsanity pour redimensionner automatiquement les images
• Compression d'images
  • Meilleurs outils en ligne pour la compression d'images
    • TinyPNG
    • Optimizilla
    • Compresseur
    • ImageOptim
    • Imageplus petite
    • Kraken
    • JPEG.io
    • Informations sur la vitesse de la page
    • Résultats du meilleur outil de compression en ligne
    • Meilleur outil de compression en ligne pour les JPEG
    • Meilleur outil de compression en ligne pour les PNG
    • Meilleur outil de compression d'image en ligne dans l'ensemble
  • Meilleurs plugins WordPress pour la compression d'images
    • WP Smush (version gratuite)
    • Compresser les images JPEG et PNG par TinyPNG
    • CourtPixel
    • Imaginer
    • Optimiseur d'image EWWW (version gratuite)
    • Résultats du meilleur plugin WordPress pour la compression d'images
    • Meilleur plugin WordPress pour compresser les JPEG
    • Meilleur plugin WordPress pour compresser les PNG
    • Meilleur plugin WordPress pour la compression d'images dans l'ensemble
• Conclusion

Le contenu de cet article en vidéo de 3 min

Voici un aperçu vidéo très rapide de cet article. Je recommande toujours la lecture, mais juste pour vous taquiner suffisamment, nous y voilà :

Avantages de l'optimisation des images

N'êtes-vous toujours pas convaincu par tout ce qui concerne l'optimisation d'image ? Examinons tous les avantages que vous obtiendrez si vous ne résolvez que ce petit problème trivial :

• Votre site sera plus rapide
• Votre score Google PageSpeed ​​sera meilleur
• Google vous appréciera davantage et votre classement dans les moteurs de recherche s'améliorera
• Votre taux de rebond sera plus faible et plus de visiteurs verront votre page
• Vous aurez besoin de moins de stockage sur vos serveurs et vous dépenserez moins de ressources sur les serveurs, ce qui vous fera économiser de l'argent
• Vous économiserez de l'argent sur votre forfait de données mobiles pour vous et vos visiteurs

J'ai votre attention maintenant, n'est-ce pas ? Nous pouvons maintenant commencer le vrai travail.

Formats d'images

L'optimisation d'image commence par quelques connaissances de base sur les formats d'image. Les deux formats les plus courants sur Internet sont le PNG avec l'extension .png et le JPEG avec l'extension .jpg . J'utiliserai JPEG dans la plupart des cas, car c'est le meilleur format pour les photos, les images avec des dégradés et les images avec des millions de couleurs. D'autre part, PNG est meilleur avec des images en couleur limitées, telles que des logos, et avec des images avec transparence.

L'exemple suivant vous montrera à quel point il est important de choisir le bon format d'image pour la meilleure optimisation d'image.

Je vais enregistrer notre image child.jpg non optimisée aux formats .jpg et .png . Nous pouvons voir que l'image child-saved-as-jpeg.jpg fait 3,1 Mo et que l'image child-saved-as-png.png fait 4,5 Mo. Dans ce cas, l'image PNG est devenue 45% plus grande que l'image JPEG, une différence qui découle simplement du choix d'un format d'image spécifique. Il n'y a pas de moyen plus simple d'économiser autant d'espace avec si peu d'effort. Eh bien, peut-être qu'il y en a. Jetons un coup d'œil à l'étape suivante.

Redimensionner les images avant de les télécharger

Nous avons économisé de l'espace en choisissant le bon format d'image dans notre exemple précédent, mais nous pouvons économiser encore plus d'espace si nous redimensionnons l'image avant de la télécharger. Mais de combien devrions-nous le redimensionner ? Cela dépend vraiment de la largeur et du conteneur de votre site Web.

Sur notre site ProteusThemes, la largeur maximale de l'image est de 1110 px, je vais donc redimensionner l'image actuelle child.jpg , qui fait 1800 px de large, à 1110 px de largeur. Dans ce cas, nous venons de passer de 3,1 Mo à 1,1 Mo, ce qui représente encore 65 % d' espace économisé et réduit .

Astuce : Vous pouvez redimensionner les images directement dans votre bibliothèque multimédia WordPress. Cliquez sur Média -> Sélectionnez votre image -> Modifier l'image et choisissez de nouvelles dimensions pour votre image :

Plugin WordPress Imsanity pour redimensionner automatiquement les images

Si vous ne voulez pas penser au redimensionnement des images ou si de nombreux utilisateurs différents téléchargent des images sur votre site Web, le plugin Imsanity devrait parfaitement fonctionner pour vous. Dans les paramètres du plugin, vous pouvez choisir la largeur ou la hauteur maximale que les images doivent avoir et le plugin redimensionnera toutes les images plus grandes à cette taille. Vous pouvez également sélectionner la fonction de redimensionnement en bloc pour redimensionner toutes les images existantes. Je recommande vraiment ce plugin à tous ceux qui ont des problèmes pour redimensionner chaque image séparément avant de la télécharger. Vous pouvez télécharger gratuitement le plugin Imsanity.

Compression d'images

Maintenant que nous avons appris les bases de l'optimisation d'image, voyons comment nous pouvons améliorer notre jeu. On peut trouver de nombreux outils de compression d'image en ligne sur internet et même des plugins WordPress , qui permettront de réduire la taille de votre image. Mais nous devons être prudents ici, certains outils ne feront presque aucune différence et certains paramètres détruiront notre image et la rendront inutile. Alors, comment trouver le parfait équilibre ? Ne vous inquiétez pas, au moment de la rédaction (juin 2017, mise à jour 2018), nous avons testé tous les outils/services en ligne et les plugins WordPress les plus populaires pour l'optimisation des images et nous avons fait une sélection des meilleurs.

Nous avons utilisé 3 images JPEG différentes et 1 image PNG pour effectuer notre test.

Les 3 images JPEG proviennent d'Unsplash, des auteurs Mi Pham, Breather, Denise Chan et Niko Virtanen. Ils ont été recadrés et redimensionnés à 1110 x 624 px à des fins de test.

Pour l'image PNG, nous avons créé notre propre image avec le logo ProteusThemes et un motif derrière. Tout comme les images de test JPEG, celle-ci est également redimensionnée à 1110 x 624 px.

Nous allons maintenant mettre toutes les images à travers tous les outils et plugins sélectionnés pour la compression et nous découvrirons lequel est le meilleur pour vous. Commençons par les outils en ligne.

Meilleurs outils en ligne pour la compression d'images

Au moment de la rédaction (juin 2017, mise à jour 2018), voici une liste complète des outils et services en ligne les plus populaires pour la compression d'images :

• TinyPNG
• Optimizilla
• Compresseur
• ImageOptim
• Imageplus petite
• Kraken
• JPEG.io
• Informations sur la vitesse de la page

Si vous pensez qu'un autre outil mérite de figurer sur cette liste, faites-le nous savoir, nous le testerons et l'ajouterons à la liste. Vous trouverez ci-dessous mes critiques de chaque outil, ainsi que mon évaluation des meilleurs. Si vous ne voulez pas en savoir plus sur chaque outil individuel, cliquez ici – Montrez-moi les gagnants !

TinyPNG

TinyPNG a été l'un des premiers outils de compression d'image que j'ai utilisé et je l'utilise encore parfois. Il n'y a pas d'options, il vous suffit de télécharger les images et vous les obtiendrez compressées. Avec cet outil en ligne, vous pouvez télécharger en bloc jusqu'à 20 images d'une taille de 5 Mo.

Optimizilla

Optimizilla est un autre outil en ligne simple mais puissant. Son utilisation est gratuite et il a une option pour télécharger en masse jusqu'à 20 images. Pour un meilleur rapport compression/qualité, nous laissons le réglage de qualité à 90, comme c'est le cas par défaut. Si vous souhaitez pousser la compression encore plus loin, modifiez simplement ce paramètre et vous verrez immédiatement des changements dans la qualité.

Compresseur

Compressor a le potentiel de devenir l'un des meilleurs outils de compression d'image, mais il a un gros défaut. Il n'y a actuellement aucune option pour le téléchargement groupé, ce qui signifie que vous ne pouvez compresser qu'une seule image à la fois. En dehors de cela, il est gratuit, facile à utiliser et avec deux options de compression. Nous utilisons l'option avec perte dans notre test, car la qualité de l'image reste la même après la compression.

ImageOptim

ImageOptim est un outil avec beaucoup de paramètres. Vous pouvez choisir entre 3 options de qualité différentes et 3 options de qualité de couleur différentes. Nous avons découvert que les meilleurs résultats de compression/qualité sont avec les paramètres par défaut. Réglez la qualité sur moyenne et la qualité des couleurs sur automatique. Le truc qui m'a le plus dérangé avec l' ImageOptim , à côté du design un peu vieillot, était qu'il exportait des JPEG même si je téléchargeais des PNG . J'ai envoyé à Kornel (créateur de ImageOptim) un e-mail à propos de ce problème et il l'a déjà résolu.

Imageplus petite

Tout comme avec Compressor , ImageSmaller a le même défaut. Il n'y a pas d'option pour le téléchargement groupé. Cependant, il a l'une des plus grandes limites de téléchargement, avec les 50 Mo. Si vous avez des fichiers plus volumineux à optimiser, alors ImageSmaller pourrait être le bon outil pour vous.

Kraken

Kraken est un outil de compression d'image premium, avec le meilleur tableau de bord parmi tous les outils que j'ai testés. Vous trouverez une belle interface Web pour télécharger vos images et de nombreux paramètres différents pour obtenir les meilleurs résultats. Nous avons utilisé leurs paramètres de perte par défaut dans notre test.

JPEG.io

JPEG.io est une version gratuite du même outil que Kraken . Il a les mêmes capacités de compression, mais comme nous l'indique l'URL du site Web, ce n'est que pour les JPEG.

Informations sur la vitesse de la page

Vous ne vous attendiez pas à le voir ici, n'est-ce pas ? PageSpeed ​​Insights nous donne également un .zip de fichiers compressés lorsque nous testons notre site. Ce n'est pas le moyen le plus convivial, car vous devrez déjà avoir votre site Web en ligne avec toutes les images, puis les remplacer par les nouvelles compressées, mais vous obtiendrez des images compressées comme Google le souhaite.

Résultats du meilleur outil de compression en ligne

Vous trouverez ci-dessous des graphiques avec les résultats de tous nos tests. Vous pouvez également consulter notre feuille de calcul détaillée pour plus d'informations.

Meilleur outil de compression en ligne pour les JPEG

La plupart des outils ont compressé nos JPEG de test à environ 80 % . Jetons un coup d'œil à notre image child.jpg . Nous avons commencé avec une image de 3,1 Mo et après le redimensionnement et la compression, notre image ne faisait que 165 Ko, ce qui signifie une taille 95% plus petite . Maintenant, c'est une différence ! Nous avons réussi à obtenir les mêmes résultats avec Compressor et ImageOptim . Donc, il semble que nous ayons deux gagnants ici.

Meilleur outil de compression en ligne pour les PNG

Pour notre test PNG, nous avons obtenu en moyenne une taille réduite de 50 % avec tous les outils. Cependant, Optimizilla était un peu meilleur que les autres, avec une taille réduite de 56 % de notre image pt-logo.png .

Meilleur outil de compression d'image en ligne dans l'ensemble

Même si Optimizilla n'avait pas été le meilleur outil de compression pour les JPEG, je l'aurais recommandé comme le meilleur outil de compression actuellement disponible en ligne. Les JPEG compressés à 79% sont toujours géniaux et vous pouvez pousser cela encore plus haut, avec un simple réglage de qualité sur la page. Il a également une option pour le téléchargement en bloc, où Compressor est manquant et un téléchargement plus fiable, que ImageOptim , où toutes les images sont exportées au format JPEG, même si les PNG en font partie. À cause de toutes ces choses, je pense qu'Optimizilla mérite le titre de meilleur outil de compression d'images en ligne.

Voyons ensuite si les plugins WordPress peuvent battre les outils de compression d'images en ligne.

Meilleurs plugins WordPress pour la compression d'images

Quelle est la différence entre les outils d'image en ligne et les plugins WordPress ? Eh bien, si vous utilisez des outils d'image en ligne pour la compression d'images, vous devrez toujours télécharger ces images sur votre site WordPress, puis les utiliser. Si vous préférez tout avoir au même endroit, le plugin WordPress pour la compression d'image pourrait être la solution. La plupart des plugins ont également une option pour optimiser les images avec le téléchargement, vous pouvez donc activer ce paramètre et oublier tout travail supplémentaire.

J'ai créé un nouveau site WordPress pour chaque plugin et téléchargé les mêmes 4 images à chaque fois. Différents plugins ont des paramètres différents, je recherchais donc l'équilibre parfait entre la compression et la qualité d'image.

J'ai testé les plugins suivants :

• WP Smush (version gratuite)
• Compresser les images JPEG et PNG par TinyPNG
• CourtPixel
• Imaginer
• Optimiseur d'image EWWW (version gratuite)

Comme je l'ai déjà mentionné, si vous connaissez un autre plugin que nous devrions tester, faites-le nous savoir et nous l'ajouterons à la liste. Si vous ne voulez pas en savoir plus sur ces plugins, cliquez ici – Montrez-moi les gagnants !

WP Smush (version gratuite)

WP Smush est l'un des plus anciens plugins de compression d'image que je connaisse. Il a un bel avantage par rapport à tous les autres plugins, car il n'y a pas besoin d'inscription pour utiliser une version gratuite. Il a également une option pour compresser automatiquement les images nouvellement téléchargées, donc une fois le plugin défini, vous pouvez l'oublier et il fera tout le travail pour vous en arrière-plan. Malheureusement, les résultats de compression étaient parmi les pires de la version gratuite, je ne recommanderais donc pas de l'utiliser. Ils ont déclaré sur leur site que la version pro compresse beaucoup mieux, donc je testerai également celle-ci dans la prochaine mise à jour de l'article.

Compresser les images JPEG et PNG par TinyPNG

Tout comme l'outil de compression en ligne TinyPNG , le plugin WordPress est également très simple. Une fois que vous avez effectué l'enregistrement, les paramètres sont minimaux et il fonctionne essentiellement de la boîte. Toutes les images nouvellement téléchargées peuvent également être automatiquement compressées, vous pouvez donc activer le plugin et l'oublier.

CourtPixel

ShortPixel a été, personnellement, l'une des plus grandes surprises. Je n'en avais jamais entendu parler avant mes recherches et j'ai été vraiment impressionné. Avec les paramètres recommandés par défaut avec perte, il a les meilleurs résultats de compression entre les plugins WordPress et il a également une option brillante. Cette option est destinée aux photographes ou à tout autre professionnel, qui ont besoin d'images de très haute qualité et qui ne peuvent pas faire de compromis avec la perte de qualité.

Imaginer

Imagify est un plugin créé par les célèbres auteurs de plugins WP Rocket . Après l'inscription, vous aurez le choix entre quelques options claires. Pour une compression et une qualité d'image optimales, choisissez le mode agressif. Une bonne chose dans les paramètres est également une option pour avoir un dossier séparé pour les images originales, au cas où quelque chose se passerait mal avec la compression. La seule chose que je n'ai pas complètement comprise, c'est pourquoi devons-nous passer à la vue liste dans les médias afin de voir les résultats de la compression. En dehors de cela, Imagify est un plugin vraiment sympa et solide.

Optimiseur d'image EWWW (version gratuite)

EWWW Image Optimizer était le seul plugin qui m'a donné quelques erreurs. Tout d'abord, je l'ai essayé sur mon propre hébergement et j'ai eu une erreur, que EWWW Image Optimizer nécessite exec() ou une clé API. La prochaine fois que j'ai essayé le plugin sur mon site WordPress de développement local, j'ai reçu une erreur indiquant qu'il me manquait pngout. J'ai suivi les instructions sur la façon de l'installer et le plugin était enfin prêt pour le test. Depuis que j'ai testé la version gratuite, il n'y avait qu'une option sans perte, ce qui n'a pas donné les meilleurs résultats. Tout comme avec le WP Smush, je testerai également la version pro d'EWWW Image Optimizer dans la prochaine mise à jour de l'article et nous verrons s'il fonctionnera mieux.

Résultats du meilleur plugin WordPress pour la compression d'images

Comme avant, vous trouverez ci-dessous des graphiques avec les résultats de tous nos tests. Vous pouvez également consulter notre feuille de calcul détaillée pour plus d'informations.

Meilleur plugin WordPress pour compresser les JPEG

ShortPixel a été le gagnant, avec une moyenne de 84% de compression . Identique à Compressor et ImageOptim dans la catégorie du meilleur outil de compression en ligne. Le deuxième meilleur plugin était Imagify , avec une moyenne de 70 % de compression . Je déclare que ShortPixel est actuellement le vainqueur absolu de cette catégorie.

Meilleur plugin WordPress pour compresser les PNG

Le meilleur plugin de compression PNG s'appelle Compresser les images JPEG et PNG de TinyPNG , avec une compression de 56 % . Fait intéressant, le meilleur résultat est, encore une fois, le même que dans la catégorie du meilleur outil de compression en ligne. Cependant, d'autres plugins étaient un peu plus compétitifs ici, avec une compression d' environ 50 % .

Meilleur plugin WordPress pour la compression d'images dans l'ensemble

À mon avis, le meilleur rapport entre l'expérience utilisateur, les différents paramètres et la compression provenait du plugin ShortPixel . Dans l'ensemble, c'est un plugin très solide, avec de nombreuses options, mais aussi avec déjà d'excellents paramètres par défaut. Vous pouvez commencer à utiliser le plugin immédiatement après l'enregistrement et, plus important encore, la compression est excellente. Pour le moment, j'opterais pour le plugin ShortPixel pour mon propre site Web, surtout si la majorité des images sont au format JPEG.

Conclusion

C'était un long voyage, n'est-ce pas ? Pendant ce temps, nous avons réussi à compresser notre image child.jpg jusqu'à 95% . Votre site Web peut fonctionner beaucoup plus rapidement si vous ne suivez que ces 3 étapes simples . Répétons-les encore :

• Sélectionnez le bon format d'image
• Redimensionner l'image avant de la télécharger
• Compresser l'image avec les outils en ligne ou les plugins WordPress

Une autre chose importante est que vous n'utilisez qu'un seul outil ou plugin WordPress pour chaque image, car la plupart d'entre eux ont une sorte de compression avec perte, ce qui signifie que la qualité de votre image pourrait se détériorer à chaque compression supplémentaire et c'est quelque chose que nous faisons veux pas. Nous avons également ajouté toutes les images de test sur le GitHub si vous souhaitez vérifier la comparaison de qualité entre elles ou tester vous-même d'autres outils et plugins.

Vous ne devriez plus avoir d'excuses pour ne pas compresser vos images. Il existe de nombreux outils et différentes façons de le faire et nous l'avons prouvé, cela en vaut la peine au final. Choisissez votre propre gagnant personnel pour la compression en ligne ou le plugin WordPress et allez vérifier le score Google PageSpeed ​​de votre site Web avant et après l'optimisation. Partagez les informations sur la vitesse de votre site et l'amélioration du score dans notre section de commentaires. J'aimerais également savoir si cet article vous a aidé à optimiser l'image et qu'en pensez-vous.