Categories
Technique++

Optimisation des images avec wordpress : mes 5 outils préférés

Depuis 3 jours, j’ai un tournevis et une souris en main, les yeux qui pleurent à force de regarder l’écran, je bois de la camomille pour arriver à dormir…

Depuis 3 jours, j’ai un tournevis et une souris en main, les yeux qui pleurent à force de regarder l’écran, je bois de la camomille pour arriver à dormir et déconnecter de ma préoccupation existentielle du moment : comment publier des galleries de plus de 10 images et ne pas imposer un temps d’attente désespérant à mes visiteurs … La dernière gallerie publiée la semaine dernière, qui contenait une quarantaine d’images, mettait 10 secondes à s’afficher… Quand on sait que les études des maîtres yodas de l’internet affirment qu’il faut être en dessous de 2 secondes, j’ai sauté sur l’occasion pour devenir monomaniaque sur le sujet…

Plongeons dans la technique (j’adore …) : j’utilise le plugin Envira pour afficher mes images. Pour des raisons de respiration de la page, mais aussi pour ce besoin de performance, j’ai mis en place la première optimisation :

1) utiliser la pagination proposée par Envira. Vous trouverez la doc ici.

La deuxième étape, qui n’est pas une optimisation en soi, est de trouver un outil qui permet de mesurer les progrès accomplis. Sinon, pour ce genre de sujet, on peut optimiser pendant des mois pour à la fin ne plus gagner grand chose. L’outil pingdom permet de voir les appels d’un browser vers le serveur wordpress, les tailles des fichiers transférés, leur nom et les temps de transfert. La première fois, le résultat n’est pas très agréable, on commence à entrevoir l’étendue du travail à venir, mais, en étant optimiste, on voit qu’il y a beaucoup à gagner !

Deuxième optimisation :

2) reprendre les images avec Photoshop, et les sauver en 1000×1000 avec Save for Web en utilisant une qualité de 70 à 80 %. Afin de retravailler les images par lots, j’ai créé une action Photoshop que j’applique à des séries d’images avec Bridge/Tools/Photoshop/Image Processor.

Ensuite, il est possible d’aller plus loin dans l’optimisation des images avant de les insérer dans WordPress :

3) utiliser l’utilitaire jpegmini

Maintenant, mes images sont prêtes à partir sur le site.

Les deux autres optimisations que j’ai apportées concernant le temps de chargement des images sont des fonctionnalités que j’ai ajoutées au site lui-même avec 2 plugins:

4) EWWW Image Optimizer qui compresse à la volée les vignettes et images intermédiaires qui sont crées dans WordPress quant on insère une image

5) WP Super Cache qui met en cache les pages du site

Voilà donc succintement ma recette actuelle quant à l’optimisation des images pour mon site sur WordPress…

Amis codeurs, je vous dis à bientôt.

Stay tuned!