Technologie

Optimiser les images de votre site web : guide complet

Comment optimiser les images pour un site rapide et bien référencé. Formats, compression, lazy loading et alt text pour PME suisses.

23 avril 2026 · tacelo

Les images représentent en moyenne 50 à 60 % du poids total d’une page web. Elles sont la première cause de lenteur sur la grande majorité des sites de PME. Et pourtant, leur optimisation reste l’une des interventions les plus négligées — et les plus rentables — que l’on puisse faire sur un site.

Ce guide vous explique comment choisir le bon format, compresser intelligemment, implémenter le lazy loading et soigner vos textes alternatifs, sans sacrifier la qualité visuelle.

Pourquoi les images ralentissent votre site

Un site lent pénalise votre référencement et fait fuir vos visiteurs. Sur mobile, 53 % des utilisateurs abandonnent une page qui met plus de 3 secondes à se charger (Google). Les images non optimisées sont responsables de la majorité de ces délais — les chiffres sur l’impact de la vitesse de chargement montrent à quel point cela affecte directement vos conversions.

Le problème le plus courant : une photo de produit ou de chantier chargée directement depuis un appareil photo, sans redimensionnement ni compression. Un fichier JPEG brut peut peser 5 à 10 Mo. Converti et compressé correctement, le même visuel peut descendre à 60 à 100 Ko — soit 50 à 100 fois moins — sans différence perceptible à l’écran.

Les images influencent aussi directement deux métriques Core Web Vitals surveillées par Google :

LCP (Largest Contentful Paint) : souvent déclenché par l’image principale de la page.
CLS (Cumulative Layout Shift) : causé par des images sans dimensions déclarées, qui provoquent des décalages de mise en page pendant le chargement.

Choisir le bon format d’image

Le choix du format est la première décision à prendre. Chaque format a ses forces et ses cas d’usage.

JPEG

Le JPEG est adapté aux photographies et aux visuels avec dégradés de couleurs. Il utilise une compression avec pertes, ce qui signifie que des détails sont éliminés de façon irréversible. Bien réglé, la perte de qualité est invisible. C’est encore un format très répandu, mais il n’est plus le meilleur choix disponible.

PNG

Le PNG utilise une compression sans pertes et supporte la transparence. Il convient aux logos, icônes, illustrations avec aplats de couleurs et captures d’écran avec texte net. Sur des photographies, le PNG produit des fichiers beaucoup plus lourds que le JPEG sans apport visible de qualité — évitez ce cas d’usage.

WebP

Le WebP est le format moderne recommandé pour le web. Développé par Google, il offre une compression entre 25 et 35 % supérieure au JPEG, supporte la transparence (comme le PNG) et la compression sans pertes. Il est pris en charge par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). En 2026, il n’y a quasiment plus de raison de livrer du JPEG ou du PNG sur un site web quand WebP est disponible.

AVIF

L’AVIF est le successeur du WebP : sa compression est encore plus efficace (jusqu’à 50 % plus légère que le JPEG à qualité équivalente). La prise en charge navigateur est désormais très bonne, mais l’encodage est plus lent. Pour les projets qui peuvent se permettre un pipeline de génération d’images plus lourd, AVIF offre les meilleurs résultats en termes de poids.

Quel format choisir en pratique ?

Photographies et visuels : WebP (ou AVIF si votre pipeline le supporte).
Logos, icônes, illustrations vectorielles : SVG de préférence, ou PNG si le SVG n’est pas disponible.
Images avec transparence : WebP (évitez le PNG sauf contrainte spécifique).
Animations légères : WebP animé ou vidéo MP4 (plus efficace que les GIF).

Compression : trouver le bon équilibre

La compression réduit le poids d’un fichier en éliminant des données, de façon irréversible (compression avec pertes) ou réversible (compression sans pertes).

Compression avec pertes (lossy)

Elle supprime des données imperceptibles à l’oeil humain pour réduire significativement le poids du fichier. Le paramètre clé est le niveau de qualité, souvent exprimé de 0 à 100.

Le point idéal se situe entre 75 et 80 pour la plupart des photographies en WebP. En dessous, des artefacts visuels apparaissent (flou, blocs de couleur). Au-dessus, le gain de qualité est marginal mais le poids du fichier augmente sensiblement.

À qualité 80 en WebP, une photo de 4 Mo peut descendre à 80-120 Ko. C’est ce rapport que vous devez viser.

Compression sans pertes (lossless)

Elle réduit le poids sans supprimer aucune donnée — le fichier reconstruit est identique à l’original. La réduction de taille est plus modeste (15 à 30 % selon le cas). Elle convient aux logos, graphiques et images où la précision des détails est critique.

Taille de l’image avant compression

La compression agit sur un fichier déjà redimensionné. Si vous affichez une image à 800 px de large sur votre site, il n’y a aucune raison de charger un fichier de 3000 px de large. Le redimensionnement au bon format est souvent plus impactant que la compression elle-même.

Images responsives avec srcset et sizes

Un visiteur sur smartphone n’a pas besoin de la même résolution qu’un visiteur sur écran 4K. L’attribut srcset permet de proposer plusieurs versions d’une image selon la résolution et la taille d’écran du visiteur — le navigateur choisit automatiquement la version appropriée.

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Description de l'image"
  width="800"
  height="533"
  loading="lazy"
/>

L’attribut sizes indique au navigateur la largeur d’affichage prévue de l’image selon le contexte, ce qui lui permet de télécharger uniquement la version nécessaire. Sur un mobile à 390 px de large, il ne charge pas l’image à 1200 px — il charge la version à 400 px, qui est trois fois plus légère. Cette pratique est d’autant plus importante que plus de 83 % du trafic web provient aujourd’hui des smartphones.

Lazy loading : ne charger que ce qui est visible

Par défaut, un navigateur charge toutes les images d’une page dès son ouverture, même celles situées tout en bas, que l’utilisateur ne verra peut-être jamais. Le lazy loading (chargement différé) corrige ce comportement.

L’implémentation est minimale — un seul attribut HTML suffit :

<img src="image.webp" alt="Description" loading="lazy" />

Le navigateur ne charge alors l’image que lorsqu’elle approche de la zone visible. Les résultats sont immédiats : les images critiques (en haut de page) se chargent plus vite, le poids initial de la page diminue, et l’expérience sur connexion lente s’améliore nettement.

Attention : n’appliquez pas le lazy loading à l’image principale visible au premier chargement (hero image, logo). Utilisez loading="eager" ou omettez l’attribut pour ces images — elles doivent se charger immédiatement pour un bon LCP.

Texte alternatif (alt) : SEO et accessibilité

L’attribut alt d’une image sert deux objectifs distincts mais également importants.

Pour l’accessibilité

Les lecteurs d’écran utilisés par les personnes malvoyantes lisent le texte alternatif à la place de l’image. Un alt vide ou absent rend votre contenu visuel inaccessible. En Europe, la directive sur l’accessibilité numérique (European Accessibility Act) entre en vigueur progressivement et concerne les entreprises proposant des services en ligne.

Pour le SEO

Google ne “voit” pas les images — il lit leur texte alternatif. Un alt bien rédigé contribue à l’indexation de votre page sur des requêtes pertinentes, notamment en recherche d’images.

Bonnes pratiques :

Décrivez le contenu réel de l’image en une phrase courte et précise.
Intégrez un mot-clé pertinent si cela est naturel — pas de bourrage.
Évitez les formules génériques comme “image”, “photo” ou “illustration”.
Pour les images purement décoratives, utilisez alt="" (vide, mais présent) afin que les lecteurs d’écran les ignorent.

Exemple : au lieu de alt="photo", préférez alt="Façade du restaurant Le Vieux-Moulin à Sion après rénovation".

Déclarer les dimensions pour éviter le CLS

Le Cumulative Layout Shift est l’une des métriques Core Web Vitals les plus fréquemment dégradées par les images. Le problème se produit lorsque le navigateur ne connaît pas les dimensions d’une image avant de la charger : il réserve zéro espace, puis la page “saute” lorsque l’image s’affiche, déplaçant tout le contenu autour.

La solution est simple : déclarez toujours les attributs width et height sur chaque balise <img>.

<img src="chantier.webp" alt="Chantier de rénovation à Martigny" width="1200" height="800" loading="lazy" />

Ces valeurs n’empêchent pas le CSS de redimensionner l’image de façon responsive — elles indiquent simplement au navigateur le ratio de l’image pour qu’il puisse réserver l’espace correct dès le départ.

Outils pour optimiser vos images

Squoosh (squoosh.app)

Outil en ligne gratuit de Google. Il permet de convertir des images en WebP ou AVIF, de régler le niveau de qualité avec prévisualisation en temps réel, et de comparer le résultat avant/après. Idéal pour les optimisations manuelles ponctuelles.

TinyPNG / TinyJPG (tinypng.com)

Compression en ligne rapide pour les formats PNG et JPEG. L’interface est simple, le résultat fiable. La version gratuite traite jusqu’à 20 images simultanément. Utile pour les équipes sans accès à des outils de développement.

sharp (npmjs.com/package/sharp)

Bibliothèque Node.js pour le traitement d’images en ligne de commande ou dans un pipeline de build. C’est l’outil de référence pour automatiser la conversion en WebP, la génération de versions srcset et la compression à grande échelle. Intégré nativement dans de nombreux frameworks modernes dont Astro.

ImageOptim (imageoptim.com)

Application macOS pour la compression sans pertes de JPEG, PNG et GIF. Traitement par lot par glisser-déposer, sans perte de qualité visible.

CDN pour la distribution des images

Un CDN (Content Delivery Network) distribue vos fichiers sur des serveurs répartis géographiquement. Lorsqu’un visiteur charge votre site depuis Genève, il reçoit les images depuis un serveur en Suisse ou en Europe de l’Ouest — pas depuis un serveur unique potentiellement situé en Amérique du Nord.

Pour les images spécifiquement, certains CDN proposent de la transformation à la volée : ils redimensionnent, convertissent au format WebP et compriment l’image automatiquement en fonction du navigateur et de l’appareil du visiteur. Cloudflare Images, Cloudinary et Bunny.net offrent ce type de service. C’est une solution efficace pour les sites gérant de grands volumes d’images sans pipeline de build automatisé.

Ce que Tacelo fait pour chaque site

L’optimisation des images n’est pas une étape optionnelle dans notre process — c’est une contrainte appliquée systématiquement.

Toutes les images sont converties en WebP avant mise en ligne, quelle que soit leur source d’origine.
La compression est appliquée à un niveau de qualité de 75 à 80, vérifié visuellement sur chaque visuel.
Chaque balise <img> reçoit les attributs width et height corrects pour éliminer le CLS.
Le lazy loading est activé sur toutes les images situées hors de la zone visible au premier chargement.
Les images hero (visibles dès l’ouverture de la page) sont préchargées avec <link rel="preload"> pour maximiser le LCP.
Les textes alternatifs sont rédigés en français, descriptifs et intègrent les mots-clés pertinents pour le référencement local.
Les sites sont déployés sur CDN, garantissant des temps de livraison rapides depuis toute la Suisse.

Le résultat : un score PageSpeed entre 90 et 100 sur mobile, et des images qui ne ralentissent pas le référencement de nos clients.

Questions fréquentes

Dois-je convertir toutes mes images existantes en WebP ?

Oui, si vous cherchez à améliorer la performance de votre site. La conversion est irréversible (conservez les originaux), mais le gain est immédiat et significatif. Pour un site avec de nombreuses images, un outil comme sharp ou un service de conversion en lot (Cloudinary, Squoosh en mode batch) permet d’automatiser le travail. Priorisez les images les plus lourdes et celles situées en haut de page — elles ont le plus d’impact sur le LCP.

Le lazy loading nuit-il au référencement Google ?

Non. Googlebot supporte le lazy loading natif (loading="lazy") depuis plusieurs années et indexe correctement les images ainsi chargées. En revanche, si vous utilisez un lazy loading personnalisé basé sur JavaScript, assurez-vous que Google peut exécuter ce script — une mauvaise implémentation peut effectivement empêcher l’indexation. La solution la plus sûre reste l’attribut HTML natif.

Quelle taille maximale viser pour une image sur un site web ?

Une bonne règle : moins de 100 Ko pour une image standard (contenu, illustration), moins de 200 Ko pour une image pleine largeur (hero, bannière). Ces seuils sont atteignables en WebP à qualité 75-80 pour la grande majorité des photographies. Les images vectorielles (SVG) restent généralement sous les 10 Ko et n’ont pas les mêmes contraintes. Si une image dépasse ces seuils après optimisation, vérifiez d’abord ses dimensions en pixels — elle est probablement trop grande pour la taille d’affichage prévue.