Le saviez vous ? Vos visuels influencent votre SEO.

L’iconographie attire l’œil et capte notre attention. Elle permet d’identifier un sujet, fait passer mille messages, mais, saviez-vous que c’est aussi un puissant moyen d’améliorer votre référencement naturel ?

Le secteur cul­turel en par­ti­c­uli­er offre des visuels forts qui peu­vent provo­quer émo­tion et viral­ité. Des cap­ta­tions vidéos, pho­togra­phies uniques issues du spec­ta­cle vivant, vous représen­tent et appor­tent de la matière pic­turale inédite et très appré­ciée des moteurs de recherche. Se dif­férenci­er par la nou­veauté est une chance qu’il faut cul­tiv­er pour favoris­er le référence­ment naturel. 

Des créa­tions partagées — sons, vidéos, pho­tos — enrichissent l’ex­péri­ence du nav­i­ga­teur, racon­tent une his­toire et créent ce lien émo­tion­nel si particulier.

Pour amélior­er l’ex­péri­ence util­isa­teur et prof­iter pleine­ment du poten­tiel attrac­t­if de vos visuels voici quelques règles à respecter pour le SEO. Fini les temps de charge­ment trop long, les fichiers mal nom­més, les for­mats inadap­tés… autant d’er­reurs qui pénalisent votre présence sur Internet.

Quel format choisir pour mes visuels ?

Chaque for­mat pos­sède des avan­tages et des incon­vénients. Le for­mat d’un visuel sera choisi en fonc­tion de son usage :

• JPEG (.jpg/.jpeg)
  📌 Idéal pour les pho­tos et images rich­es en détails 
  • For­mat avec un bon rap­port qualité/​poids
  • Per­met de choisir votre niveau de com­pres­sion afin de réduire le poids du fichi­er tout en main­tenant la qual­ité désirée
  • Ne sup­porte pas la transparence
    
• PNG (.png)
  📌 Idéal pour les images avec trans­parence : logos, icônes, visuels avec des con­tours nets 
  • Qual­ité visuelle supérieure mais fichiers plus lourds que JPEG
  • Prend en charge la transparence
  • For­mat sans perte con­serve bien les détails
    
• GIF (.gif)
  📌 Idéal pour les ani­ma­tions légères, les visuels avec aplats de couleur 
  • For­mat lim­ité à 256 couleurs (moins adap­té aux photos)
  • Per­met d’intégrer des ani­ma­tions avec un poids réduit
  • Gère la trans­parence, mais avec des bor­ds par­fois pixelisés
    
• WebP (.webp)
  📌 Idéal pour les pho­tos et visuels complexes 
  • Com­pres­sion plus effi­cace que JPEG et PNG sans trop de perte de qualité
  • Sup­porte la trans­parence et les animations
  • Atten­tion : Ce for­mat dévelop­pé par Google n’est pas com­pat­i­ble avec les nav­i­ga­teurs anciens. Il est néces­saire de prévoir un fall­back avec d’autres for­mats (JPEG, PNG).
    
• SVG (.svg)
  📌 Idéal pour les logos, icônes et illus­tra­tions vec­to­rielles
  • Fichi­er vec­to­riel, qual­ité illim­itée quel que soit le redimensionnement
  • Poids réduit com­paré aux for­mats matriciels
  • Facile­ment mod­i­fi­able via CSS
    En atten­dant mon arti­cle sur les atouts du for­mat vec­to­riel, je vous invite à décou­vrir cet arti­cle très bien fait sur“Com­ment vec­toris­er une image?”

En résumé, quel format d’image choisirez-vous en fonction de vos besoins ?

Quelle taille choisir pour mes visuels ?

Adapter la taille de votre visuel en fonc­tion de son usage per­met d’op­ti­miser le ratio temps de chargement/​rendu visuel. Trop de sites per­dent des lecteurs à cause d’un traite­ment icono­graphique inadap­té avec des déf­i­ni­tions à plus de 3000 pix­els. Gardez en tête qu’un visuel supérieur à 1920 pix­els de large est inutile. En effet, la taille écran la plus répan­due est 1920 x 1080 pix­els.
* Source mars 2026 : Stat­Counter Glob­al Stats — Screen Res­o­lu­tion Mar­ket Share

Pour bien choisir la taille de vos visuels tout est affaire de con­texte.
Ai-je besoin d’un visuel plein écran ? Est-ce un visuel d’il­lus­tra­tion qui vient se plac­er à droite de mon texte ? Un élé­ment de déco­ra­tion ?

Nous vous recom­man­dons d’i­den­ti­fi­er et de choisir la taille de vos visuels en fonc­tion des grands types d’usages que vous ren­con­tr­erez. Le tableau ci-dessous présente dif­férents usages. Ces recom­man­da­tions génériques doivent, bien sûr, être adap­tées au design de votre site.

Usage	Taille recom­mandée (pix­el)	Poids con­seil­lé	For­mat recom­mandé	Con­seils
Ban­deau de page (Hero Banner)	1920 x 600 px (hau­teur variable)	< 400 Ko	.jpg, .WebP	Ver­sion mobile 768 px, com­pres­sion forte, ALT descrip­tif, fil­tre som­bre si texte superposé.
Illus­tra­tion pleine page	1200 à 1600 px de large (hau­teur variable)	< 200 Ko	.jpp, .png si aplats de couleurs /​peu de couleurs /​trans­parence, .WebP	Dimen­sion­nez à taille d’af­fichage réelle, ALT descrip­tif, ver­sion mobile 768 px.
Visuel colonne (50%/50%)	600 à 800 px large (400 – 600 px hauteur)	< 150 Ko	.jpg, .WebP, .png si besoin de fond transparent	Veillez à la cohérence visuelle, red­i­men­sion­ner pour mobile.
Visuel car­ré de blog	600 x 600 px ou 800 x 800 px	< 100 Ko	.jpg, .WebP, .png si logo /​aplats nets	Uni­formisez et prévoyez des marges si bor­dure ou ombre portée.
Logos /​icônes /​élé­ments vectoriels	For­mat adapt­able (selon usage)	Très léger (< 50 Ko)	.svg, .png si sim­ple logo avec transparence	Favorisez le .png 24 bits si fond trans­par­ent nécessaire.
Ani­ma­tions simples	Vari­able selon usage (max 800 px de large)	< 500 Ko	.gif ani­ma­tions légères .WebP ani­mé si compatible	.gif pour ani­ma­tions cour­tes. Préférez WebP ani­mé ou vidéo hébergée pour ani­ma­tions complexes.

Donnez du sens à vos noms de fichiers

Renom­mez votre visuel avant de le dépos­er sur votre serveur. Priv­ilégiez un nom de fichi­er descrip­tif et per­ti­nent plutôt que le nom par défaut.

Dites adieu aux noms de fichi­er du type IMG00001235623.jpg et préférez theatre-opera-paris.jpg

Un logo sera nom­mé logo-nom-entreprise.gif, ain­si lorsque un util­isa­teur sauve­g­arde votre mar­que le nom de l’en­tre­prise est inscrit dans le nom du fichi­er. Il en va de même pour tous les autres visuels.

Le nom d’une pho­to d’artiste pour­ra con­tenir le sujet et le nom de l’artiste.

Ajoutez un texte alternatif, un titre et une légende à votre image

Les édi­teur web (CMS) per­me­t­tent de ren­seign­er la balise ALT ou attrib­ut ALT afin de décrire le con­tenu d’une image. Cette balise four­nit une alter­na­tive lorsque l’im­age est inac­ces­si­ble. Décrivez le con­tenu de l’image pour amélior­er la com­préhen­sion glob­ale de votre page. Vous ren­drez un vrai ser­vice aux per­son­nes en sit­u­a­tion de hand­i­cap qui nav­iguent avec une syn­thèse vocale ou une plage braille. Par l’at­trib­ut ALT vous favorisez à la fois l’accessibilité et le référence­ment naturel.

Exem­ple d’u­til­i­sa­tion :
<img src=“theatre-des-mathurins.jpg” alt=“représentation de la salle de spec­ta­cles parisi­enne proche du boule­vard Hauss­mann et de la gare Saint-Lazare” />

A not­er : Il est recom­mandé de laiss­er la balise alt vide pour : 

• des images pure­ment décoratives
• des visuels redon­dants avec le texte
• des images d’am­biances génériques qui illus­trent une émo­tion globale

Pour savoir si vous devez rem­plir la balise alt, deman­dez-vous si le visuel est essen­tiel à la com­préhen­sion de votre mes­sage. Si oui, rem­plis­sez la balise Alt. Si non, lais­sez là vide, les lecteurs d’écran passeront l’information.

L’usage de l’attrib­ut TITLE est fac­ul­tatif. Il peut être util­isé pour don­ner des infor­ma­tions sup­plé­men­taires à l’utilisateur lorsqu’il sur­v­ole l’image.

Exem­ple d’u­til­i­sa­tion :
“Cliquez ici pour agrandir l’image”

A not­er, son impact SEO est pra­tique­ment nul (Google).

De même, lorsque c’est prévu par votre thème, vous pou­vez utilis­er l’at­trib­ut légende, out­re la légende vous pou­vez y ajouter des élé­ments de types copy­right, auteur, année de parution.

Les Car­il­lons de Zic-Phones ©1995 — Jacques Rémus

Favorisez aussi l’indexation de vos vidéos

Les vidéos sont par­ti­c­ulière­ment engageantes. Lorsqu’elles sont con­sultées dans leur intégrité, elles améliorent le temps passé sur votre site. Le temps de con­sul­ta­tion long est un critère prise ne compte de manière pos­i­tive pour le SEO.

Bonnes pra­tiques :

• Priv­ilégiez l’hébergement de vos vidéos sur YouTube ou Vimeo pour ne pas alour­dir votre site.
• Comme pour les visuels, ajoutez une descrip­tion opti­misée avec des mots-clés.
• Lors de la pub­li­ca­tion de vos vidéos sur les plate­formes vidéos, inté­grez tou­jours des sous-titres pour favoris­er l’ac­ces­si­bil­ité et le SEO. C’est une option facile à cocher.
• Enfin, prof­itez des mod­ules de tran­scrip­tion vidéo, pour génér­er un compte-ren­du de vos dif­fu­sions vidéos. Ce con­tenu per­me­t­tra d’étayer vos con­tenus et de ren­forcer votre notoriété dans votre domaine de prédilection.

Ne nég­ligez jamais l’ef­fet de vos visuels sur vos lecteurs et sélec­tion­nez les avec attention.