Le poids et la qualité des images sont un des aspects fondamentaux de votre stratégie web. Optimiser vos images pour WordPress permet d’assurer le bon fonctionnement de votre site, d’être mieux référencé par les moteurs de recherche, d’offrir une expérience utilisateur fluide et agréable, notamment d’un point de vue visuel.
Dans cet article, nous découvrirons ce qu’on entend par optimiser vos images pour WordPress. Puis, comment le faire et avec quels outils. Pour les outils de type plugin, nous nous baserons sur une étude comparative réalisée par Isaumya.
Pourquoi compresser ses images ?
Si les images rendent le contenu de votre site plus attrayant, plus interactif, elles peuvent avoir un impact certain sur la vitesse de chargement de vos pages. Certes, on dit souvent qu’une image vaut mille mots, mais n’oublions pas que 1000 mots pèsent en moyenne moins de 6000 octets (soit 6 Ko) quand une image de 1 MO en pèse 1 000 000 (soit 1000 Ko).
Le poids des images est déterminé par leur taille (en nombre de pixels), les métadonnées qui y sont associées et les couleurs. Or, bon nombre de ces données sont inutiles d’un point de vue purement visuel. En effet, de nombreux spectres de couleurs ne sont pas perceptibles par l’oeil humain et certaines métadonnées (informations sur l’image, zoom, focale etc.) n’ont pas d’intérêt pour une publication web.
Aujourd’hui les images comptent pour plus de la moitié du contenu des sites. Il devient dès lors indispensable d’optimiser vos images pour le bon fonctionnement de votre site. Voyons comment !
Ce qu’il faut savoir sur les images
Quel format pour quelle utilisation ?
Avant d’inclure une image dans WordPress (compressée ou non), nous conseillons de bien choisir le format d’origine de la photo. Les formats (PNG, JPEG, GIF) correspondent à la manière (encodage) dont les images sont enregistrées dans le fichier. Hormis pour les nécessités de transparence, le format JPG s'avèrent bien souvent le plus adapté pour un site web.
JPG = Photos, images dotées de milliers de couleurs ou de nuances de gris
PNG = Schémas, images simples, logos ou images dotées de transparence. Très lourd
GIF = picto avec peu de couleur, animation
Seul GIF et PNG permettent la transparence.
Compression sans perte et avec perte ?
Compression sans perte
Les données couleurs ne sont pas altérées. Suppression des métadonnées sans importance (type d’appareil, objectif, focale utilisée, etc.).
=> Réduction de la taille de 2% à 37%
Compression avec perte
Programme sophistiqué (souvent payant) qui analyse toutes les données (métadonnées et couleurs) pour les compresser.
=> Réduction de la taille de 40% à 97%
Le chargement de la page sera beaucoup plus rapide.
Attention : si le programme utilisé n’est pas de haute qualité, il risque d’y avoir une dégradation de l’image (pixellisation).
Optimiser ses images sans plugin ?
Pour les plus à l’aise, l’idéal est d’optimiser vos images avant de les intégrer sur votre back-office WordPress et ainsi éviter l’utilisation d’un plugin de compression d’images.
Deux facteurs sont à prendre en compte : les dimensions et le poids des images.
Connaître les “bonnes” dimensions de vos images
Pour un chargement rapide de votre site, il est primordial de respecter les dimensions établies par le Web designer pour l’emplacement prévu pour chaque image.
Pour vérifier si vous avez des images à redimensionner, vous pouvez utiliser GT Metric. Vous faites un copier-coller de votre URL et si une section “Servir les images à l’échelle” apparaît, vous obtiendrez la liste des images à corriger avec les bonnes dimensions.
Outil online pour redimensionner vos images
Copier, coller l’URL de l’image dans l’outil online ImageResize
Dans la section 2, mettre l’option "personnalisation" et intégrer les dimensions recommandées par GT Metric. Enregistrez ensuite l’image sur votre ordinateur.
Pour redimensionner vos images, vous pouvez bien sûr utiliser n’importe quel logiciel d'édition d’images, comme Photoshop par exemple.
Identifier les images à compresser
Avec GT Metrics, vous pouvez identifier les images qui peuvent être compressées davantage pour ainsi optimiser la vitesse de chargement.
Vous faites un copier-coller de votre URL et dans la section “Optimiser les images” vous obtiendrez la liste des images à compresser.
Cependant, il est parfois nécessaire de procéder à des arbitrages entre qualité et poids. À titre d’exemple, les images contenant du texte peuvent difficilement être trop compressées car le texte deviendrait illisible. Elles seront donc un peu plus lourdes si on souhaite conserver un certain confort visuel.
Compresser le poids de vos images
Vous pouvez réduire le poids de vos images en utilisant l’outil ImageResize Compress Images. Suivez les différentes étapes et enregistrez votre image sur votre ordinateur.
Vous pouvez également utiliser des applications comme ImageOptim sur Mac ou FileOptimizer sur PC.
Et le tour est joué !
Une fois vos images à la bonne taille et au poids optimal, vous pouvez les intégrer à votre back-office WordPress et les publier. Votre site aura des images optimisées, l'internaute bénéficiera d'un temps de chargement plus court et ainsi d'une expérience utilisateur enrichie.
Les plugins pour optimiser ses images
Présentation du comparatif
Pour ceux qui ne sont pas des “aficionados” du logiciel, pas de soucis. Il existe de nombreux plugins pour optimiser vos images pour WordPress et qui s’en chargeront très bien pour vous !
Source : www.isaumya.com
Ingénieur, développeur et blogueur tech, Saumya Majumdar a réalisé un comparatif des plugins d’optimisation d’image les plus populaires sous WordPress.
L’étude liste tout d’abord les avantages et inconvénients de chaque plugin avant d’établir les différences de fonctionnalités de ces derniers (sous forme de tableau dans l’article source). Enfin, le comparatif s’appuie sur des tests de compression pour chaque plugin en PNG et en JPG. Étude des performances en terme de poids (compression) et de rendu visuel (dégradation ou non de l’image).
Dans les versions gratuites, seules celles n’étant pas trop limitatives (en matière de fonctionnalités et performances) ont été retenues pour le comparatif. Sans quoi, la version payante est privilégiée. Pour plus d’informations concernant la méthodologie utilisée, se référer à l’article complet de Isaumya.
En s’appuyant sur cette étude, nous vous proposons ici, une synthèse des meilleures solutions de compression d’image. Un bon vieux, mais néanmoins efficace, +/- attribué aux plugins vous donnera une idée rapide des solutions proposées.
Quid des 6 plugins testés
WP Smushit
Relativement populaire chez les anciens utilisateurs de WordPress, il fait toujours référence et est totalement gratuit. Basé sur un projet collaboratif, l’outil reste cependant assez limité dans ses fonctionnalités et ses capacités. En revanche, si vous cherchez un outil fonctionnel, il reste une option intéressante. Il donne de bons résultats en matière de performances et d’optimisation des images.
Gratuit
les + : JPEG, PNG, GIF supportés
les - : taille fichier max. Plugin / API (1 MO), pas de compression avec perte, support WebP et HTTPS, pas d’interface web
EWWW Image Optimizer
Un bon outil pour la compression PNG. Beaucoup plus de fonctionnalités sur EWWW Image Optimizer que pour tous les autres plugins WP (en payant comme en gratuit). L’interface utilisateur est malheureusement peu intuitive.
EWWW Image Optimizer est un excellent plugin avec des paramètres flexibles, mais vous aurez besoin de leur clé API payante pour avoir accès aux niveaux de compression qui font la différence.
Gratuit
les + : 4 formats pris en charge dont PDF, WebP support
les - : la taille de fichier max. Plugin / API dépend du serveur
Payant
les + : taille de fichier max Plugin / API (50MB), formats PDF pris en charge, HTTPS support, compression avec perte
les - : pas d’interface web
TinyPNG
Ce plugin a assis sa notoriété sur la qualité des images compressées. TinyPNG bénéficie d’une expérience de plusieurs années et reste un outil sûr pour compresser. Cependant, les formats sont limités à JPEG et PNG et la compression sans perte n’est pas permise.
Payant uniquement
les + : taille de fichier max. pour l’interface web (5MB), interface web
les - : format JPEG et PNG uniquement, pas d’option de compression sans perte, WebP support
Kraken.io
Très populaire dans l’univers WordPress, ce plugin est polyvalent dans les formats. Les comptes gratuits n’offrent qu’une taille maximale réduite de fichier (1 MO). S’il a déjà fait ses preuves, il a aujourd’hui de sérieux concurrents.
Gratuit
les + : interface web, format CSV supporté
les - : taille de fichier max Plugin / API (1MB)
Payant
les + : taille de fichier max Plugin / API (32MB), taille de fichier max. pour l’interface web (32MB), format SVG pris en charge, HTTP support, compression avec et sans perte (+JPEG progressive)
les - : WebP support
Imagify
Relativement nouveau, cet outil a une interface utilisateur agréable et intuitive. Cette entreprise française propose trois types de compression (normal, agressif et ultra). Il faut toutefois savoir que pour atteindre le niveau de compression souhaité en PNG, il faut passer en mode Ultra. Or, on constate une dégradation de qualité.
Gratuit
les + : simplicité d'utilisation
les - : taille de fichier max Plugin / API (2MB) et taille de fichier max. pour l’interface web (2MB)
Payant
les + : taille de fichier max Plugin / API illimitée, taille de fichier max. pour l’interface web illimitée
les - : WebP support, compression avec perte uniquement en mode ultra (déconseillé pour un site web car trop forte dégradation visuelle)
OptimusHQ
Bien que relativement récente dans l’écosystème WordPress, cette solution n’a pas vraiment fait la différence sur ce comparatif. L’absence de compression d'image avec perte, d’interface web et de support réactif dans la version payante pénalise largement ce concurrent.
Gratuit
les + : WebP support, HTTPS support
les - : taille de fichier max Plugin / API (100 KB)
Payant
les + : WebP support, HTTPS support
les - : taille de fichier max Plugin / API (5 MB), format JPEG et PNG uniquement, pas de compression avec perte, pas d’interface web
Résultat
L’analyse réalisée par Saumya, en comparant les fonctionnalités des plugins à la performance de leur compression, oriente son choix vers EWWW Image Optimizer.
Cependant, il s’agit faut bien voir qu'un tel comparatif a été réalisé par des utilisateurs avisés. Que vous soyez novice ou expérimenté, il ne vous faudra évidemment pas le même outil.
Pour ceux qui débutent par exemple, Imagify offre une bonne solution pour optimiser vos images pour WordPress. Faciles à prendre en main, et avec de bons résultats. WP Smushit et Kraken.io sont de sérieux concurrents pour EWWW Image Optimizer au regard des performances de compression. L’interface est cependant moins intuitive pour une utilisation fluide et rapide.
Conclusion
Vous en savez désormais un peu plus pour optimiser vos images pour WordPress, que ce soit au niveau de la compression comme de l’optimisation. Pourquoi ? comment ? avec plugin ou sans plugin ? avec quels plugins ?
En 2019, Google a placé la vitesse de chargement dans les premiers critères de référencement d’un site (parmi plus de 200). C'est pourquoi compresser ses images et les optimiser revêt une importance fondamentale. Pour aller vite, il faut être léger !
L’expérience utilisateur en sera elle aussi renforcée. Tant d’un point de vue du confort de l'utilisation (rapidité et fluidité) que d’un point de vue purement visuel (qualité des images optimisées).
