Optimiser les images d’un site web de PME ne consiste pas à rendre les photos moins belles. Il s’agit d’envoyer des fichiers adaptés à l’écran et au rôle de chaque image. Une photo de projet, un portrait d’équipe ou une image de produit peut soutenir la confiance. Si elle est trop lourde ou inutilement grande, elle peut toutefois ralentir la page et rendre le contact plus difficile sur un téléphone.
Commencer par le rôle de chaque image
Avant de convertir des fichiers, faites la différence entre les images indispensables et les images décoratives. L’image principale qui situe votre offre mérite une attention particulière. Les photos plus bas dans une galerie peuvent être chargées plus tard. Les icônes simples peuvent parfois être des vecteurs, tandis que les photos doivent rester des fichiers optimisés.
| Type d’image | Priorité | Décision utile |
|---|---|---|
| Image du premier écran | Élevée | Préparer une taille adaptée, avec dimensions définies |
| Photo de service ou de projet | Moyenne | Utiliser une version proportionnée à son conteneur |
| Galerie secondaire | Plus faible | Charger au besoin plutôt que tout au départ |
| Logo ou icône simple | Selon le cas | Préférer un format vectoriel ou une petite image nette |
web.dev rappelle que les images sont souvent parmi les ressources les plus lourdes d’une page. Le dimensionnement adapté, les formats efficaces et le chargement différé des images hors écran peuvent réduire les données transférées et aider le navigateur à prioriser le contenu visible. 1
Préparer les bonnes dimensions
Une image affichée dans un bloc de 500 pixels n’a pas toujours besoin d’être envoyée dans une largeur immense. Toutefois, les écrans à haute densité ont besoin de plus de détails qu’un écran standard. La solution n’est pas de livrer le même fichier géant à tout le monde. Les attributs srcset et sizes permettent au navigateur de choisir parmi des versions adaptées au contexte. 1
Définissez aussi la largeur et la hauteur attendues dans le code lorsque cela est possible. Cette simple information aide à préserver la stabilité de la mise en page pendant le chargement.
Choisir un format avec discernement
Les formats modernes comme WebP et AVIF peuvent offrir une meilleure compression que JPEG ou PNG dans plusieurs cas. 1 Cela ne veut pas dire qu’un format unique convient à tout. Testez une photo à différentes qualités, vérifiez le rendu des couleurs, des textures et du texte intégré à l’image. Une compression trop agressive peut produire des artefacts visibles, surtout sur les zones avec des bords nets ou du texte.
Gardez une image d’origine bien classée. L’équipe pourra ainsi créer de nouvelles versions sans repartir d’un fichier déjà trop compressé. Documentez également les droits d’utilisation et les crédits nécessaires.
Vérifier l’effet sur le parcours client
Après optimisation, ne regardez pas seulement le poids des fichiers. Vérifiez la page sur téléphone avec une connexion normale. L’image principale arrive-t-elle sans déplacer les boutons ? Le formulaire reste-t-il accessible ? La galerie peut-elle être consultée sans bloquer la page ? Google associe les Core Web Vitals à la performance de chargement, à la réactivité et à la stabilité visuelle. 2
Pour prioriser les images, le contenu et les pages les plus importantes, commencez par le Project Fit. Notre guide sur quand refaire un site web de PME vous aide aussi à distinguer un correctif ciblé d’une refonte plus large.