Aujourd’hui 62% du trafic Web mondial est composé d’images ! Nos sites WordPress ne font pas exception, ils regorgent d’images à la une, dans le corps, dans les widgets…. Bref, il y en a partout !
C’est vrai qu’un site WordPress avec des images c’est bien plus beau et cela illustre le propos… Cependant ces dernières sont grandes consommatrices de ressources, notamment de notre bande passant et de fait, cela allonge nos temps de chargement.
The Web should be fast !
Pourtant nous savons tous que Google et nos visiteurs veulent que notre site soit rapide. Trop peu d’entre nous se soucie de ces temps de chargement, pourtant quand on sait ce que cela coûte:
- Un site qui se charge en plus de 5 secondes a un taux de rebond 2 fois plus élevé qu’un site qui se charge en 1 seconde
- Une seule seconde de chargement en trop peut coûter jusqu’à 7% du taux de conversion
- 20% des utilisateurs abandonnent leur panier à cause du temps de chargement
Les images et WordPress
Format des images
Les formats image les plus utilisés sur le Web sont :
- PNG : Format qui gère la transparence, un peu lourd et souvent utilisé pour les logos
- JPEG : Format permettant de compresser l’image, plus léger mais au détriment de la qualité et de la transparence
- GIF : Format prenant en charge l’animation, moins utilisé que les deux précédents
Le poids des images
Le poids d’une image c’est en fait la taille du fichier image en octets (ou kilo octets ou Méga octets), on calcule comme suit: Le Poids d’une image en octets est égal au nombre de pixels qui composent l’image multiplié par le nombre d’octets que composent un pixel.
Poids et tailles ne sont pas forcément indissociables, il faudra tenir compte de la résolution. Ainsi je peux parfaitement mettre en place une image d’arrière plan de très grande largeur avec un poids somme toute très modeste.
Quel intérêt également de mettre des images à la largeur supérieure à 2500 px ? Aucun ! La majorité des écrans de vos visiteurs tourne en 15, 17 et 19”, sans parler des utilisateurs tablettes, téléphones.
Quelle taille d’image pour mon WordPress ?
La première des choses à faire lorsque l’on place une image sur son WordPress, c’est d’en déterminer la taille. En effet, quelle largeur pour mon image d’illustration article ?
L’image ci-dessous vous permet de le savoir. Avec l’aide de votre navigateur Web, inspectez les éléments et vous obtiendrez les informations sur la largeur maximale à utiliser.
Dans cet exemple sur mon thème, on voit bien que la largeur maximale est de 1 140 px et que sur une page/article avec sidebar la largeur max est de 720 px:
WordPress, les images et le temps
Faites un test très simple sur votre WordPress, analysez le temps passé au chargement et regardez bien les contenus gourmands en ressources.
Dans l’image ci-dessous, on voit très bien que ce site WordPress passe plus de 45% de son temps à attendre et que pas moins de 57% du temps est dévolu aux seules images !
So make your WordPress faster !
Un des moyens les plus simples d’améliorer son temps de chargement, c’est donc d’alléger les images. C’est simple, c’est facile et c’est une ressource importante de notre WordPress alors autant commencer par là !
De nombreuses solutions existent pour optimiser les images, des plugins WordPress (EWWW Image Optimizer, WP Smush.it, Imsanity) en passant par des logiciels ou des services en ligne. S’il est vrai qu’il est simple de passer une image sous Photoshop et d’enregistrer pour le web, il faut bien reconnaître que c’est chiant long et fastidieux.
Aujourd’hui je vais donc vous parler d’un service qui va vous aider à optimiser vos images, en un minimum de temps et sans effort. Il s’agit de Kraken.io
Kraken.io optimise vos images WordPress
J’ai découvert Kraken en discutant avec @Jonathan, ce dernier suit le service depuis pas mal de temps et pour cause, l’équipe de WP-Rocket envisage de sortir un produit similaire prochainement (on en reparlera sur WPF bientôt;)
Kraken.io est un service payant qui optimise vos images et les rend plus légères (ou moins lourdes selon d’où on se place) de plusieurs manières :
- File Uploader : upload de fichiers images en glisser/déposer sur leur page dédiée
- URL Paster : en leur donnant une liste d’URLs images à optimiser
- Page Cruncher : en analysant une page et en optimisant toutes les images contenues sur cette dernière
- ou encore à l’aide d’un plugin WordPress
Autant le dire de suite, la fonction “Page Cruncher” est tout simplement géniale car elle permet d’optimiser toutes les images d’une URL en une fois et vous propose de les télécharger dans un fichier ZIP (ou de les synchroniser sur DropBox) tout en conservant la structure des dossiers… Une fois les images optimisées et le dossier ZIP uploadé, il vous suffit de décompresser et d’envoyer le tout via FTP.
Il existe bien évidement un plugin WordPress pour Kraken, et ce dernier se chargera de tout à l’instar des EWWW Image Optimizer, WP Smush.it et autres Imsanity.
En utilisant le plugin, depuis le menu Réglages>>Médias, vous pouvez déterminer le type d’optimisation, déterminer si les images doivent être automatiquement traitées à l’upload, etc… Ces réglages sont simples et le fonctionnement de Kraken silencieux.
Vous pourrez également voir le taux de compression et les gains obtenus à côté de chaque image. A noter qu’il existe l’option “KraK them all” permettant d’optimiser toutes les images de la bibliothèque WordPress en une fois.
Qualité de compression et gains
La compression est tout bonnement impressionnante et l’on peut choisir entre Lossy (compression max sans perte visuelle) et Lossless (compression minimale réservée aux photographes). Personnellement j’ai choisi Lossy pour de meilleurs résultats.
Le gain en terme de performances sur WPFormation est sans appel, aussi bien du point de vue de la vitesse qu’en ce qui concerne le poids de la page :
Conclusion
Vous l’avez compris, optimiser ses images sous WordPress est une nécessité ! Si les plugins ou l’optimisation manuelle font le boulot, je dois avouer que l’utilisation d’un service comme Kraken.io facilite vraiment la vie.
Vous pouvez essayer Kraken gratuitement et sans engagement. Si le service vous convient sachez qu’il est disponible à partir de 9 USD/mois pour 2 Go d’optimisation. Je l’ai utilisé sur toutes les images de WPFormation soit 825 MB (27 000 fichiers) tout en économisant pas moins de 308 MB (soit 37% d’optimisation).
Voici d’autres ressources pour optimiser vos images sous WordPress :
Merci pour la citation :)
Cet outil a l’air efficace en effet. J’ai remis Smush-it puisque dorénavant ils ont leur propre service. Il marche très bien.
Et WP-Rocket qui va s’y mettre aussi… Il y a vraiment le choix. Je vais essayer Kraken (sur mon clone ;) pour voir la différence avec Smush-it et je te dirais
Merci pour ce tuto, très intéressant et bien expliqué. Il répond à un vrai problème merci
Un autre qui marche bien, c’est TinyPNG et ils ont récemment sorti un plugin, pour WordPress. Le service est gratuit en dessous de 5000 images par mois, il me semble ! À tester => https://wordpress.org/plugins/tiny-compress-images/
Hello Fabrice,
Merci pour ces complément d’informations. Personnellement, j’utilise le logiciel Paint.net (installé par défaut sous Windows depuis la version 7, si je ne me trompe pas). Pas MsPaint. Cela m’aide à compresser les images avant de les uploader.
@anne-catherine avec plaisir, n’hésite pas à nous faire un retour ;)
@gregory pas mal TinyPNG, cependant la fonction “Page Cruncher” de Kraken est juste excellente!
@sebastien l’optimisation manuelle est aussi une option, toutefois l’utilisation de plugin (à l’upload) sur un blog multi-auteurs notamment, permet de se prémunir d’images trop lourdes…
Vis à vis de WP Smush Pro une préférence ?
Salut,
c’est très une bonne piqûre de rappel. Je pense que le petit Kraken va aller dans mon eau (ou mon vin).
Pour ma part j’utilise toujours Toshop + Plugin. C’est long et fastidieux comme tu l’énonces mais la qualité est contrôlée.
@kevin personnellement mon choix est fait ;)
J’ai bien apprécié ce publi-reportage [/troll] – le recaptcha est en flamand chez moi. Ik ben geen robot !
@li-an il n’y a ni troll, ni publi-reportage ;) J’ai tout simplement bien aimé l’outil et je le recommande fortement. Ceci dit, tout le monde n’investira pas dans le service Kraken, c’est pourquoi il y a des solutions alternatives dans l’article.
Pour le reCaptcha, j’ai déjà vu ça aussi, les mystères de l’ami Google…
Ah bah, comme je défends mordicus les solutions gratuites, ça m’agace un peu de voir un service payant mis en avant que seuls les pros peuvent se payer. Mais, bon, l’enthousiasme de la jeunesse…
Bonjour Fabrice, merci pour ce tuto car la question de la taille des images commençait à m’inquiéter: ayant une super connexion câblée je ne me rendais pas compte du handicap que cela pouvait représenter pour les petites connexions. Je vais donc m’y atteler rapidement, j’espère juste que je ne vais pas faire de bêtise en touchant à mon répertoire sur wp serveur ;)
Je m’excuse d’être hors sujet pour une autre question, les commentaires étant fermés: j’ai configuré ma pop-up avec pippity +aweber, et j’ai vu sur d’autres blog wordpress qu’il est possible de linker directement vers ce pop-up. Je souhaiterais par exemple mettre dans un article du blog un lien “inscrivez-vous à la newsletter” et le clic sur ce lien renverrait directement vers le pop-up: mais comment faire?
Merci pour l’info ! Je suis aller tester kraken et j’ai passé les mêmes images chez TinyPNG, en lossy. Pas de différences notables, sur certaines c’est Kraken qui compresse le plus, sur d’autres c’est TinyPNG, avec un léger avantage sur l’ensemble des images pour TinyPNG.
Niveau qualité je ne constate pas de grande différence, si ce n’est une tendance à assombrir les rouges chez Kraken.
C’est vrai que le téléchargement en une fois de tous les fichiers est chouette, mais pas de quoi me convaincre de souscrire un abonnement…
Très bon article comme toujours sur un point parfois négligé en effet. Par contre petite question de mon côté, depuis que nous utilisons des thèmes responsives la problématique des images pour obtenir un affichage optimal sur les écrans retina nous oblige maintenant quasiment à doubler la taille des images afin de ne pas avoir des images pixelisées par exemple sur les iphones.
Existe t’il à ta connaissance un plugin capable d’orienter l’affichage de l’image en mode normal oú en x2 si un écran Retina est détecté ceci afin d’optimiser l’affichage des images en fonction des supports oú le site est consulté ?
@laurent il me semble, mais c’est à confirmer, que les thèmes retina ready sont en mesure de le faire ^^
Sinon j’ai entendu beaucoup de bien de wp-retina-2x en version PRO.
Merci de ta réponse je vais regarder ça. Par contre non sur les 5-6 thèmes Retina ready sur lesquels j’ai déjà travaillé, il ne font l’adaptation que sur le logo en général mais pas sur les autres images dont tu te sert sur le site dans tes pages oú articles y compris pour la miniature.
Je vais étudier le wo-retina pro pour voir ce qu’il en est.
Bon weekend à toi ;-)
+1 pour optimus.io (https://optimus.io/en/)