Publié le 12/10/2026 par Pauline e-commerce seo contenu performance

Optimiser les images pour votre site web : 9 conseils à suivre pour ne pas alourdir votre site

Article de blog comment optimiser les images pour son site internet

Sur un site web ou une boutique en ligne, les visuels sont indispensables : ils mettent en valeur vos produits, illustrent vos contenus et assoient votre image de marque. Pourtant, les images constituent souvent un piège silencieux. En moyenne, elles représentent entre 50 % et 70 % du poids total d’une page web¹ et restent la première cause de lenteur d’affichage².

Cela peut paraître anodin, mais un site alourdi par des fichiers trop volumineux entraîne une cascade de conséquences négatives : temps de chargement à rallonge, visiteurs qui quittent la page prématurément, baisse des conversions et pénalités de référencement de la part des moteurs de recherche.

Aujourd’hui, l’enjeu est double pour votre site : vous devez répondre aux exigences de vitesse imposées par les Core Web Vitals de Google tout en préparant la structure de vos fichiers pour les nouveaux moteurs de recherche basés sur l’intelligence artificielle (Generative Engine Optimization ou GEO).

Comment faire en sorte que vos images deviennent un véritable levier de performance plutôt qu’un poids mort ?
👉 Suivez le guide, on vous explique !

Pourquoi vos images plombent-elles la vitesse et les conversions de votre site ?

Lorsqu’un visiteur arrive sur votre site, chaque milliseconde compte. Les analyses de performance montrent qu’un simple retard de 100 millisecondes lors de l’affichage peut faire chuter votre taux de conversion global de 7 %.

Pour juger de la qualité d’expérience que vous offrez à vos utilisateurs, Google s’appuie sur trois indicateurs clés appelés les Core Web Vitals. Et la gestion des images influe directement sur :

Le Largest Contentful Paint (LCP) : il mesure le temps nécessaire pour afficher le plus grand élément visible à l’écran, qui est presque toujours votre image d’en-tête (hero image) ou la photo principale d’une fiche produit. Pour obtenir le feu vert de Google, votre LCP doit s’exécuter en moins de 2,5 secondes¹.
Le Cumulative Layout Shift (CLS) : il mesure la stabilité visuelle de votre page⁴. Pour offrir une navigation fluide, votre score doit rester sous le seuil de 0,1.
L’Interaction to Next Paint (INP) : axé sur la réactivité de la page lors d’un clic (qui doit rester sous 200 millisecondes), il est, lui aussi, indirectement ralenti lorsque le processeur de l’appareil est saturé par le décodage d’images géantes⁴.

✨ La bonne nouvelle ? Réduire le poids de vos visuels sans altérer leur qualité est l’action qui offre le plus fort retour sur investissement (ROI) pour accélérer votre site.

Conseil 1 : choisir la bonne image

Cela peut sembler évident, mais un visuel inadapté peut envoyer un signal totalement opposé à votre message initial.

Dans la mesure du possible, évitez les banques d’images génériques et privilégiez des photos authentiques et uniques. Google valorise les contenus originaux et vos visiteurs vous accorderont bien plus facilement leur confiance. Si votre budget le permet, investir dans un shooting professionnel reste une excellente démarche. Sinon, munissez-vous de votre smartphone : avec un peu de soin, le tour est joué !

💡 PS : N’oubliez pas le crédit photo lorsque vous utilisez une image ! C’est un oubli qui peut coûter cher. Les banques d’images libres de droits vous proposent souvent de mentionner l’auteur ; à défaut, vous pouvez indiquer le nom du site d’où provient l’image.

Conseil 2 : redimensionner ses images aux bonnes dimensions (en pixels)

L’erreur la plus fréquente consiste à télécharger une image directement depuis une banque d’images (Canva, Unsplash, Freepik) ou un appareil photo, avec une largeur de 4000 ou 5000 pixels, alors qu’elle sera affichée dans un cadre de 800 pixels sur le site. Votre serveur force alors le navigateur de vos visiteurs à télécharger un fichier gigantesque pour le rapetisser artificiellement à l’écran.

Avant d’importer une photo dans votre CMS, redimensionnez-la aux dimensions exactes d’affichage sur votre site.

Grande bannière d’en-tête (hero image) : 1600 px à 1920 px de large maximum.
Image d’illustration d’article de blog ou fiche produit : 800 px à 1200 px de large.
Vignette / Miniature / Image secondaire : 300 px à 500 px de large.

💡 Outils gratuits sans code : vous pouvez redimensionner vos images en deux clics avec des outils simples comme Canva ou Squoosh.app.

Conseil 3 : compresser et alléger le poids (en Ko) avant l’import

La dimension (les pixels) et le poids (les kilo-octets ou mégaoctets) sont liés, mais ce que le navigateur télécharge réellement, ce sont les octets ! Une image brute sortie d’appareil photo peut peser 5 Mo (5 000 Ko), alors qu’une image web optimisée doit peser moins de 300 Ko.

Les objectifs de poids à cibler :

Bannière d’accueil : moins de 200 à 300 Ko.
Image standard (produit, article) : entre 50 Ko et 100 Ko.
Icônes et pictogrammes : moins de 20 Ko.

Comment réduire le poids d’une image facilement ?

Là encore, vous pouvez utiliser les mêmes outils. Squoosh.app est une bonne option pour à la fois redimensionner votre image, la compresser, mais aussi la télécharger au format souhaité.

Conseil 4 : utiliser le bon format

Conserver vos images d’origine au format JPEG ou PNG brut est l’une des erreurs les plus fréquentes. Les formats modernes permettent de réduire la taille des fichiers sans altération visuelle pour vos visiteurs.

Format	Gain de Poids vs JPEG	Compatibilité navigateurs	Quand l’utiliser ?
JPEG	Baseline (0 %)	100 %	Format d’origine uniquement. À proscrire pour la livraison directe.
PNG	Sans perte⁶	100 %	Images nécessitant une transparence complexe ou des tracés nets⁶.
WebP	25 % à 35 % plus léger¹	~97,5 %	Standard universel à utiliser pour remplacer systématiquement le JPEG et le PNG¹.
AVIF	Jusqu’à 50 % plus léger⁴	~94 %	Idéal pour les bannières haute définition et photos de produits e-commerce⁴.
SVG	Vectoriel⁶	100 %	Logos, icônes, boutons et pictogrammes d’interface⁶.

💡 Le format WebP est aujourd’hui le nouveau standard.

Conseil 5 : renommer le fichier

Avant l’import, ne téléchargez pas votre image nommée “image-produit1-compress” ou “IMG_9482.JPG” ou encore “Capture-ecran-2026.png”.

Renommez votre fichier sur votre ordinateur avant de l’importer dans votre CMS.

➡️ Mauvais exemple : photo1.jpg
➡️ Bon exemple : sac-a-dos-voyage-impermeable-noir.jpg

💡 Conseils :

Utilisez des mots en minuscules ;

Séparez les mots par des tirets “-” et pas “_” ;

Ne mettez pas d’accent, ni de caractères spéciaux ;

Positionnez toujours vos visuels à proximité directe du texte auquel ils se rapportent.

Conseil 6 : rédiger des balises “Alt” pour vos images (un vrai levier SEO & GEO)

La balise Alt (ou « Texte alternatif ») est importante pour le référencement naturel (SEO) et pour la visibilité sur les moteurs de recherche basés sur l’IA (GEO – Generative Engine Optimization).

Lors de l’import dans votre CMS (Shopify, WordPress, PrestaShop), un champ nommé « Texte alternatif » ou « Balise ALT » vous est systématiquement proposé. Cette balise sert à décrire l’image et est particulièrement importante pour l’accessibilité. En effet, les personnes ne pouvant pas voir votre image ont la possibilité de savoir à quoi correspond l’image grâce à la balise “alt”.

Comment rédiger une balise alt ?

Décrivez l’image, telle que vous la voyez.
Intégrez votre mot clé sans forcing (keyword stuffing interdit #bourrage de mots-clés)

Pourquoi c’est capital pour l’IA (GEO) ?

Les moteurs d’intelligence artificielle (ChatGPT, Perplexity, Gemini, Google AI Overviews) utilisent des modèles multimodaux pour comprendre simultanément le texte et les images. L’IA lit votre balise Alt pour vérifier que votre photo apporte une preuve visuelle crédible par rapport à la question posée par l’internaute. Un texte alternatif précis augmente considérablement les chances que votre produit soit cité en référence dans les réponses générées par les IA.

Conseil 7 : prioriser l’image principale (LCP)

Pour respecter les critères de performance de Google, notamment le Largest Contentful Paint (LCP), il est recommandé d’ajouter l’attribut fetchpriority=«high» à votre image principale. Cela indique au navigateur de prioriser le téléchargement de ce visuel, situé tout en haut de la page, avant les autres ressources non essentielles.

Évitez également d’appliquer le lazy-loading (loading=«lazy») à cette image. Le chargement différé oblige le navigateur à attendre le calcul complet de la mise en page avant de lancer la requête, ce qui retarde l’affichage et pénalise votre score LCP.

💡 Enfin, ne combinez jamais les attributs loading=«lazy» et fetchpriority=«high» sur un même élément : ces instructions sont contradictoires et nuisent à l’optimisation.

Conseil 8 : différer le chargement de toutes les images situées sous la ligne de flottaison

Si votre image d’en-tête doit s’afficher instantanément, la règle est différente pour les images situées plus bas sur votre page.

Pour toutes les images que l’internaute ne voit pas dès son arrivée (galeries de produits, photos d’articles de blog, images du pied de page), il est recommandé d’utiliser le chargement différé natif en ajoutant l’attribut loading=«lazy». Cette simple action permet d’économiser jusqu’à 60 % de la bande passante initiale et libère la connexion pour charger rapidement les éléments prioritaires.

Conseil 9 : utiliser des images adaptatives

Vous lisez un article et le texte descend subitement de trois lignes parce qu’une image au-dessus vient d’apparaître. Ce n’est pas super agréable, mais surtout, cela peut provoquer des clics involontaires.

Ceci est mesuré par un indicateur nommé : CLS (Cumulative Layout Shift). Il calcule l’ampleur de ces décalages visuels. Un score inférieur à 0,1 garantit une page stable.

Pour éviter ça, deux solutions sont possibles :

Renseigner les attributs width et height directement dans la balise (par exemple : <img src= ”photo.jpg” width=”800” height=”600”>).

En lisant ces chiffres, le navigateur calcule immédiatement les proportions de l’image. Il garde un rectangle vide exact dans la page avant même d’avoir téléchargé l’image. Le texte autour s’installe tout de suite au bon endroit et ne bouge plus.

Fournir plusieurs versions de la même image (petite, moyenne, grande) via les attributs srcset et sizes.

Un smartphone n’a pas besoin d’une image haute-définition de 2000 pixels de large. Grâce à ces attributs, le téléphone télécharge uniquement la version de 400 pixels. La page charge plus vite et l’utilisateur économise ses données mobiles.

La checklist pour optimiser vos images pour votre site web

☑️ Sélection du visuel

Privilégier une photo authentique plutôt qu’une image de banque générique.
Intégrer le crédit photo.

☑️ Dimensions et poids

Redimensionner votre image.
Compresser pour atteindre le poids cible avec des outils comme Squoosh ou Canva.

☑️ Format de fichier

Convertir en WebP par défaut pour remplacer JPEG et PNG.
Réserver l’AVIF pour les bannières HD/e-commerce, le SVG pour les logos/icônes, et le PNG uniquement pour la transparence complexe.

☑️ Nommage et SEO / GEO

Renommer le fichier sur l’ordinateur avant l’import : minuscules, mots séparés par des tirets « – », sans accents ni caractères spéciaux (ex. : sac-a-dos-impermeable.jpg).
Rédiger une balise Alt descriptive intégrant le mot-clé naturellement (sans bourrage).
Placer le visuel à proximité directe du texte auquel il se rapporte.

☑️ Intégration et performance web (LCP / CLS)

Image principale (haut de page / LCP) : ajouter l’attribut fetchpriority=”high” et ne pas activer le chargement différé (loading=”lazy”).
Images sous la ligne de flottaison : ajouter l’attribut loading=”lazy”.
Stabilité visuelle : renseigner systématiquement les attributs width et height dans la balise (ou utiliser srcset / sizes).

En résumé, l’optimisation de vos visuels est une étape technique indispensable : des images trop lourdes dégradent à la fois votre positionnement sur les moteurs de recherche et la fluidité de navigation de vos internautes. L’image est véritablement au carrefour de ces deux enjeux. Pour aller plus loin dans cette logique globale, découvrez comment combiner SEO et UX pour obtenir un site web performant à tous les niveaux.

Vous avez besoin de conseils pour aller plus loin avec votre site e-commerce ?

L’équipe Kiwik est à votre écoute !

Contacter nos experts

Sources :

Image : Canva images