Générateur d'images OG — Créateur d'images de partage pour les réseaux sociaux

Une image Open Graph est l'image qui apparaît quand un lien est collé dans une conversation, un tweet ou un canal Slack — et chaque plateforme qui en affiche une s'attend à un canvas d'environ 1200×630 pixels, la taille pour laquelle les cartes og:image de Facebook et summary_large_image de Twitter ont toutes deux été conçues. Une mauvaise taille produit une image recadrée, floue ou déformée ; une mauvaise mise en page donne un titre illisible sur une photo chargée. Cet outil compose l'image à la résolution réelle en utilisant l'API Canvas 2D, de sorte que ce que vous voyez dans la prévisualisation est la grille de pixels exacte livrée dans le PNG.

Choisissez un fond — une couleur unie, un dégradé linéaire à deux arrêts composé de deux couleurs de votre choix, ou une photo importée qui sera recadrée pour remplir le cadre de 1200×630, comme le ferait un background-size: cover en CSS, au lieu d'être étirée et déformée. Saisissez un titre et un sous-titre facultatif : les deux sont mesurés caractère par caractère par rapport aux métriques de police réelles du canvas, de sorte qu'un titre trop long pour tenir sur une ligne se poursuive sur une deuxième ou troisième ligne à une vraie coupure de mot, au lieu de déborder ou d'être tronqué silencieusement. Choisissez un alignement centré ou à gauche, une couleur de texte lisible sur votre fond, et placez éventuellement un logo en coin à une taille fixe et lisible.

Sous le canvas, quatre petites cartes simulent l'apparence de l'image une fois qu'une vraie plateforme l'enveloppe de son propre habillage : la carte de Twitter/X montre uniquement le domaine et un titre en gras sous l'image sans ligne de description, Facebook ajoute une bande domaine en majuscules au-dessus d'un bloc titre et description, LinkedIn place le domaine sous le titre sans aucune description, et l'embed Discord met le domaine, le titre et la description au-dessus de l'image dans son propre thème sombre. Il s'agit d'approximations stylisées à des fins de maquettage — clairement identifiées comme illustratives, avec une ligne de domaine que vous saisissez vous-même — pas d'une récupération dynamique ni d'une capture d'écran des plateformes réelles, puisque c'est le partage d'un lien et le passage des crawlers de chaque plateforme sur les vraies balises meta og:image et og:title de votre page qui produisent effectivement la carte en direct.

Tout s'exécute localement sur un élément canvas HTML dans votre navigateur : le titre, le sous-titre, le fond et le logo importés ne quittent jamais votre appareil, et le fichier exporté est un PNG propre issu de canvas.toBlob() ne contenant que ce que vous avez composé — ni bordures de maquette, ni fausses barres de navigateur, ni logos de plateformes ne sont intégrés à l'image téléchargée. Si vous devez ensuite redimensionner ou convertir le PNG exporté, les outils de redimensionnement et de conversion d'image de ce site prennent le relais exactement là où celui-ci s'arrête.