Optimiser ses images pour le web
Pourquoi l’optimisation des images est cruciale
Les images représentent souvent plus de 50 % du poids d’une page web. Mal optimisées, elles ralentissent le chargement, nuisent à l’expérience utilisateur et pénalisent votre SEO. Une image optimisée est une image compressée, bien nommée, correctement dimensionnée et munie d’attributs HTML utiles aux moteurs de recherche.
Cela participe directement à améliorer le temps de chargement mobile et desktop, deux critères essentiels pour le référencement et la conversion.
1. Choisir le bon format d’image
Chaque format a son utilité :
- JPEG : idéal pour les photos, compressé avec peu de perte
- PNG : parfait pour les visuels avec transparence
- SVG : pour les logos et icônes vectorielles
- WebP : format moderne, léger, pris en charge par la majorité des navigateurs
Préférez le WebP pour les nouvelles images. Il combine qualité et compression, ce qui permet un chargement plus rapide.
2. Réduire la taille et la résolution
Il est inutile de charger une image en 3000 px de large si votre page n’en affiche que 800. Réduisez les dimensions à l’aide d’outils comme :
- Photoshop ou GIMP
- TinyPNG ou Squoosh (gratuit en ligne)
- Plugins WordPress comme ShortPixel, Imagify ou Smush
Visez une résolution de 72 dpi pour le web et un poids inférieur à 200 Ko pour les visuels standards.
3. Compresser les images sans perte visible
La compression réduit le poids sans altérer (visuellement) la qualité. Utilisez des outils en ligne ou automatisez cela avec un plugin WordPress. Par exemple, Imagify propose une compression automatique à l’envoi dans la médiathèque.
Veillez à activer la conversion vers WebP pour des performances optimales, tout en gardant une copie fallback au format JPEG ou PNG pour les anciens navigateurs.
4. Renseigner les balises ALT et les noms de fichiers
Une bonne balise ALT :
- Décrit le contenu de l’image pour les moteurs de recherche et l’accessibilité
- Permet un meilleur référencement dans Google Images
Nommez vos fichiers clairement : chaussures-trail-homme.webp est préférable à IMG_5048.jpg. Cela s’intègre parfaitement à une stratégie visant à référencer ses images dans Google Images.
5. Utiliser le lazy loading
Le lazy loading (chargement différé) permet de charger les images uniquement quand elles entrent dans le champ de vision de l’utilisateur. Cela réduit le poids initial de la page.
WordPress active cette fonctionnalité par défaut depuis la version 5.5, mais vous pouvez la renforcer avec WP Rocket ou un plugin dédié. À ce sujet, découvrez comment surveiller les performances de son site avec WP Rocket.
6. Adapter les images à l’écran (responsive)
Une image doit s’adapter à tous les écrans : mobile, tablette, desktop. WordPress génère plusieurs tailles automatiquement, mais vous pouvez aller plus loin avec les attributs srcset et sizes dans le code HTML.
Elementor gère cela nativement pour les widgets image, mais vous pouvez tester le rendu avec les outils développeur de votre navigateur pour ajuster au pixel près.
Conclusion : des images rapides pour un site plus performant
Optimiser ses images pour le web est une étape incontournable pour accélérer votre site, améliorer votre SEO et offrir une meilleure expérience utilisateur. C’est un travail technique mais essentiel.
Besoin d’aide pour optimiser l’ensemble de vos médias ? Faites appel à Blue Strat pour optimiser le contenu et la structure globale de votre site.
