Badge Webflow Award Winner 2023

Site web : Les tailles et formats d'image à respecter

Publié le 
3/2/2022
Modifié le 
23/3/2023
Temps de lecture : 5 min
Aperçu de formats d'images dans Figma
Écrit par
Photo de Thibaut Legrand avec un t-shirt Digidop noir

Thibaut Legrand

Développeur Webflow & SEO

Découvrez dans cet article, les tailles, formats et dimensions idéales d'images à respecter afin d'optimiser votre site web, vos performances et plus globalement votre visibilité en ligne !

Points clés à retenir

Redimensionner ses images au bon format, c'est important ! Pourquoi ajuster la taille de ses images ? Pour plusieurs raisons :

  • Une image à la bonne taille est une image de qualité
  • Une image redimensionnée est une image optimisée pour le SEO (car moins lourde)
  • Des images aux bons formats permettent de meilleures performances pour votre site web

Les meilleures pratiques SEO recommandent de : Redimensionner, compresser, renommer, décrire (balise alt texte) et publier votre image.

Pour ce faire, il existe des outils no-code tels que Figma (création et redimension de vos images) , Ilovimg (redimension et compression de vos images) ou même Canva (création et redimension).

Dans cet article, nous allons traiter des bonnes tailles, dimensions ou formats d'image à respecter pour son site web.

1. Optimiser les images d'un Site Web

1. 1 Favicon : le format idéal ?

Une Favicon est une petite image représentant votre site. Elle est disposée dans l'onglet de recherche au-dessus de la barre de recherche. C'est une icône qui permet de personnaliser votre site. Google redimensionnera votre favicon au format 16*16 pixels mais il ne faut surtout pas fournir une icône de cette dimension. Différents formats d'image peuvent être utilisés (PNG, ICO, GIF, JPG, JPEG, etc.) et différentes dimensions à partir de 32*32 pixels, 48*48 pixels, 96*96 pixels, 144*144 pixels, etc. De notre côté, nous vous recommandons d'utiliser le format 32*32 pixels pour votre icône.

1.2 WebClip : la taille idéale ?

Un WebClip est fonctionnalité Apple. C'est un raccourci sous forme d'icône vers un site web qui peut être inséré sur la page d'accueil de votre IPhone. La dimension recommandée pour cette icône est de 256*256 pixels.

1.3 Les images dans les articles de blog

La majorité des écrans possède une résolution de 1920* 1080 pixels. C'est pourquoi dans un premier temps, il est fortement déconseillé d'ajouter une image ou un autre type de fichier média sur votre site dépassant en largeur 1920 px. De l'autre côté, une image qui prend toute la place sur votre écran n'est pas forcément un effet recherché, en tout cas dans un article de blog, ainsi dépasser les 1080 px de hauteur.

Pour les images à l'intérieur de votre article de blog, essayez de les redimensionner en tenant compte de la largeur du contenair de votre texte (Par exemple pour Digidop, nous redimensionnons nos images pour qu'elles ne dépassent pas 1000px de largeur).

1.4 Open Graph Image

L'open graph image est l'image qui va s'afficher lorsque vous partager le lien (l'URL) d'une des pages de votre site. C'est une image qui crée de l'engagement et qui incite au clic. Cette image a un format bien particulier à respecter. Ainsi, la dimension de votre open graph image doit être de 1200*630 pixels.

1.5 Les autres images de votre site web

Un peu comme les images dans vos articles de blog, toutes les images de votre site doivent être adaptées en fonction du contenair. Dans le développement de votre site internet, le développeur va disposer des endroits, des blocs précis où insérer des images. Il est important que vos images soient de la dimension du bloc pour une bonne optimisation.

Par exemple, si sur une des pages de mon site, une section comprend un bloc de 700 X 500 px qui doit contenir votre image, celle-ci doit correspondre à cette dimension.

De façon plus globale, il faudra voir avec le développeur de votre site pour optimiser vos images au bon format pour cette partie.

2. Optimiser les images d'une fiche Google My Business (GMB)

2.1 Logo de la fiche GMB : quelle taille ?

Le logo d'une fiche Google My Business est important pour l'expérience utilisateur dans les recherches locales et donc pour le SEO local. Le format recommandé pour ce type d'image est de 250*250 pixels.

2.2 La photo de couverture de la fiche GMB : quelle dimension ?

La photo de couverture de votre fiche d'établissement GMB permet d'exposer (de mettre en lumière) celui-ci. L'optimisation de cette image est importante pour permettre une bonne résolution, un poids adapté et une bonne qualité pour mettre en avant votre business local. Pour ce faire, le format idéal est de 1080*608 pixels.

2.3 Optimiser les autres photos de la GMB

Pour améliorer votre référencement local, vous pouvez ajouter tout un tas de photos et images à votre établissement dans la fiche Google My Business. Le format idéal pour ces images est de 497*373 pixels.

3. Optimiser les images de sa chaîne YouTube

3.1 Taille optimale : Logo chaîne YouTube

Le logo, l'image de votre chaîne YouTube est un élément important. Afin d'optimiser le rendu de cette image ou logo, il est recommandé par Google d'insérer un fichier JPG, GIF, BMP ou PNG (pas de GIF animé). La taille recommandée pour cette image est de 800*800 pixels.

À noter que le rendu sera une image ronde ou carrée de 98 x 98 pixels.

3.2 Dimensions idéales : Bannière chaîne YouTube

La bannière d'une chaîne YouTube est le second élément le plus important pour votre branding. Afin de respecter les recommandations et pour l'optimisation de cette image, il est nécessaire d'avoir une image de 2 560*1 440 pixels (format 16:9). Le poids du fichier média ne doit pas excéder 6 Mo.

3.3 Optimiser l'image : Miniature vidéo YouTube

Enfin concernant YouTube, le dernier format d'image très important à respecter est celui de la miniature des vidéos. YouTube recommande d'utiliser une image de taille 1280 x 720 pixels tout en respectant un ratio 16:9. L'affichage sera optimisé pour tous types de device (appareils).

Pour aller plus loin, vous pouvez aussi découvrir comment optimiser (encore plus) vos images pour le SEO et l'accessibilité web. Apprenez également à convertir vos images en format WEBP dans Webflow pour un avoir un site encore plus performant !

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop