Comment optimiser ses images
pour le web et le SEO

Le format que vous choisissez a le plus grand impact sur la taille du fichier et la qualite. Les formats modernes produisent des fichiers considerablement plus petits a qualite visuelle equivalente par rapport aux standards anciens. Voici quoi utiliser et quand.

L'approche ideale est de servir plusieurs formats en utilisant l'element HTML <picture>. Proposez l'AVIF en premier, le WebP en secours, et le JPEG en dernier recours. Le navigateur choisira automatiquement le meilleur format qu'il supporte.

La compression reduit la taille du fichier en supprimant des donnees que l'oeil humain ne peut pas facilement percevoir. L'enjeu est de trouver le point d'equilibre ou la taille baisse significativement tout en gardant une qualite visuellement identique a l'original.

Il existe deux types de compression. La compression avec perte (JPEG, WebP, AVIF) supprime definitivement des donnees pour obtenir des fichiers plus petits - c'est ce que vous voulez pour les photographies sur le web. La compression sans perte (PNG, WebP lossless) preserve chaque pixel mais obtient des reductions plus faibles - preferable pour les graphismes et captures d'ecran.

Des outils comme Squoosh, ImageOptim ou Sharp (Node.js) vous permettent de previsualiser la difference de qualite avant de valider. Comparez toujours la version compressee avec l'original en taille reelle avant de la deployer.

Le texte alt (l'attribut alt sur les balises <img>) a deux fonctions : il decrit l'image pour les lecteurs d'ecran et les personnes malvoyantes, et il indique aux moteurs de recherche le contenu de l'image. Google utilise le texte alt comme signal principal pour le classement dans la recherche d'images.

Un bon texte alt est descriptif, concis et inclut naturellement des mots-cles pertinents sans bourrage. Au lieu de "photo.jpg" ou "image1", ecrivez quelque chose comme "golden retriever courant dans les feuilles d'automne dans un parc". Decrivez ce qui est dans l'image, pas ce que c'est (evitez de commencer par "image de" ou "photo de").

Pour les images decoratives qui n'ajoutent pas de valeur informationnelle (bordures, espaceurs, motifs de fond), utilisez un attribut alt vide (alt="") pour que les lecteurs d'ecran les ignorent completement.

Le lazy loading differe le chargement des images jusqu'a ce qu'elles soient sur le point d'entrer dans la zone visible. Cela signifie qu'une page avec 50 images ne telecharge pas les 50 au chargement initial - seulement celles visibles a l'ecran. Le reste se charge au fur et a mesure que l'utilisateur fait defiler. Cela reduit considerablement le temps de chargement initial et la consommation de bande passante.

En HTML moderne, le lazy loading est aussi simple que d'ajouter loading="lazy" a vos balises <img>. N'appliquez pas le lazy loading aux images visibles au-dessus de la ligne de flottaison (le premier ecran) - celles-ci doivent se charger immediatement pour eviter les decalages de mise en page et les mauvais scores Largest Contentful Paint (LCP).

Les images responsives s'adaptent aux differentes tailles d'ecran pour que les utilisateurs mobiles ne telechargent pas une image de 4000px de large quand leur ecran ne fait que 400px. Utilisez les attributs srcset et sizes pour fournir plusieurs resolutions. Le navigateur choisit la plus petite version adaptee a l'ecran de l'utilisateur, economisant de la bande passante et ameliorant le temps de chargement.

Specifiez toujours les attributs width et height sur chaque image pour prevenir le Cumulative Layout Shift (CLS) - une metrique Core Web Vitals qui penalise les pages dont le contenu saute pendant le chargement.

Les noms de fichiers d'images sont un signal SEO que beaucoup de gens negligent. Les moteurs de recherche lisent les noms de fichiers pour comprendre le contenu de l'image. Un fichier nomme coucher-de-soleil-lac-leman.webp en dit bien plus a Google que IMG_4829.webp.

Pour un SEO avance, ajoutez des donnees structurees (schema.org ImageObject) a vos pages. Ce balisage indique aux moteurs de recherche la legende de l'image, le createur, la licence et l'URL du contenu. Les pages avec des donnees structurees ont plus de chances d'apparaitre dans la recherche d'images Google avec des extraits enrichis.

Si vous ajoutez un filigrane a vos images avant publication, le filigrane fait partie du fichier. Pour des conseils sur le filigranage sans nuire a la qualite de l'image, consultez notre guide des bonnes pratiques du filigrane.

Les photographes et createurs font face a un defi unique : ils veulent des images superbes sur le web, qui se chargent rapidement pour le SEO, et qui restent protegees du vol. Ces objectifs peuvent sembler contradictoires, mais ils ne le sont pas - il suffit d'avoir un workflow clair.

Conservez vos fichiers originaux haute resolution en securite hors ligne - ce sont vos masters et votre preuve de paternite. Pour le web, exportez des versions redimensionnees (generalement 1200-2000px sur le cote le plus long) en format WebP a une qualite de 80. Cela vous donne une excellente qualite visuelle pour une fraction de la taille du fichier original.

Avant de telecharger, ajoutez un filigrane a vos versions web. Un filigrane semi-transparent a 30-40% d'opacite n'affectera pas significativement la taille du fichier ni la vitesse de chargement, mais il fournit une protection visuelle qui dissuade le vol occasionnel. Apres le filigranage, passez l'image dans un outil de compression pour une reduction finale de taille.

Pour le guide complet sur la securisation de vos images au-dela de l'optimisation, consultez notre article sur la protection des photos contre le vol en ligne et notre tutoriel filigrane.