Comment optimiser vos images pour votre site web ? Conseils et tutos

Vous gérez un site web B2B et vos pages mettent une éternité à charger ? Il y a de fortes chances que vos images soient les coupables. Photos haute résolution directement sorties de l’iphone — visuels non optimisés pour le web, votre site traîne des boulets numériques de plusieurs mégaoctets. Dans cet article, on vous explique concrètement comment optimiser vos images pour le web, sans sacrifier la qualité visuelle. Et si vous envisagez une refonte plus globale, notre guide pour refondre son site avec le CMS HubSpot vous sera utile.

Les 4 raisons d'optimiser vos images pour le web (spoiler : c'est crucial)

1. Impact sur la vitesse de chargement

Les images représentent en moyenne 60 à 80% du poids d'une page web. Une photo de 5 Mo peut faire passer votre temps de chargement de 2 à 15 secondes. Et devinez ? Après 3 secondes, 40% des visiteurs abandonnent déjà (source : Think with Google).

2. Référencement SEO

Google prend en compte la vitesse de chargement dans son algorithme. Des images lourdes = un site lent = un référencement pénalisé. C'est mathématique.

3. Expérience utilisateur

Un site rapide, c'est un site qui convertit mieux. Les utilisateurs naviguent plus facilement, restent plus longtemps, et sont plus enclins à passer à l'action.

4. Coûts de bande passante

Plus vos images sont lourdes, plus vous consommez de bande passante. Et ça, ça se ressent sur la facture d'hébergement.

Il est donc essentiel de savoir optimiser la vitesse de chargement de son site, et les images sont souvent le premier levier à actionner.

3 formats pour optimiser vos images pour le web

Pour optimiser vos images pour le web, il faut bien choisir le format. Chacun a ses avantages selon l’usage : photo, logo ou web. Voici les trois principaux à connaître.

1. JPEG : le polyvalent

• Utilisation : photos, images complexes avec beaucoup de couleurs.
• Avantages : compression efficace, prise en charge universelle.
• Inconvénients : perte de qualité lors de la compression.
• Quand l'utiliser : pour des présentations numériques et média sociaux.

2. PNG : la qualité avant tout

• Utilisation : images avec transparence, logos, graphiques simples.
• Avantages : qualité préservée, gère la transparence.
• Inconvénients : fichiers plus lourds.
• Quand l'utiliser : pour vos logos, icônes, images avec fond transparent.

3. WebP : le format du futur

• Utilisation : remplacement moderne du JPEG et PNG, pour les sites web.
• Avantages : 25 à 50% plus léger que JPEG, gère la transparence.
• Inconvénients : support limité sur les anciens navigateurs.
• Quand l'utiliser : dès que possible sur votre site web.

Compression d'images : viser les 150 ko max

Pourquoi compresser vos images ?

Une image non compressée, c'est souvent plusieurs mégaoctets qui viennent ralentir votre site. L'objectif à viser : 150 ko maximum par image (avec une marge de ±10%). C'est le poids idéal pour garder une qualité correcte afin d’optimiser vos images pour le web.

Si le poids est légèrement supérieur, pas de panique : c’est un repère.

Notre top recommandation : passer au WebP Le format WebP, c'est 25 à 50% de poids en moins par rapport au JPEG, pour une qualité équivalente. Autant dire que c'est plus facile d'atteindre vos 150 ko avec ce format !

Les 2 méthodes pour compresser efficacement

Méthode 1 : les outils web (rapides et gratuits)

TinyPNG ou Compressor.io : vous uploadez, ils optimisent. Simple, efficace, et souvent suffisant pour atteindre les 150 ko visés.

• Avantages : aucune installation, résultats immédiats.
• Inconvénient : traitement image par image.

Méthode 2 : plugins des outils de design

Depuis vos outils de design, comme Figma, vous pouvez télécharger des plugins gratuits comme le très populaire "TinyImage Compressor", pour compresser automatiquement et exporter dans le format souhaité. Magique, non ?

Dimensionnement : pas de science infuse, mais du bon sens

Contrairement à la compression qui a ses règles claires, le dimensionnement des images dépend de votre contexte spécifique. Voici quelques conseils de dimensionnement afin d’optimiser vos images pour le web.

Pourquoi il n'existe pas de règles fixes

Chaque projet web est unique. Les dimensions d'images dépendent de votre design, de vos types de modules (standards, personnalisés) ou encore de l’usage prévu. Une image dans un module texte-image n'aura pas les mêmes contraintes qu'une image insérée dans une hero d'une page "qui sommes-nous ?".

Les CMS et thèmes varient énormément. WordPress, Prestashop, HubSpot... chacun a ses propres modules avec des ratios et tailles spécifiques. Même au sein d'un CMS, les thèmes imposent leurs propres règles de dimensionnement. D'ailleurs, si vous cherchez un thème HubSpot optimisé dès le départ pour vos images, nos thèmes CMS HubSpot sur-mesure intègrent ces bonnes pratiques nativement.

Le responsive complique la donne. Une image doit s'adapter à tous les écrans : mobile 320px, tablette 768px, desktop 1920px. Impossible d'avoir une taille unique qui fonctionne partout parfaitement.

D'où l'importance de s'appuyer sur ses maquettes ou d'utiliser l'inspecteur pour voir ce que demande réellement votre template !

Respecter vos maquettes graphiques (si vous en avez)

Si vous travaillez avec des maquettes Figma ou Photoshop, c'est simple : respectez les dimensions indiquées. Vos designers ont déjà fait le travail pour indiquer l'affichage prévu.

Pas de maquettes ? Respecter les modules de votre CMS

Chaque CMS a ses propres contraintes. Dans HubSpot par exemple, les modules ont des tailles prédéfinies. Consultez la documentation ou testez directement pour connaître les dimensions optimales.

La technique, utilisez l'inspecteur de votre navigateur :

1. Ouvrez votre site dans Chrome ou Firefox
2. Clic droit > "Inspecter l'élément" sur votre image
3. Regardez la taille réelle d'affichage dans l'onglet "Computed"
4. Adaptez vos images à cette taille

Conseil bonus : depuis votre outil de design, exportez vos visuels en 1,5x dans le format souhaité. Cela garantit une meilleure qualité d’image. Lors de l’intégration dans votre CMS, celui-ci ajustera automatiquement la taille d’affichage tout en préservant la netteté.

Lazy loading : obligatoire pour optimiser vos images pour le web

Au lieu de charger toutes les images d'un coup, le navigateur ne charge que celles visibles à l'écran. Les autres se chargent au fur et à mesure du scroll.

Cette technique vous permet :

• un temps de chargement initial réduit : seules les images en ligne de flottaison se chargent,
• une économie de bande passante : moins de données consommées inutilement,
• une meilleure expérience utilisateur : navigation plus fluide.

Comment s’y prendre ?

Vous pouvez utiliser une implémentation native en HTML (très simple).

Si vous avez accès au code de l’article, ajoutez simplement l’attribut suivant dans la balise <img> : loading="lazy”.

Exemple ci-dessous :
<img src="image.jpg" loading="lazy" alt="Description">

Plugins recommandés si vous n’avez pas accès au code

Si vous ne pouvez pas modifier directement le code HTML de vos articles ou pages, vous pouvez activer le lazy loading via des plugins. Voici quelques options fiables pour WordPress :

• LazyLoad by WP media
• a3 Lazy Load
• Smush

Ces plugins se chargent d’appliquer automatiquement le loading="lazy" à toutes vos images, sans toucher au code, ce qui améliore le temps de chargement de vos pages et l’expérience utilisateur.

Bonus : ajoutez une balise Alt sur vos images

Pour aller plus loin dans l’optimisation de vos images et renforcer votre SEO, on vous recommande d’ajouter la balise alt de vos images. Deux options s'offrent à vous :

• Dans le code HTML :

<img src="produit-xyz.jpg" alt="Smartphone noir avec écran 6 pouces">

• Directement dans votre CMS : sur HubSpot, cliquez sur votre image puis allez dans les "Options" pour remplir le champ "Alt text". Plus simple et accessible à tous !

Les 3 métriques clés pour suivre l’impact de vos images

Pour évaluer si vos optimisations portent leurs fruits, suivez ces métriques via des outils fiables :

• Google PageSpeed Insights : analyse gratuite avec recommandations.
• Lighthouse (Chrome DevTools) : Intégré à votre navigateur, idéal pour tester n’importe quelle page.

Voici les 3 métriques essentielles pour suivre l’impact de vos images :

1. Temps de chargement total – vitesse globale de la page,
2. Largest Contentful Paint (LCP) – l’un des Core Web Vitals, mesure l’affichage du plus gros élément visible,
3. Poids total des images – plus elles sont légères, plus la page se charge vite,

Optimiser vos images pour le web, c’est un investissement qui rapporte gros : un site plus rapide, un meilleur SEO, des utilisateurs satisfaits. Bonne nouvelle : ce n’est pas si compliqué. Quelques optimisations bien ciblées suffisent à diviser par 3 ou 4 le poids de vos pages… sans perdre en qualité visuelle.

Et l'accessibilité digitale dans tout ça ? Avec les nouvelles normes 2025, c'est le moment d'anticiper. Découvrez tous nos conseils dans notre article dédié.