La vitesse de chargement est devenu un des critères majeurs d'évaluation des sites internet par les algorithmes de Google. La montée en puissance des connexions via les téléphones mobiles (supérieures au nombre de connexions sur poste fixe depuis 2015) a eu une influence sur l'importance croissante de ce critère de performance des sites.
L'optimisation des images constitue le moyen le plus simple de gagner en performance. C'est une démarche non technique et dont les effets sont mesurables immédiatement.
1- Avant d'optimiser une image
Il ne sert à rien d'obtenir une image très optimisée si elle est de taille trop importante. Il faut donc déterminer la largeur maximum de votre image.
Vous placez une image dans un article : quelle est la largeur du contenu de votre article (hors marges internes) ?
Vous placez une image dans un diaporama : quelle est la largeur maximum du diaporama ?
Vous placez une image dans un module : quelle est la largeur maximum du module ?
On peut observer s'il existe une différence de taille entre la place physique du conteneur de l'image et la taille réelle de celle-ci en effectuant un clic droit sur l'image et choisir "Inspecter".
Dans l'exemple ci-dessous il va falloir redimensionner l'image de 539px à 400px de large.
De nombreux outils sont à votre disposition pour redimensionner une image:
PicMonkey
Nimbus
ou simplement (mais plus rudimentaire) avec Microsoft Picture Manager(clic droit sur l'image dans l'explorateur) :
Egalement si vous avez de nombreuses tailles d'images et des structures de pages assez diverses, vous pouvez faire appel à des extensions Joomal telle que Resize Image on the Fly and Cache.
2- Outils de mesure de performance
YSlow : ce plug in pour Chrome ou Firefox peut être téléchargé sur cette page
L'objectif n'est pas ici de détailler le fonctionnement de YSlow mais de disposer d'un outil simple pour mesurer le chemin parcouru.
Point de départ : dans l'exemple ci-dessous on constate que 46 images sont chargées pour 7.5Mo, ce qui est beaucoup. On peut aussi regarder le détail des 15 images css, où peuvent se cacher de grandes disparités d'optimisation.
En détail on constate une image vraiment "lourde" (1.4 Mo) et d'autres autour de 300-400 Ko sur lesquelles il faudra agir également :
Après redimensionnement ET optimisation :
3- Plusieurs outils en ligne pour optimiser vos images
ImageRecycle : JPG et PNG
TinyPng : JPG et PNG
JpegMini : JPG
Selon les images (couleurs, contrastes, etc...) ces outils peuvent légèrement différer en matière d'optimisation. Cette liste n'est pas exhaustive.
4- Le composant ImageRecycle pour Joomla
ImageRecycle Image Optimizer est un composant gratuit pour Joomla, son éditeur est français.
Ce composant permet de :
- recenser toutes vos images et de les trier par taille
- lancer une optimisation manuelle sur les images que vous souhaitez
- programmer une optimisation avec une fréquence (par exemple toutes les 24 heures)
4.1- Paramètres principaux du composant ImageRecycle
Les paramètres du composant sont accessibles classiquement via le bouton "Paramètres" en haut à droite de l'administration du composant ImageRecycle.
1- Vous pouvez choisir les répertoires à parcourir pour une compression automatique.
2- Nous conseillons de laisser à "Non" la fonction de redimensionnement qui ne peut être que spécifique à certaines images, et manuelle.
3- Nous conseilons de laisser le paramètre par défaut "Meilleur gain".
4.2 paramètres avancés de ImageRecycle
Nous recommandons de laisser "Optimiser les media lors de la sauvegarde" à "Non" , car comme indiqué cela ralentit l'enregistrement de l'article.
Nous recommandons une fréquence d'optimisation toutes les 24 heures, c'est amplement suffisant.
4.3 Clé d'activation
Nosyweb fournit à ses clients une clé d'activation pour une durée illimitée.
4.4 Liste des images et traitement d'optimisation
Il est possible de :
- filtrer Optimized / Not optimized
- interrompre un traitement d'optimsation et effectuer un traitement manuel sur certaines images
- trier par taille et par nom de fichier
- restaurer (et non pas "Restorer") une image
- visualiser les images ayant le statut "Queued" et qui seront traitées lors du traitement automatique
4.5 Module de rapport d'optimisation
ImageRecycle installe systématiquement un module dans votre panneau d'administration avec le rapport de la dernière optimisation auyomatique.
5- En savoir plus
ImageRecycle est téléchargeable à cette adresse.
Pour aller plus loin, vous pouvez consulter nos articles "Comment optimiser et compresser les images au maximum" et "Optimiser les images pour le Web - Le guide ultime".
Articles qui devraient vous intéresser
L'effet miroir avec Photoshop CS4
Phoca Gallery 3.2.4 : une galerie Joomla pour vos photos
