Les images représentent souvent plus de 50% du poids d'une page web. Leur optimisation impacte directement la vitesse de chargement, l'expérience utilisateur et le référencement de votre site.
L'optimisation des images influence le SEO de plusieurs manières. D'abord, la vitesse de chargement : des images trop lourdes ralentissent votre site, ce qui impacte négativement vos Core Web Vitals et donc votre classement. Ensuite, Google Images génère un trafic significatif vers de nombreux sites. Enfin, les images enrichissent l'expérience utilisateur et peuvent améliorer l'engagement sur vos pages.
Format idéal pour les photographies et images avec beaucoup de couleurs et de dégradés. La compression avec perte permet d'obtenir des fichiers légers tout en conservant une qualité visuelle acceptable. Ajustez le niveau de compression selon l'usage : 70-80% de qualité offre généralement un bon compromis.
Format sans perte, adapté aux images nécessitant de la transparence ou comportant du texte, des graphiques avec des aplats de couleur. Les fichiers sont plus lourds que les JPEG pour les photographies, réservez donc ce format aux cas où il est vraiment nécessaire.
Format moderne développé par Google, offrant une compression supérieure au JPEG et au PNG (environ 25-35% de réduction) avec une qualité équivalente. Supporté par tous les navigateurs modernes, c'est le format à privilégier aujourd'hui.
Format de nouvelle génération encore plus efficient que WebP (jusqu'à 50% plus léger que JPEG). Le support navigateur s'améliore rapidement. Utilisez-le avec WebP en fallback pour une compatibilité maximale.
Format vectoriel idéal pour les logos, icônes et illustrations simples. Les fichiers sont très légers et restent nets à toutes les résolutions. Inadapté aux photographies.
La compression avec perte (lossy) réduit la qualité de l'image pour diminuer la taille du fichier. La compression sans perte (lossless) conserve la qualité originale mais offre moins de réduction. Pour le web, la compression avec perte est généralement préférable car l'œil humain ne perçoit pas la différence à des taux raisonnables.
TinyPNG / TinyJPG : Service en ligne gratuit et efficace pour compresser PNG et JPEG avec une perte de qualité minimale.
Squoosh : Application web de Google permettant de comparer différents formats et niveaux de compression. Très utile pour trouver le meilleur réglage.
ImageOptim (Mac) / FileOptimizer (Windows) : Applications desktop pour compression par lot de nombreuses images.
Plugins CMS : Pour WordPress, des plugins comme ShortPixel, Imagify ou Smush automatisent la compression à l'upload.
Pour une page web standard :
Ne chargez pas une image de 3000 pixels de large si elle s'affiche à 800 pixels. Redimensionnez vos images à la taille maximale d'affichage, en prévoyant une marge pour les écrans Retina (x2 de la taille d'affichage).
Utilisez l'attribut srcset pour servir différentes tailles d'images selon l'écran :
<img src="image-800.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Description de l'image">
Ainsi, les mobiles téléchargent des images plus petites, accélérant le chargement.
L'attribut alt (texte alternatif) est essentiel pour le SEO et l'accessibilité. Il décrit le contenu de l'image pour :
Bonnes pratiques pour l'alt :
Le nom du fichier contribue au SEO de l'image. Utilisez des noms descriptifs avec des mots-clés séparés par des tirets :
Spécifiez toujours les attributs width et height sur vos balises img. Cela permet au navigateur de réserver l'espace nécessaire avant le chargement de l'image, évitant les décalages de mise en page (CLS) qui nuisent aux Core Web Vitals.
<img src="image.jpg" width="800" height="600" alt="Description">
Le lazy loading diffère le chargement des images hors écran jusqu'à ce que l'utilisateur s'en approche en scrollant. Cela accélère le chargement initial de la page.
L'attribut loading="lazy" est supporté par tous les navigateurs modernes :
<img src="image.jpg" loading="lazy" alt="Description">
N'appliquez pas le lazy loading à l'image principale visible au chargement (above the fold). Cette image doit se charger immédiatement car elle contribue au LCP (Largest Contentful Paint). Utilisez plutôt fetchpriority="high" pour accélérer son chargement.
L'optimisation des images doit aussi prendre en compte l'accessibilité, qui est à la fois une obligation légale et une bonne pratique SEO :
Google recommande d'inclure vos images dans le sitemap XML ou de créer un sitemap images dédié. Cela aide Google à découvrir et indexer vos images, particulièrement celles chargées dynamiquement en JavaScript.
<url>
<loc>https://example.com/page.html</loc>
<image:image>
<image:loc>https://example.com/image.jpg</image:loc>
<image:caption>Légende de l'image</image:caption>
</image:image>
</url>
L'optimisation des images s'intègre dans une stratégie SEO technique globale et contribue significativement à la performance de votre site.
WebP est le choix sûr avec un support navigateur quasi universel. AVIF offre une meilleure compression mais son support est plus récent. L'idéal est de proposer les deux avec la balise picture : AVIF en priorité, WebP en fallback, puis JPEG pour les vieux navigateurs.
Oui pour les images porteuses d'information. Pour les images purement décoratives (séparateurs, backgrounds), utilisez un alt vide (alt="") pour indiquer aux lecteurs d'écran de les ignorer. N'omettez jamais complètement l'attribut alt.
Non, tant que l'image reste visuellement de qualité. Google ne pénalise pas les images compressées. Au contraire, des images légères améliorent la vitesse du site, ce qui est un facteur SEO positif.
Un CDN accélère la livraison des images en les servant depuis des serveurs proches de l'utilisateur. Cela améliore la vitesse de chargement et donc indirectement le SEO. C'est recommandé pour les sites à audience internationale.
Utilisez un plugin d'optimisation automatique comme ShortPixel, Imagify ou Smush qui compresse les images à l'upload. Activez également la conversion automatique en WebP. Vérifiez que votre thème gère correctement les images responsives.
Nos experts analysent et optimisent vos images pour améliorer la vitesse de chargement et le référencement de votre site.