Réponse directe
Adaptez les visuels de liens au canevas initial de 1200×630 ou à 1200×628. Rognez ou ajoutez des marges localement, puis vérifiez l’aperçu sur la plateforme visée. Remplissez tout le cadre 1.91:1 sans bordures ou préservez l'image complète avec un fond blanc, personnalisé ou transparent.
Comment utiliser cet outil
Déposez vos images d'aperçu ou bannières
Sélectionnez jusqu’à 20 images JPG, PNG ou WebP. L’outil ouvre le canevas 1200×630.
1200×630 / 1200×628
Adaptez les visuels de liens au canevas initial de 1200×630 ou à 1200×628. Rognez ou ajoutez des marges localement, puis vérifiez l’aperçu sur la plateforme visée.
Choisissez Rogner pour remplir ou Ajuster avec marges
Remplissez tout le cadre 1.91:1 sans bordures ou préservez l'image complète avec un fond blanc, personnalisé ou transparent.
Exportez et intégrez les balises og:image
Téléchargez le fichier optimisé et insérez og:image, og:image:width et og:image:height dans l'en-tête HTML de votre site.
Dimensions et cadrage des images Open Graph
Cet outil propose des canevas de 1200×630 et 1200×628 pour les aperçus de liens. Leurs ratios sont d’environ 1,91:1. Open Graph définit des métadonnées d’image, pas une taille obligatoire universelle. Vérifiez l’affichage sur la plateforme de destination.
Exemples pratiques
Rogner une bannière 16:9 (1920×1080) en carte Open Graph 1200×630
Entrée : Bannière JPEG paysage 1920×1080 (ratio 16:9, 2.1 Mo)
Sortie : JPEG 1200×630
Le rognage ajuste la largeur et élimine de légères bandes horizontales pour atteindre 1200×630.
Adapter un logo carré (1000×1000) dans un cadre 1200×630 avec marges
Entrée : Logo PNG 1000×1000 (ratio 1:1)
Sortie : PNG 1200×630 avec logo centré 630×630 et barres latérales
L'ajustement préserve l'intégralité du logo et remplit les côtés avec un fond blanc ou de couleur.
Créer une carte de lien 1200×628 pour les réseaux sociaux
Entrée : Illustration PNG 2400×1256 (ratio 1.91:1)
Sortie : Fichier PNG ou WebP 1200×628 optimisé
Réduit les dimensions pour un affichage rapide tout en préservant la netteté des détails.
Limites
- Les réseaux sociaux conservent en cache les URL og:image ; pour forcer leur actualisation, utilisez leurs outils de débogage d'URL.
- Les marges transparentes nécessitent le format PNG ou WebP ; le JPEG impose un arrière-plan opaque.
- Sans agrandissement autorisé, Ajuster avec marges conserve les petites images à leur taille d’origine dans le canevas. Rogner pour remplir est bloqué si la source ou la zone recadrée est trop petite. Autorisez l’agrandissement pour augmenter la taille ; il ne recrée pas les détails absents.
Questions fréquentes
Quelle est la taille recommandée pour une image Open Graph ?
Adaptez les visuels de liens au canevas initial de 1200×630 ou à 1200×628. Rognez ou ajoutez des marges localement, puis vérifiez l’aperçu sur la plateforme visée.
Pourquoi renseigner les balises og:image:width et og:image:height ?
og:image:width et og:image:height décrivent les dimensions de l’image en pixels. Ces balises renseignent la plateforme qui lit les métadonnées, sans garantir un aperçu dès le premier partage.
L'image aura-t-elle exactement la même apparence sur chaque réseau ?
Non. 1200×630 est un préréglage de cet outil. Chaque plateforme contrôle son aperçu et peut recadrer l’image différemment. Vérifiez le résultat publié.
Mes images sont-elles envoyées sur un serveur distant ?
Non. Toutes les opérations de rognage et de redimensionnement s'exécutent localement dans votre navigateur via HTML5 Canvas.
Références et normes faisant autorité
- The Open Graph Protocol: image metadata ↗ — Defines og:image and optional image width and height; no mandatory pixel dimensions.
- W3C Portable Network Graphics (PNG) Specification (Third Edition) ↗ — PNG file format, including lossless encoding and alpha transparency; resizing can change pixel detail.
- MDN: CanvasRenderingContext2D.drawImage() ↗ — Source crop rectangles and destination dimensions.
- MDN: HTMLCanvasElement.toBlob() ↗ — Browser image export; JPEG and WebP quality can introduce compression loss.