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 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).
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.
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.
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.
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.
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 !
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.
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 ?
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.
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 !
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.
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 :
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é.
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 :
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">
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 :
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.
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 :
<img src="produit-xyz.jpg" alt="Smartphone noir avec écran 6 pouces">
Pour évaluer si vos optimisations portent leurs fruits, suivez ces métriques via des outils fiables :
Voici les 3 métriques essentielles pour suivre l’impact de vos images :
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é.