Comment optimiser les images pour le web : Les 9 conseils à suivre

1) Choisir les bons formats 

L'utilisation du bon format d’image est primordiale pour garantir un équilibre entre qualité visuelle et performance. Parmi les formats modernes à privilégier : 

• WebP : ce format est recommandé par Google pour sa capacité à compresser les images tout en maintenant une haute qualité. Il offre de meilleurs taux de compression que les formats traditionnels comme le JPEG ou PNG. 
  Malgré ses avantages, il est encore sous-utilisé par les sites web, alors qu’il peut véritablement accélérer les temps de chargement. C’est le format que notre agence utilise et nous en sommes super satisfaits : il nous aide à offrir à nos utilisateurs et ceux de nos clients la meilleure expérience possible. 
• SVG : pour les images vectorielles (logos, icônes, illustrations), le format SVG est idéal. Il est léger et évolutif, ce qui signifie qu’il conserve une qualité optimale quelle que soit la taille de l’écran. 

Choisir le bon format d’image, en fonction des usages et besoins de vos prospects, est la première étape vers une optimisation réussie. 

2) Compresser les images 

La compression permet de réduire la taille des fichiers image sans affecter visuellement leur qualité. Elle est cruciale pour limiter la bande passante utilisée par vos visiteurs lors du chargement d'une page. 

Dans le cadre d’un développement web avec des frameworks comme Symfony, des outils automatisés peuvent être mis en place pour compresser les images avant même qu’elles ne soient téléchargées sur le site. De nombreux plugins existent également pour d’autres CMS comme WordPress, facilitant cette tâche. 

Vous pouvez également consulter notre article pour apprendre à compresser une vidéo. 

3) Redimensionner les images 

L’erreur classique est de télécharger des images trop grandes pour l'usage prévu. Par exemple, une photo de 2000 pixels de large ne sera jamais affichée en pleine taille sur un écran mobile. Il est donc essentiel de redimensionner vos images pour qu’elles correspondent à l’usage prévu, réduisant ainsi la taille du fichier. 

Afin d’optimiser au mieux les images de son site web, les développeurs peuvent automatiser cette tâche en générant différentes tailles d'images en fonction des types d’écrans, ou via des techniques comme l'Adaptive Images ou l'Art Direction. Cela répondra aux besoins de chaque utilisateur. 

4) Utiliser des images responsives 

Les images responsives s’adaptent automatiquement à la taille de l’écran de l’utilisateur. Le HTML5 offre une balise <picture> qui permet de spécifier plusieurs sources d'images, chacune adaptée à une résolution d’écran spécifique. 

Ainsi, les utilisateurs mobiles ne chargent pas des images aussi lourdes que celles destinées aux ordinateurs de bureau, optimisant à la fois la vitesse et l’expérience utilisateur. 

5) Activer le lazy loading

Le lazy loading consiste à ne charger les images qu'au moment où elles sont réellement visibles à l’écran. Cela permet de réduire le temps de chargement initial de la page, car seules les images visibles sont téléchargées. Cette technique est particulièrement efficace sur les pages longues, ou les pages avec beaucoup d’images, comme les galeries. 

La plupart des navigateurs modernes prennent désormais en charge cette fonctionnalité nativement, il suffit donc d’ajouter l’attribut loading="lazy" à vos balises <img>. 

6) Optimiser l'accessibilité des images

Optimiser des images pour un site web ne concerne pas uniquement la performance, cette optimisation doit aussi tenir compte de l’accessibilité. 

Ajouter des attributs alt aux images est non seulement essentiel pour les utilisateurs malvoyants, mais cela contribue aussi au SEO. Les descriptions textuelles permettent aux robots crawlers des moteurs de recherche, ceux qui vont analyser votre site, de mieux comprendre le contenu de l’image. 

Veillez à ce que chaque image ait un texte alternatif descriptif clair et pertinent. Évitez d’utiliser l'attribut alt pour les images purement décoratives, car cela peut conduire à une sur-optimisation qui serait, à l’inverse, pénalisée par Google. 

7) Utiliser un CDN

Un CDN (Content Delivery Network) permet de distribuer le contenu de votre site à travers un réseau mondial de serveurs. Cela réduit la distance physique entre l’utilisateur et le serveur, ce qui diminue la latence et accélère le chargement des images. 

Un CDN est particulièrement utile pour les sites avec des visiteurs internationaux, car il garantit une performance constante, quelle que soit leur localisation. 

N’hésitez pas à vous renseigner auprès de votre hébergeur et choisir le package adapté à vos besoins.  

8) Optimiser les vignettes 

Les vignettes (ou thumbnails) sont souvent utilisées pour les galeries ou les pages de catégories. Bien qu’elles soient petites, elles peuvent ralentir le site si elles ne sont pas correctement optimisées. 

Il est conseillé de compresser fortement les vignettes : si elles sont généralement de plus petite taille, c’est qu’elles sont de faible importance visuelle. De plus, assurez-vous que les balises alt des vignettes ne soient pas dupliquées avec celles des images en pleine taille, pour éviter les pénalités de Google liées au duplicate content. 

9) Tester et surveiller régulièrement les performances des images

Une fois que vous avez appliqué toutes ces recommandations et optimisé les images de votre site web, il est important de surveiller régulièrement la performance de vos images. 

Des outils comme Google PageSpeed Insights, GTMetrix ou encore Centri peuvent vous aider à analyser la vitesse de votre site et à identifier les améliorations potentielles. 

Le test de vos images doit être récurrent, surtout si vous et/ou vos équipes ajoutez régulièrement de nouveaux visuels à votre site. En optimisant en continu, vous garantissez à la fois une meilleure expérience utilisateur et une performance optimale sur le long terme. 

Si vous ne disposez pas en interne d’équipes de développeurs et d’experts web, ou que celles-ci sont déjà prises par de nombreux projets, nous vous conseillons deux options : 

• Utiliser un CMS conçu pour optimiser facilement vos performances, comme GaufreCMS.io sous l’environnement Symfony. Ses outils intégrés convertissent les images en WebP, les compresse et les met directement au bon format. 
• Faire appel à une agence spécialisée en développement et en webmarketing. De l’audit à l’optimisation, en passant par la maintenance, les équipes pluridisciplinaires sont un atout pour votre site web.