# Compétence d'agent générateur d'images de carte Twitter
> Générez des images d'aperçu de lien optimisées pour Twitter Card (X) avec le bon rapport hauteur/largeur 2:1 et les contraintes spécifiques à la plateforme. Cette compétence garantit que vos aperçus de tweet sont parfaits, vous aidant à capter l'attention du public et à stimuler l'engagement.
- Canonical: https://nanoskill.ai/fr/skills/twitter-card-image-generator
- Markdown: https://nanoskill.ai/fr/skills/twitter-card-image-generator.md
- Author: kostja94
- Published: 2026-06-09T06:00:00.000Z
- Updated: 2026-07-25T04:19:51.168Z
- Language: fr
- Source type: github
- Popularity signal: 244
## Sources
- https://github.com/kostja94/social-cards-skills
## Install
```shell
npx skills add https://github.com/kostja94/social-cards-skills/tree/main/twitter-card-image-generator
```
## About
Cette compétence de générateur d'images Twitter Card permet aux utilisateurs de créer des images parfaitement optimisées pour les aperçus de lien X (Twitter), garantissant que leur contenu ait un fort impact visuel dans le fil d'actualité. Contrairement aux images Open Graph génériques, cet outil s'adapte spécifiquement au rapport d'aspect 2:1 unique de Twitter (1200x675px) et aux particularités de rendu de la plateforme, aidant les créateurs de contenu, les marketeurs et les développeurs à améliorer leur présence sur les réseaux sociaux et à stimuler l'engagement.
En exploitant six approches de génération distinctes et 16 styles visuels polyvalents, la compétence offre des options complètes pour la création d'images. Elle intègre des fonctionnalités avancées telles que la génération d'images par IA pour les arrière-plans, des flux de travail sensibles au contenu et l'intégration de pipeline Satori/resvg. Des considérations de conception clés telles que la compatibilité avec le mode sombre, le recadrage pour la timeline mobile et le masquage des bords sont intégrés, garantissant que les images soient visuellement attrayantes et fonctionnelles dans toutes les expériences utilisateur.
Au-delà des aperçus de lien standard, le générateur prend également en charge la création d'images d'affiche attrayantes pour les Twitter Player Cards, idéales pour le contenu vidéo et audio. Grâce à des vérifications YAML intégrées et des conseils sur les erreurs courantes, les utilisateurs peuvent produire en toute confiance des images Twitter Card de haute qualité qui répondent aux spécifications techniques et maximisent les taux de clics, rendant leurs liens partagés plus efficaces et professionnels.
## Key features
- **Optimisé pour les aperçus de liens X (Twitter)**: Générez des images spécialement conçues pour le format 2:1 de Twitter (1200x675 px) et ses comportements de rendu uniques, garantissant que votre contenu se démarque dans la timeline.
- **Six approches de génération et 16 styles visuels**: Utilisez six méthodes de génération distinctes, y compris la génération d'images par IA et des flux de travail sensibles au contenu, dans 16 styles visuels pour créer des images de cartes Twitter variées et attrayantes.
- **Adaptations pour le mode sombre et le recadrage mobile**: Concevez des images qui fonctionnent bien en mode sombre sur Twitter et qui résistent au recadrage sur les timelines mobiles, en plaçant le contenu critique dans les zones de sûreté pour une visibilité maximale.
- **Génération de posters pour cartes de lecteur**: Créez des images de posters attrayantes pour les cartes de lecteur Twitter, avec des superpositions de boutons de lecture et des titres de vidéos, pour inciter les utilisateurs à interagir avec votre contenu multimédia.
- **Contrôles de validation complets**: Bénéficiez de contrôles YAML intégrés qui valident les dimensions des images, le type de carte, le format d'URL et les considérations de conception comme les zones de sûreté de la timeline et la compatibilité avec le mode sombre.
## Use cases
- **Générer des images de cartes Twitter pour des articles de blog**: Créez automatiquement des images de cartes Twitter attrayantes de 1200x675 px pour les nouveaux articles de blog, garantissant qu'elles paraissent professionnelles et engageantes lorsqu'elles sont partagées sur X.
- **Concevoir des posters de cartes de lecteur pour des vidéos**: Produisez des images de posters optimisées pour votre contenu vidéo partagé sur Twitter, favorisant des taux de clics plus élevés avant même que la vidéo ne soit lue.
- **Assurer la compatibilité avec le mode sombre pour les partages sociaux**: Adaptez les images Open Graph existantes ou générez-en de nouvelles avec des designs adaptés au mode sombre, garantissant que vos images de cartes Twitter sont belles pour tous les utilisateurs, quels que soient leurs paramètres d'affichage.
## Result preview
Explorez une image Twitter Card performante alimentée par cette compétence.
## Result walkthrough
### Installer
Ajoutez la compétence de générateur d'images Twitter Card à votre agent IA.
### Décrire le contenu
Partagez les détails de votre contenu, votre identité de marque et la direction visuelle souhaitée.
### Générer le résultat
Créez une image Twitter Card optimisée pour la plateforme avec une hiérarchie visuelle forte et des améliorations de conception axées sur l'engagement.
## Skill definition
# Générateur d'images pour cartes Twitter
Générez des images optimisées pour les aperçus de liens X (Twitter) — les cartes qui apparaissent dans le fil d'actualité lorsqu'un utilisateur partage un lien. Les cartes Twitter ont des dimensions d'image et un comportement de rendu distincts, différents de ceux d'Open Graph standard. Cette compétence couvre l'ensemble du pipeline de génération adapté au rapport hauteur/largeur 2:1 de Twitter et à ses particularités.
Les six approches de génération et les six styles visuels de **og-image-generator** s'appliquent ici. Les seules différences sont : dimensions de sortie (1200x675 au lieu de 1200x630), adaptations de conception spécifiques à X, zonage sécurisé pour le fil d'actualité et prise en charge des cartes player.
## Quand utiliser
- L'utilisateur a besoin d'images **1200×675px (2:1)** pour les aperçus de liens X/Twitter, `summary_large_image`, ou les posters de cartes player
- L'utilisateur mentionne `twitter:image`, carte Twitter, image d'aperçu X, aperçu de tweet ou conception de carte de fil d'actualité
- L'utilisateur a besoin de mises en page adaptées au mode sombre, de zones de contenu occupant les 60% supérieurs, ou de masques de bord de 20px pour le recadrage à coins arrondis de X
- L'utilisateur utilise déjà **og-image-generator** et souhaite la variante adaptée à Twitter des mêmes styles et pipelines
## Quand NE PAS utiliser
- **Images OG génériques (1200×630, 1,91:1)** pour Facebook, LinkedIn, Slack, etc. — utilisez plutôt **og-image-generator**
- **Configuration uniquement des balises meta HTML** (sans créer le fichier image) — utilisez **twitter-cards** de marketing-skills
- **Sortie SVG** — Twitter ne prend pas en charge le SVG pour les images de carte ; utilisez PNG ou JPG
- **Éditeur visuel sans code ou API hébergée** — utilisez [Oginify](https://oginify.com) au lieu d'exécuter un pipeline d'agent
**Lors de l'invocation** : lors de la **première utilisation**, commencez par 1 à 2 phrases sur ce que couvre cette compétence et pourquoi elle est importante, puis fournissez la sortie principale. Lors d'une **utilisation ultérieure** ou si l'utilisateur demande de passer, allez directement à la sortie principale.
## 1. Comment Twitter consomme les images
Twitter lit les images dans cet ordre de priorité :
1. `twitter:image` — si elle est explicitement définie, utilisée directement
2. `og:image` — se rabat sur l'image OG si aucune balise de carte Twitter n'existe
3. Pas d'image — aperçu de lien en texte brut
**Information clé** : Facebook et LinkedIn ne lisent PAS `twitter:image`. Twitter est la seule plateforme qui lit les balises de carte Twitter. Cela signifie que vous avez besoin des DEUX chemins d'image dans vos métadonnées, même si le pipeline de rendu réel peut être partagé.
## 2. Spécifications des images Twitter
| Propriété | Spécification |
|----------|--------------|
| **Rapport d'aspect** | 2:1 (officiel) ; Twitter restitue à ~1,91:1 en pratique |
| **Recommandé** | 1200x675px (2:1) ; 1200x628px (interplateforme avec OG) |
| **Minimum** | 300x157px |
| **Maximum** | 4096x4096px |
| **Taille de fichier** | Moins de 5 Mo |
| **Formats** | JPG, PNG, WebP, GIF (première image seulement) ; SVG non pris en charge |
**Le type de carte détermine l'affichage de l'image :**
| Type de carte | Comportement de l'image |
|-----------|---------------|
| `summary_large_image` | Image proéminente en pleine largeur (recommandée pour la plupart des pages) |
| `summary` | Petite vignette (carré de 100x100px) |
| `player` | Intégration vidéo/audio ; l'image est l'affiche avant la lecture |
| `app` | Icône d'application ; l'image est l'icône de l'application + l'image promotionnelle |
Pour la plupart des cas d'utilisation, visez `summary_large_image` en 1200x675px.
## 3. Six approches de génération (adaptées à Twitter)
Les six approches de **og-image-generator** §1 fonctionnent pour les images Twitter. La seule différence réside dans les dimensions de sortie. Cette section couvre les adaptations spécifiques à Twitter — voir **og-image-generator** §1 pour la documentation complète du pipeline de rendu.
### 3.1 Génération d'image par IA (Noyau n°1)
Même stratégie d'invite en trois parties que pour OG, mais avec un cadrage spécifique à Twitter :
```
Partie 1 — Description visuelle : arrière-plan, composition, ambiance
Partie 2 — Spécification du texte : texte EXACT, entre guillemets, avec indications de taille
Partie 3 — Contraintes Twitter : "1200x675px, rapport d'aspect 2:1, texte clé dans
les 60% supérieurs, arrière-plan sombre préféré pour le mode sombre"
```
**Approche hybride (recommandée)** : l'IA génère l'arrière-plan/l'ambiance ; Satori superpose le texte. Crucial pour le texte en chinois où les modèles d'IA peinent encore — et l'utilisation du mode sombre par environ 40 % des utilisateurs de Twitter rend la précision du texte encore plus visible.
Voir **og-image-generator** §1.1 pour le tableau comparatif complet des outils d'IA (GPT Image 2.0, Flux, Nano Banana, DALL-E 3, Midjourney).
### 3.2 Flux de travail natif de l'agent sensible au contenu (Noyau n°2)
Même flux de travail en 6 étapes que OG (§1.2) : Lire le contenu → Faire correspondre le style → Extraire les éléments visuels → Sélectionner la génération → Générer → Valider. Ajouts spécifiques à Twitter à chaque étape :
**Étape 2 (Faire correspondre le style)** — Considération du mode sombre de Twitter : préférez les styles à arrière-plan sombre (Terminal/CLI, Midnight Ink Magazine, Brutalist en mode sombre) ou les styles avec des variantes sombres pour X.
**Étape 3 (Extraire les éléments visuels)** — Le recadrage du fil d'actualité de Twitter à ~1:1 sur mobile signifie que l'élément visuel le plus important doit fonctionner dans un carré. Un ruban de données horizontal qui fonctionne en 1200x675 peut être invisible dans le recadrage carré. Extrayez au moins un élément qui se lit bien à 1:1.
**Étape 4 (Sélectionner la génération)** — Même arbre de décision. Pour la génération d'IA, ajoutez : "Le texte survivra-t-il à la largeur d'affichage mobile de ~260px de Twitter ?"
**Étape 6 (Valider)** — Exécutez à la fois les vérifications OG ET les vérifications spécifiques à Twitter (§8).
### 3.3 Satori + resvg (basé sur le code)
Même pipeline que OG. Changez la hauteur de 630 à 675. Voir **og-image-generator** §1.3 pour l'implémentation complète.
```tsx
// Un point de terminaison partagé sert à la fois pour OG et Twitter :
export async function GET(req: Request) {
const { searchParams } = new URL(req.url);
const title = searchParams.get('title') ?? 'Default';
const platform = searchParams.get('platform') ?? 'og'; // 'og' | 'twitter'
const width = 1200;
const height = platform === 'twitter' ? 675 : 630;
return new ImageResponse(
,
{ width, height },
);
}
```
**Ensuite dans les métadonnées de la page :**
```tsx
const ogUrl = `/og?title=${encodeURIComponent(title)}`;
const twitterUrl = `/og?title=${encodeURIComponent(title)}&platform=twitter`;
export const metadata: Metadata = {
openGraph: {
images: [{ url: ogUrl, width: 1200, height: 630 }],
},
twitter: {
card: 'summary_large_image',
images: [twitterUrl], // Spécifique à Twitter 1200x675
},
};
```
### 3.4 Puppeteer, services gérés, configuration JSON
Identique à OG — définissez la fenêtre d'affichage/hauteur sur 675 au lieu de 630. Voir **og-image-generator** §1.4–1.6. Pour le système de priorité des pages v3 (S/A/B/C) et la sélection du pipeline, voir [content-strategy.md](../og-image-generator/references/content-strategy.md) et [pipeline-guide.md](../og-image-generator/references/pipeline-guide.md).
## 4. Considérations de conception spécifiques à X
Twitter restitue les images différemment de Facebook/LinkedIn. Concevez en gardant ces éléments à l'esprit :
**Mode sombre (~40 % des utilisateurs)** : Les images apparaissent en ligne dans le fil, entourées de tweets. Les arrière-plans sombres se fondent naturellement ; les arrière-plans clairs ressortent mais peuvent paraître criards en mode sombre. Chaque modèle doit avoir une variante sombre ou une valeur par défaut adaptée au mode sombre. Parmi les 6 styles, Terminal/CLI, Midnight Ink Magazine et Brutalist (fond noir) sont naturellement adaptés au mode sombre. Swiss Minimal et Newspaper devraient être livrés avec une alternative en mode sombre.
**Recadrage du fil d'actualité (mobile)** : Sur mobile, les images `summary_large_image` sont recadrées à ~1:1 dans le fil jusqu'à ce que le tweet soit développé. L'image complète en 2:1 n'est visible qu'en appuyant dessus. Placez le contenu le plus important (titre, visuel principal) dans les 60 % supérieurs de l'image — le carré central qui survit au recadrage. Ne mettez jamais de texte critique dans les 20 % inférieurs.
**Lisibilité du texte à petites tailles** : Les images du fil s'affichent à une largeur d'environ 260px sur les flux mobiles. Testez votre modèle à l'échelle 1/4 (~300px de large) pour vous assurer que le texte reste lisible. C'est plus strict que la taille d'affichage de bureau de ~500px d'OG.
**Masque de bord** : Twitter applique un subtil masque à coins arrondis aux images de carte. Les logos et les éléments critiques placés à moins de 20px de n'importe quel bord risquent d'être partiellement rognés.
**Adaptations de modèles recommandées pour Twitter (par style) :**
| Modèle OG | Adaptation Twitter |
|-------------|-------------------|
| Terminal/CLI | Déplacez le chrome de la fenêtre plus bas (les coins arrondis de Twitter rognent les points en haut à gauche) ; utilisez la couleur d'accentuation pour le contraste en mode sombre |
| Magazine Editorial | Utilisez le préréglage Midnight Ink (variante sombre conçue pour X) ; déplacez le puits photo plus haut (50 % supérieurs au lieu de plus bas) |
| Swiss Minimal | Ajoutez une variante mode sombre : arrière-plan `#0a0a0a` avec accentuation intacte, texte blanc ; les rangées de données survivent bien au recadrage 1:1 |
| Pixel Retro | Arrière-plans naturellement sombres — les préréglages NES/Arcade/CGA sont déjà prêts pour X ; réduisez les éléments HUD de 10 % pour dégager le masque de bord |
| Brutalist | La variante à fond noir est déjà native du mode sombre ; le bloc de titre asymétrique reste par défaut dans la zone des 60 % supérieurs |
| Newspaper | Ajoutez une variante sombre avec arrière-plan `#1a1a1a` ; la mise en page multi-sections devrait s'empiler verticalement pour la zone de recadrage carré |
## 5. Posters de cartes player
Pour le contenu vidéo/audio, le type de carte `player` nécessite une image d'affiche :
```html
```
L'image d'affiche est affichée avant que l'utilisateur appuie sur lecture. Concevez-la comme une vignette attrayante — incluez une superposition de bouton de lecture (triangle centré dans un cercle), le titre de la vidéo et une image du contenu. La même recommandation de rapport 2:1 s'applique. Le bouton de lecture doit être le plus grand élément dans la zone carrée centrale.
Pour les affiches générées par IA : invite pour "miniature vidéo avec bouton de lecture centré, texte du titre dans le tiers supérieur, arrière-plan sombre, 1200x675px."
## 6. Système de styles (partagé avec OG — 16 styles)
Les images Twitter utilisent les mêmes 16 styles visuels de **og-image-generator** §3 et de [references/style-system-v3.md](../og-image-generator/references/style-system-v3.md). Tous les modèles fonctionnent pour Twitter — changez simplement la hauteur du canevas à 675px.
| # | Style | Mode sombre | Potentiel CTR sur X | Modèle |
|---|-------|-----------|----------------|----------|
| 1 | Terminal / CLI | Toujours sombre | ★★★★★ | [terminal.tsx](../og-image-generator/templates/terminal.tsx) |
| 2 | Magazine Editorial | Midnight Ink | ★★★ | [magazine.tsx](../og-image-generator/templates/magazine.tsx) |
| 3 | Swiss Minimal | Nécessite variante | ★★ | [swiss.tsx](../og-image-generator/templates/swiss.tsx) |
| 4 | Pixel Retro | Tout sombre | ★★★★ | [pixel.tsx](../og-image-generator/templates/pixel.tsx) |
| 5 | Brutalist | Fond noir | ★★★★★ | [brutalist.tsx](../og-image-generator/templates/brutalist.tsx) |
| 6 | Newspaper | Nécessite variante | ★★★ | [newspaper.tsx](../og-image-generator/templates/newspaper.tsx) |
| 7 | Neo-Brutalism | Oui | ★★★★★ | [neo-brutalism.tsx](../og-image-generator/templates/neo-brutalism.tsx) |
| 8 | Bento Grid | Base sombre | ★★★★ | [bento-grid.tsx](../og-image-generator/templates/bento-grid.tsx) |
| 9 | Neo-Swiss Gradient | Clair | ★★ | [neo-swiss-gradient.tsx](../og-image-generator/templates/neo-swiss-gradient.tsx) |
| 10 | Dark Gradient+Texture | Toujours sombre | ★★★★★ | [dark-gradient-texture.tsx](../og-image-generator/templates/dark-gradient-texture.tsx) |
| 11 | Text Overlay | Dépend du fond | ★★★★ | [text-overlay-hybrid.tsx](../og-image-generator/templates/text-overlay-hybrid.tsx) |
| 12 | Cinematic | Adapté au sombre | ★★★ | [cinematic.tsx](../og-image-generator/templates/cinematic.tsx) |
| 13 | Collage | Varie | ★★★★ | [collage.tsx](../og-image-generator/templates/collage.tsx) |
| 14 | Risograph | Base papier | ★★★ | [risograph.tsx](../og-image-generator/templates/risograph.tsx) |
| 15 | Vaporwave | Néon sombre | ★★★★★ | [vaporwave.tsx](../og-image-generator/templates/vaporwave.tsx) |
| 16 | Grunge | Foncé délavé | ★★★★ | [grunge.tsx](../og-image-generator/templates/grunge.tsx) |
**Performants sur X** : Terminal, Brutalist, Neo-Brutalism, Dark Gradient, Vaporwave — un contraste élevé + un arrière-plan sombre sont optimaux pour le fil X. **À éviter sur X** : styles trop corporatifs et de marque sans variante sombre ; arrière-plans blanc pur dans le fil en mode sombre.
## 7. Police et typographie
Mêmes règles que pour OG. Voir **og-image-generator** [references/typography.md](../og-image-generator/references/typography.md).
Ajout spécifique à Twitter : étant donné que les images du fil s'affichent à une largeur d'environ 260px (contre ~500px pour le flux de bureau OG), augmentez la taille de police minimale de 4px — utilisez un minimum de 28px au lieu de 24px.
## 8. Vérifications YAML de l'agent
```yaml
checks:
# P0 — doit passer
- id: dimensions-twitter
description: twitter:image fait 1200x675px (2:1) ou 1200x628px (interplateforme)
- id: card-type-match
description: twitter:card est summary_large_image lors de l'utilisation d'une grande image
- id: absolute-url
description: L'URL de twitter:image est absolue (https://) et accessible publiquement
- id: format
description: Le format de l'image est PNG, JPG ou WebP (pas SVG)
# P1 — devrait passer
- id: og-fallback
description: og:image est également défini (comme solution de repli pour les plateformes qui ne lisent pas twitter:image)
- id: timeline-safe-zone
description: Le texte critique et l'ancrage visuel principal se trouvent dans les 60 % supérieurs ; rien de critique dans les 20 % inférieurs
- id: square-crop-survival
description: L'élément visuel le plus important se lit correctement dans un recadrage central 1:1 (fil mobile)
- id: dark-mode
description: Le modèle inclut une variante à arrière-plan sombre ou utilise un style par défaut adapté au mode sombre
- id: edge-mask-clearance
description: Les logos et les éléments critiques sont à ≥20px de tous les bords (masque à coins arrondis de Twitter)
# P2 — souhaitable
- id: cross-platform-compatible
description: La même image en 1200x628px fonctionne à la fois pour OG et Twitter sans génération séparée
- id: ai-text-validated
description: Si l'image est générée par IA, tout le texte a été validé par rapport à la source — aucun texte halluciné ou mal orthographié
- id: player-poster
description: Les pages de carte player ont une image d'affiche dédiée avec bouton de lecture
- id: content-aware-twitter
description: L'image reflète le contenu spécifique de la page, pas seulement un titre dans un modèle de taille Twitter
```
## 9. Erreurs courantes
1. **Mauvais rapport d'aspect** : Utilisation du 1200x630 d'OG (1,91:1) sans ajustement. Bien que Twitter le tolère, le 1200x675 (2:1) remplit mieux la carte et évite le letterboxing.
2. **Balise `twitter:image` manquante** : Se fier uniquement au fallback OG — sans `twitter:image` explicite, vous perdez le contrôle sur l'image que Twitter choisit.
3. **Texte dans les 20 % inférieurs** : Twitter recadre les images à ~1:1 sur mobile. Le texte critique près du bas est coupé dans le fil.
4. **Aucune prise en compte du mode sombre** : Les images à arrière-plan clair paraissent dures dans le fil en mode sombre de Twitter, que ~40 % des utilisateurs ont activé.
5. **Utiliser SVG** : Twitter ne prend pas en charge le SVG pour les images de carte. Générez toujours du PNG ou du JPG.
6. **GIF sans première image statique** : Twitter n'affiche que la première image des GIF. Assurez-vous que l'image 1 est une image fixe significative.
7. **Hallucination de texte d'IA dans la vue 260px** : Le texte généré par IA qui semble correct en taille réelle peut afficher des caractères brouillés au rendu petit. Validez à l'échelle 1/4.
8. **Logos touchant les bords** : Le masque à coins arrondis de Twitter rogne ~10px des bords. Gardez les logos à ≥20px des bords.
## 10. Tests
- **Validateur de carte** : https://cards-dev.twitter.com/validator — montre exactement comment la carte sera rendue. Collez n'importe quelle URL pour prévisualiser.
- **Test manuel** : Tweetez un lien depuis un compte de test, puis vérifiez le fil + les vues développées.
- **Test mode sombre** : Vérifiez la carte dans les clients Twitter en mode clair et sombre.
- **Cache busting** : Twitter met en cache les données de carte de manière agressive (jusqu'à 7 jours). Après des modifications, utilisez le Validateur de carte pour forcer un nouveau scraping.
- **Test de recadrage mobile** : Faites une capture d'écran de la carte au rapport 1:1 (recadrez à 675x675 au centre) pour vérifier que le recadrage carré communique toujours le contenu de la page.
## 11. Compétences connexes
Ces compétences sont optionnelles — cette compétence fonctionne de manière autonome. Installez-les si vous avez besoin de capacités supplémentaires :
**Même dépôt** (toujours installées ensemble) :
- **og-image-generator** : Génération d'images OG (1200x630, 1,91:1) — le pipeline de rendu complet, les 6 styles, les modèles de départ, le guide de typographie, les contraintes de Satori. Ce générateur de cartes Twitter réutilise toute son infrastructure.
**Dépôts séparés** (peuvent être installés ou non) :
- **twitter-cards** (marketing-skills) : Configuration des balises meta HTML pour `twitter:card`, `twitter:site`, `twitter:creator`, validation. Gère comment DÉFINIR la balise ; cette compétence gère comment CRÉER l'image.
- **open-graph** (marketing-skills) : Configuration des balises meta HTML pour `og:title`, `og:image`, `og:url`, outils de test de plateforme
- **social-share-generator** (marketing-skills) : Interface utilisateur du bouton de partage qui consomme les données de la carte Twitter lorsque les utilisateurs partagent des liens vers X
## FAQ
### Qu'est-ce qu'un générateur d'images de cartes Twitter ?
Un générateur d'images de cartes Twitter est un outil ou une compétence qui crée des images spécialement optimisées pour les aperçus de liens sur X (Twitter). Ces images respectent le format d'image spécifique de Twitter (2:1, 1200x675 px) et les considérations de conception, garantissant qu'elles s'affichent correctement et de manière attrayante lorsqu'un lien est partagé sur la plateforme.
### En quoi ce générateur diffère-t-il d'un générateur d'images Open Graph (OG) générique ?
Bien qu'il partage l'infrastructure avec les générateurs d'images OG, cette compétence adapte spécifiquement les dimensions de sortie au format 1200x675 px (2:1) de Twitter, intègre des adaptations de conception spécifiques à X, prend en compte les zones de sûreté de la timeline et prend en charge les exigences des cartes de lecteur. Les images OG génériques sont généralement de 1200x630 px (1,91:1).
### Quelles sont les dimensions recommandées pour une image de carte Twitter ?
Les dimensions recommandées pour une image de carte Twitter sont de 1200x675 pixels, ce qui offre un format d'image 2:1. Cela garantit que l'image remplit efficacement la carte et évite l'effet letterbox.
### Puis-je utiliser des images SVG pour les cartes Twitter ?
Non, Twitter ne prend pas en charge le SVG pour les images de carte. Vous devez utiliser les formats PNG, JPG ou WebP. Si vous utilisez un GIF, seule la première image sera affichée.
### Comment ce générateur gère-t-il le mode sombre pour les images de cartes Twitter ?
Le générateur prend en compte l'utilisation du mode sombre de Twitter en privilégiant les styles avec fond sombre ou en proposant des variantes en mode sombre pour les modèles. Cela garantit que les images se fondent naturellement dans la timeline en mode sombre et conservent un attrait visuel pour environ 40 % des utilisateurs de Twitter.
### Qu'est-ce que la « zone de sûreté de la timeline » et pourquoi est-elle importante pour les images de cartes Twitter ?
La « zone de sûreté de la timeline » désigne les 60 % supérieurs de l'image où le contenu critique (titre, visuel principal) doit être placé. C'est crucial car Twitter recadre les images à environ 1:1 sur les timelines mobiles jusqu'à ce que le tweet soit développé, ce qui signifie que le contenu dans les 20 % inférieurs peut être coupé.