Une image trop lourde ralentit la page ; trop petite, elle devient floue sur un écran Retina. Et les bonnes dimensions changent selon de l'endroit où l'image s'affiche : dans une page, dans un onglet de navigateur, dans un aperçu LinkedIn ou sur une fiche Google.
Chez Digidop, on vérifie ces dimensions sur chaque site qu'on livre. Ce guide reprend les valeurs en vigueur en 2026, chacune liée à la documentation officielle de la plateforme, et montre où les régler dans Webflow.
Article publié en 2022, entièrement mis à jour le 6 octobre 2026.
Les dimensions à retenir en 2026
| Image | Dimensions | Format | Limite | Source |
|---|---|---|---|---|
| Image pleine largeur (hero, bannière) | 1 920 px de large | WebP ou AVIF | le plus léger possible | pratique Digidop |
| Image dans un article | 2 × la largeur d'affichage (souvent 1 400 à 1 600 px) | WebP ou AVIF | le plus léger possible | pratique Digidop |
| Favicon | carré, plus de 48 × 48 px | PNG, ICO, SVG | — | Google Search Central |
| Webclip (icône d'écran d'accueil) | 180 × 180 px (Apple), 256 × 256 px (Webflow) | PNG | — | Apple, Webflow |
| Open Graph (aperçu de partage) | 1 200 × 630 px, ratio 1,91:1 | JPG ou PNG | 8 Mo | Meta for Developers |
| Bannière YouTube | 2 560 × 1 440 px (minimum 2 048 × 1 152) | JPG, PNG | 6 Mo | Aide YouTube |
| Miniature YouTube | 3 840 × 2 160 px recommandé, 16:9, 640 px de large minimum | JPG, PNG | 2 Mo (mobile), 50 Mo (ordinateur) | Aide YouTube |
| Photo Google Business Profile | 720 × 720 px (minimum 250 × 250) | JPG, PNG | 10 Ko à 5 Mo | Aide Google Business Profile |
Les images de votre site
Image pleine largeur : 1 920 px
Une image qui occupe toute la largeur de l'écran (hero, bannière de section) se prépare en 1 920 px de large. C'est la largeur qu'on retient sur nos projets : elle couvre la plupart des écrans d'ordinateur sans alourdir inutilement la page. Au-delà, le gain de netteté se voit rarement, le poids en plus se mesure toujours.
Image dans le contenu : deux fois la taille d'affichage
Les écrans haute densité (Retina sur Mac et iPhone, la plupart des smartphones Android) affichent deux pixels physiques là où la mise en page en prévoit un. Une image affichée sur 700 px de large doit donc être fournie en 1 400 px pour rester nette.
Pas besoin de préparer une version par écran : les attributs srcset et sizes laissent le navigateur choisir la bonne. Webflow les génère pour les images placées dans les pages, avec une exception importante pour l'AVIF (voir plus bas).
Logos et icônes : SVG
Un logo, une icône ou une illustration simple se met en SVG : le fichier est vectoriel, donc net à toutes les tailles, et souvent plus léger qu'un PNG. Le SVG ne convient pas aux photos.
Les icônes du site : favicon et webclip
Favicon
La favicon s'affiche dans l'onglet du navigateur, dans les favoris et à côté de votre site dans les résultats Google. Google impose un carré d'au moins 8 × 8 px et recommande plus de 48 × 48 px pour qu'elle reste nette partout (Google Search Central).
Le conseil pratique : partez d'un carré net d'au moins 256 px, simplifié (une lettre ou le symbole du logo, pas le logo complet), et laissez l'outil générer les petites tailles.
Webclip
Le webclip est l'icône qui apparaît quand un visiteur ajoute votre site à l'écran d'accueil de son iPhone ou de son iPad. Apple utilise une icône de 180 × 180 px sur iPhone (Apple). Webflow demande un webclip de 256 × 256 px. Préférez un fond plein à la transparence.
Les images de partage : Open Graph
L'image Open Graph est celle qui s'affiche quand quelqu'un partage votre page sur LinkedIn, Facebook, Slack ou WhatsApp. Meta recommande 1 200 × 630 px, au ratio 1,91:1, avec un poids maximum de 8 Mo (Meta for Developers). LinkedIn lit la même balise et affiche correctement ce format.
Deux réflexes :
- Gardez le texte et le logo au centre, certaines plateformes recadrent les bords.
- Prévoyez une image par page importante, et pour le blog une image par article : un aperçu générique sur toutes les pages fait perdre des clics au partage.
Pour aller plus loin : pourquoi ajouter des balises Open Graph à votre site.
YouTube et Google Business Profile
Bannière et miniatures YouTube
La bannière de chaîne se prépare en 2 560 × 1 440 px (minimum 2 048 × 1 152 px, 6 Mo maximum). Seule la zone centrale de 1 235 × 338 px reste visible sur tous les appareils : placez-y le logo et le texte (Aide YouTube).
Pour les miniatures de vidéos, YouTube recommande 3 840 × 2 160 px, au ratio 16:9, avec une largeur d'au moins 640 px. La limite de poids est de 2 Mo depuis l'application mobile et de 50 Mo depuis un ordinateur (Aide YouTube) : si vous publiez depuis votre téléphone, compressez la miniature en conséquence.
Google Business Profile
L'ancien « Google My Business » s'appelle Google Business Profile. Ses photos (logo compris) suivent les mêmes règles : JPG ou PNG, entre 10 Ko et 5 Mo, 720 × 720 px recommandés et 250 × 250 px au minimum (Aide Google Business Profile). Google ne publie pas de dimensions distinctes pour la photo de couverture.
Quel format d'image choisir ?
| Format | À utiliser pour | Compatibilité |
|---|---|---|
| AVIF | photos, visuels détaillés : le plus léger à qualité égale | 96 % des navigateurs (Can I use) |
| WebP | photos et visuels, choix par défaut | 97 % des navigateurs (Can I use) |
| SVG | logos, icônes, illustrations simples | universelle |
| PNG | images avec transparence quand le SVG n'est pas possible | universelle |
| JPEG | à remplacer par WebP ou AVIF dans les pages, à garder pour l'image Open Graph | universelle |
WebP et AVIF sont aujourd'hui lus par la quasi-totalité des navigateurs. Il n'y a plus de raison de servir des JPEG ou des PNG lourds dans les pages d'un site.
Images et Core Web Vitals
Les images pèsent surtout sur deux des trois Core Web Vitals de Google :
- Le LCP (Largest Contentful Paint) mesure le temps d'affichage du plus gros élément visible, très souvent l'image principale de la page. L'objectif est 2,5 secondes ou moins (web.dev). Une image principale trop lourde, ou chargée en différé, dégrade directement ce score.
- Le CLS (Cumulative Layout Shift) mesure les décalages de mise en page pendant le chargement : une image sans largeur ni hauteur déclarées pousse le texte vers le bas en s'affichant.
Le troisième indicateur, l'INP (Interaction to Next Paint), mesure la réactivité aux clics. Il a remplacé le FID le 12 mars 2024 (web.dev) et dépend surtout du JavaScript, peu des images.
Google explore et indexe les sites dans leur version mobile, une bascule annoncée comme terminée en octobre 2023 (Google Search Central). Ce sont donc les performances sur mobile qui comptent.
Pour mesurer et corriger : comment améliorer la vitesse de chargement de son site.
Dans Webflow, concrètement
- Favicon et webclip : Site settings → General → Icons. On charge une image carrée et Webflow génère les tailles nécessaires.
- Open Graph : dans les Page settings de chaque page statique, section Open Graph settings. Pour le blog et les autres collections CMS, reliez l'image Open Graph au champ image de la collection : chaque article aura son propre aperçu.
- Conversion en WebP ou AVIF : le panneau Assets propose une conversion en lot. Attention, le fichier d'origine est remplacé par la version convertie : téléchargez les originaux avant si vous voulez les garder. Et Webflow ne génère pas de variantes responsives (
srcset) pour les images AVIF : convertissez en WebP les images qui en ont besoin, et gardez l'AVIF pour celles qui s'affichent à une taille fixe. On détaille la démarche dans Webflow accepte le format WebP. - Images responsives : Webflow génère
srcsetetsizespour les images JPG, PNG et WebP insérées dans les pages. Chargez une source assez grande (deux fois la taille d'affichage) et laissez Webflow décliner. Pour les images du CMS, dont Webflow ne connaît pas la taille d'affichage à l'avance, préparez directement une image à la bonne largeur. - Chargement : dans les réglages de l'élément image, le mode Lazy diffère les images situées sous la ligne de flottaison. Passez l'image principale de la page en Eager : la charger en différé retarde le LCP.
Notre avis
On voit souvent des équipes passer du temps sur la favicon et le webclip, et laisser une image principale de 2 ou 3 Mo en haut de la page d'accueil. C'est l'inverse qu'il faut faire : l'image qui compte le plus est celle qui s'affiche en premier, sur mobile. Si vous ne devez faire qu'une chose après avoir lu cet article, vérifiez son poids, son format et son mode de chargement.
Le reste (Open Graph, icônes, YouTube) se règle une fois, au lancement du site, et ne bouge plus. C'est d'ailleurs un point qu'on contrôle systématiquement avant la mise en ligne d'un site Webflow réalisé par Digidop.
Questions fréquentes
Quelle est la taille idéale d'une image pour un site web ?
Pour une image pleine largeur, 1 920 px de large. Pour une image insérée dans le contenu, deux fois sa largeur d'affichage, pour rester nette sur les écrans haute densité. Dans les deux cas, en WebP ou en AVIF, et le plus léger possible.
Quelle taille pour une image Open Graph ?
1 200 × 630 px, au ratio 1,91:1, 8 Mo maximum selon Meta. Ce format s'affiche correctement sur LinkedIn, Facebook, Slack et la plupart des messageries.
Quelle taille pour une favicon ?
Un carré de plus de 48 × 48 px, selon Google. Dans Webflow, chargez un carré net (32 × 32 px au minimum, plus grand de préférence) dans Site settings : les autres tailles sont générées automatiquement.
WebP ou AVIF ?
AVIF compresse généralement mieux que WebP à qualité égale, et les deux sont lus par plus de 96 % des navigateurs. WebP reste le choix le plus sûr par défaut, et dans Webflow c'est le seul des deux qui reçoit des variantes responsives. AVIF vaut le coup pour les grandes photos affichées à une taille fixe.
Faut-il encore utiliser JPEG et PNG ?
Dans les pages du site, plus vraiment : WebP et AVIF font mieux. Pour l'image Open Graph, restez en JPG ou en PNG, les formats que Meta et LinkedIn acceptent partout. Le PNG sert encore pour une image avec transparence quand le SVG n'est pas possible.
Sources
- Google Search Central : favicon dans les résultats de recherche
- Meta for Developers : images Open Graph
- Aide YouTube : bannière et photo de profil · miniatures personnalisées
- Aide Google Business Profile : consignes pour les photos
- web.dev : Largest Contentful Paint · INP devient une Core Web Vital
- Can I use : AVIF · WebP
Prévisualiser la Newsletter
Documentation · IA · 5 outils IA à suivre cette année pour générer des vidéos
Evénements · Webflow · World Wide Webflow Tour, Paris
Documentation · Top 20 meilleures agences web et digitales pour SaaS B2B en 2026