Taille et format d'image optimaux pour les réseaux sociaux
L'image Open Graph est l'élément le plus visible de votre carte de lien sur les réseaux sociaux. La mauvaise taille provoque un rognage disgracieux, un affichage en mode compact au lieu de grand format, ou même l'absence d'image. Ce guide couvre les dimensions et formats optimaux pour chaque plateforme, et comment créer des images OG efficaces qui maximisent les clics sur vos partages.
La taille universelle pour les aperçus de liens
La taille standard de production qui se rend correctement sur toutes les plateformes majeures sans rognage, letterboxing ni mise à l'échelle est 1200 par 630 pixels, au ratio 1,91:1. Cette dimension exacte est documentée comme recommandée par Facebook, LinkedIn et Discord, et est la taille déclenchante pour le format de carte `summary_large_image` de X — les images de moins de 300 pixels de large s'affichent en format compact quelle que soit la valeur de `twitter:card`. La taille du fichier doit rester sous 1 Mo pour éviter une prévisualisation dégradée ou absente que certains clients mobiles affichent quand l'image est lente à charger. La cible de production optimale est 200 à 400 Ko — réalisable avec JPEG à 80–85 % de qualité sur un canvas 1200×630. Pour les images à texte lourd avec des arrière-plans de couleur unie, PNG produit souvent un fichier plus petit que JPEG car les zones plates se compriment extrêmement bien.
Choisir le format d'image : JPEG, PNG ou WebP
Le format d'image affecte la compatibilité entre plateformes et clients. JPEG : format le plus sûr avec la compatibilité universelle sur tous les crawlers et clients de messagerie legacy. Recommandé pour les images photographiques et les designs riches en couleurs graduées. Qualité 80–85 % sur un canvas 1200×630 produit généralement 150–350 Ko. PNG : idéal pour les images avec texte, logos, icônes ou arrière-plans de couleur unie. Pas d'artefacts de compression. Taille souvent comparable ou inférieure au JPEG pour les designs graphiques simples. Supporté universellement. WebP : taille de fichier la plus petite (30–50 % plus petit que JPEG comparable). Supporté par tous les clients basés sur navigateur. Le problème de compatibilité concerne les vieux clients de messagerie natifs Android (versions WhatsApp antérieures à 2.21) et certains clients email avec prévisualisation de liens inline. Si une part significative de votre audience utilise ces clients, JPEG reste le choix plus sûr. Pour la plupart des usages en 2026, WebP est acceptable et préférable pour la performance.
Créer des images OG efficaces
Au-delà des dimensions techniques, l'efficacité visuelle de l'image OG détermine le taux de clics. Les bonnes pratiques pour les images OG : occupez toute la zone 1200×630 sans zones vides. Placez le contenu principal (texte, logo, visuel) dans la zone centrale sécurisée de 1000×500 pixels en laissant 100 pixels de marge de chaque côté pour compenser les rognages selon les contextes d'affichage. Utilisez du texte lisible — font size minimum 24px à l'affichage, ce qui correspond à environ 60–70px dans l'image source à 2x. Assurez un contraste texte/fond d'au moins 4,5:1. Incluez le logo ou le nom de marque de façon visible pour la reconnaissance. Pour les articles de blog, incluez le titre de l'article directement dans l'image — c'est plus accrocheur qu'une image générique de marque. Des outils comme Canva, Adobe Express ou des composants React/Next.js comme `@vercel/og` permettent de générer ces images programmatiquement depuis les métadonnées de chaque page.
Images OG dynamiques vs images OG statiques
Les images OG peuvent être statiques (une image par template de page) ou dynamiques (une image unique générée pour chaque page). Les images statiques sont simples à mettre en place, fiables et rapides. Elles conviennent pour les pages dont le contenu ne change pas fréquemment. Les images OG dynamiques génèrent automatiquement une image personnalisée pour chaque page en injectant le title, la description, l'image hero et les métadonnées dans un template. Des solutions comme `@vercel/og` (pour Next.js), `satori` ou des APIs d'images comme Cloudinary permettent cette génération à la volée. Pour les blogs avec de nombreux articles, les images OG dynamiques améliorent significativement les taux de clics car chaque partage affiche le titre exact de l'article plutôt qu'une image générique. Pour les pages produit e-commerce, une image OG dynamique peut inclure le prix, les étoiles d'évaluation et la photo du produit — les informations les plus pertinentes pour la décision d'achat.
Questions fréquemment posées
- Quelle est la taille minimale pour qu'une image s'affiche en grand sur Twitter/X ?
- L'image doit faire au moins 300×157 pixels ET twitter:card doit être défini sur summary_large_image. En dessous de 300px de large, X affiche automatiquement le format compact (petite vignette) quelle que soit la valeur de twitter:card. La taille recommandée est 1200×630px.
- Dois-je créer des images OG différentes pour chaque plateforme ?
- Non. Une seule image 1200×630px correctement dimensionnée fonctionne sur toutes les plateformes majeures (Facebook, LinkedIn, X, WhatsApp, Discord, Slack, iMessage). Chaque plateforme applique ses propres règles de rognage et d'affichage à cette image commune.
- Comment générer des images OG automatiquement pour les articles de blog ?
- Utilisez @vercel/og (Next.js), satori (framework agnostique) ou une API d'images comme Cloudinary. Ces solutions génèrent dynamiquement une image pour chaque page en injectant le title, l'image hero et les métadonnées dans un template. Le résultat est une image OG unique et pertinente pour chaque article.