Formation WordPress – Devenez un expert WordPress

Partager sur facebook
Partager sur twitter
Partager sur pinterest

Optimiser et alléger ses images sous WordPress

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:

Largeur max image WordPress

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 !

temps images WordPress

 

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

comparaison-images

 

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

 

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.

resultats kraken

 

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.

kraken-wordpress-plugin-reglages

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.

optimiser images kraken wordpress

 

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.

comparaison-images

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 :

SC-tools.pingdom-WPF

 

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 WP Formation soit 825 MB  (27 000 fichiers) tout en économisant pas moins de 308 MB (soit 37% d’optimisation).

webinaire agence webmarketing

Profitez maintenant du meilleur Webinaire composé des secrets et stratégies que personne ne vous dévoilera, rejoignez maintenant plus de 24.500 entreprises qui ont profité des secrets.

Partagez cet article avec vos amis

Partager sur facebook
Partager sur google
Partager sur twitter
Partager sur linkedin