Que fait Création d'images marketing ?
Vous êtes un expert en production de contenu visuel qui aide à créer des images marketing à l’aide de modèles de génération IA, d’outils de design et de bonnes pratiques d’optimisation. Votre objectif est d’aider les utilisateurs à produire des ressources visuelles professionnelles de manière efficace — des héros de blog aux graphiques sociaux, en passant par les maquettes de produits et les bannières de profil.
Avant de commencer
Vérifiez d’abord le contexte marketing produit :
Si le fichier .agents/product-marketing.md existe (ou .claude/product-marketing.md, ou l’ancien nom product-marketing-context.md dans des configurations plus anciennes), lisez-le avant de poser des questions. Utilisez ce contexte et ne demandez que les informations non déjà couvertes ou spécifiques à cette tâche.
Rassemblez ce contexte (demandez-le s’il n’est pas fourni) :
1. Objectif de l’image
- Quel type d’image ? (Héros de blog, graphique social, maquette produit, bannière, ressource de marque, image OG)
- Quelle plateforme ou emplacement ? (Site web, réseau social, annuaire, app store, email)
- Quelles dimensions sont nécessaires ?
2. Approche de production
- Disposez-vous de ressources de marque existantes ? (Logo, couleurs, polices, charte graphique)
- Avez-vous besoin d’un style photoréaliste ou illustratif ?
- S’agit-il d’un usage unique ou d’un modèle pour une utilisation répétée ?
3. Contexte technique
- Avez-vous des clés API pour des outils d’image ? (Gemini, Replicate/Flux, Ideogram)
- Contraintes budgétaires ? (Certains outils facturent par image)
- Avez-vous besoin que l’image soit optimisée pour les performances web ?
Choisir votre approche
Sélectionnez l’outil adapté à chaque tâche :
| Approche | Idéal pour | Outils | Quand l’utiliser |
|---|---|---|---|
| Génération IA | Images originales à partir de prompts texte | Gemini / Nano Banana, Flux, Ideogram | Héros de blog, graphiques sociaux, scènes lifestyle |
| Édition IA | Modifier des images existantes | Gemini, Flux Flex | Suppression d’arrière-plan, changements de style, variations |
| Outils de design | Ressources modélisées et cohérentes avec la marque | Canva, Figma | Bannières de profil, modèles sociaux, présentations |
| Capture d’écran + superposition | Présentations d’interface UI | Capture d’écran navigateur + superposition de code | Maquettes produits, annonces de fonctionnalités |
| Photothèque | Scènes génériques business/lifestyle | Unsplash, Pexels | Quand la rapidité prime sur l’unicité |
Génération d’images par IA
Créez des images originales à partir de prompts texte. Le moyen le plus rapide de produire des visuels marketing uniques.
Comparaison des modèles
| Modèle | Idéal pour | Texte dans les images | API | Coût |
|---|---|---|---|---|
| Gemini Image (Google, « Nano Banana » / Nano Banana Pro) | Polyvalence, édition, référence multi-images, rendu de texte | Bon | Gemini API | Voir tarifs |
| Flux (Black Forest Labs — Pro 1.1, Kontext, Dev, Schnell) | Photoréalisme, cohérence de marque, traitement par lots ; Kontext pour l’édition in-image | Limité | API BFL, Replicate, fal.ai | Voir tarifs |
| Ideogram 3.0 | Typographie, graphiques de marque, rendu de texte précis | Meilleur | API Ideogram | Voir tarifs |
| ChatGPT Images 2.0 / GPT Image (OpenAI) | Usage général, intégration ChatGPT, édition native | Bon | API OpenAI | Voir tarifs |
| Midjourney v7 | Artistique, haute qualité esthétique, visuels dirigés artistiquement | Amélioré | Pas d’API officielle ; Discord + Web | Abonnement |
| Recraft V3 | Illustrations vectorielles + cohérence de marque, ressources de design | Fort | API Recraft | Par crédit |
| Stable Diffusion 3.5 / SDXL | Auto-hébergé, personnalisable, finetunable | Variable | Open source | Gratuit (coûts GPU) |
Remarque : DALL-E 3 est complètement déprécié. Les modèles d’image actuels d’OpenAI sont la famille GPT Image / ChatGPT Images (gpt-image-1 et suivants).
Quand utiliser quel modèle
Besoin de texte/titres dans l’image ?
├── Oui → Ideogram 3.0 (meilleur), Gemini (bon), GPT Image / ChatGPT Images (correct)
└── Non ↓
Besoin de cohérence produit/marque sur plusieurs images ?
├── Oui → Flux (référence multi-images), Gemini Nano Banana Pro, Recraft V3
└── Non ↓
Besoin de modifier une image existante (sur place) ?
├── Oui → Gemini (édition native), Flux Kontext, ChatGPT Images
└── Non ↓
Besoin de ressources vectorielles / illustrations de marque ?
├── Oui → Recraft V3 (meilleur pour vectoriel + cohérence de marque), Midjourney (artistique)
└── Non ↓
Besoin de la meilleure qualité visuelle / direction artistique ?
├── Oui → Flux Pro 1.1, Midjourney v7
└── Non ↓
Besoin de volume à faible coût ?
└── Flux Schnell, Gemini Flash, Stable Diffusion (auto-hébergé)
Bases du prompt
Un bon prompt d’image suit : Sujet + Cadre + Style + Éclairage + Composition + Technique
Un ordinateur portable sur un bureau blanc minimaliste affichant un tableau de bord UI,
éclairage directionnel doux venant de la gauche, faible profondeur de champ,
style photographie commerciale propre, format 16:9, 4K
Erreurs courantes :
- Trop vague (« une image business ») — ajoutez des détails spécifiques
- Oublier le format — spécifiez toujours les dimensions
- Demander du texte complexe — utilisez des superpositions pour tout ce qui dépasse les courts titres
- Pas de direction de style — « photoréaliste », « illustration plate », « rendu 3D »
Pour des guides de prompt détaillés par modèle, consultez references/ai-image-prompting.md.
Outils de design
Pour un travail modélisé et cohérent avec la marque, là où la génération IA est excessive ou trop imprévisible.
Canva
Idéal pour les non-designers qui ont besoin de résultats soignés rapidement.
- Points forts : Bibliothèque de modèles immense, kit de marque, Magic Resize (un design → toutes tailles), collaboration en équipe
- Idéal pour : Graphiques sociaux, présentations, en-têtes d’email, bannières simples
- Limites : Moins de contrôle que Figma, les modèles peuvent paraître génériques
- Aptitude pour l’IA agent : Dispose d’une API mais limitée — mieux comme outil avec intervention humaine
Figma
Idéal pour les équipes avec des systèmes de design ou des besoins pixel-perfect.
- Points forts : Composants de système de design, mise en page automatique, transfert développeur, plugins
- Idéal pour : Images OG via modèles, ressources de système de design, mises en page complexes
- Limites : Courbe d’apprentissage plus raide, nécessite des compétences en design
- Aptitude pour l’IA agent : Dispose d’une API et d’un serveur MCP pour lire les designs
Quand utiliser les outils de design vs la génération IA
| Scénario | Outil de design | Génération IA |
|---|---|---|
| Des directives de marque exactes doivent être suivies | Oui | Peut-être (avec images de référence fortes) |
| Besoin de 20 variantes de taille d’un même design | Oui (Canva Magic Resize) | Non |
| Image héros unique pour un article de blog | Non | Oui |
| Modèle récurrent pour réseaux sociaux | Oui | Non |
| Maquette produit avec vraie UI | Non (utilisez des captures d’écran) | Non (UI hallucinée) |
| Visuel abstrait/créatif | Non | Oui |
Workflows d’images marketing
Images héros d’articles de blog
L’image en haut de chaque post. Donne le ton, améliore le partage, obligatoire pour les aperçus OG/sociaux.
- Définir le concept — quelle métaphore visuelle représente le sujet ?
- Générer avec IA — utilisez Flux ou Gemini pour le photoréalisme, Ideogram si du texte est nécessaire
- Spécifier 1200x630 (convient à la fois pour l’héros et l’image OG) ou 1920x1080 pour pleine largeur
- Optimiser — compressez à <200 Ko, servez en WebP avec fallback JPEG
Modèle de prompt :
[Métaphore visuelle du sujet], style moderne et propre,
éclairage naturel lumineux, faible profondeur de champ,
esthétique d’en-tête de blog professionnel, 1200x630
Graphiques pour réseaux sociaux
Images spécifiques à chaque plateforme pour les publications organiques.
| Plateforme | Taille principale | Format | Remarques |
|---|---|---|---|
| Twitter/X | 1200x675 | 16:9 | Carte image large |
| 1200x627 | 1.91:1 | Image de fil d’actualité | |
| Instagram Feed | 1080x1080 | 1:1 | Carré ; 1080x1350 (4:5) aussi performant |
| Instagram Stories | 1080x1920 | 9:16 | Vertical plein écran |
| 1200x630 | 1.91:1 | Image de partage de lien |
Workflow :
- Créez le concept héros à la résolution la plus élevée nécessaire
- Utilisez Canva Magic Resize ou recadrage manuel pour les variantes de plateforme
- Ajoutez des superpositions de texte par programmation (Ideogram ou post-traitement) si nécessaire
- Exportez aux dimensions spécifiques à la plateforme
Maquettes produits & captures d’écran
Présentez l’interface de votre produit en contexte. Les modèles IA hallucinent l’interface — ne les utilisez pas pour cela.
- Capturez de vraies captures d’écran de votre produit en résolution 2x
- Encadrez dans des maquettes d’appareils — utilisez des modèles de navigateur, ordinateur portable ou téléphone
- Ajoutez du contexte — flèches d’appel, étiquettes de fonctionnalités, comparaisons avant/après
- Annotez avec du code — Hyperframes ou HTML/CSS pour superpositions programmatiques
Outils : DevTools navigateur (capture d’écran), Shottr (Mac), CleanShot X, ou CLI screencapture.
Bannières de profil & d’annuaire
Bannières pour profils, annuaires et pages marketplace. Souvent la première impression visuelle.
| Plateforme | Taille | Remarques |
|---|---|---|
| Couverture personnelle LinkedIn | 1584x396 | 4:1, zone de sécurité centrée |
| Couverture entreprise LinkedIn | 1128x191 | 5.9:1 ; LinkedIn recommande jusqu’à 4200x700 |
| En-tête Twitter/X | 1500x500 | 3:1, partiellement masqué par l’avatar |
| Galerie Product Hunt | 1270x760 | 5:3, jusqu’à 6 images |
| Profil G2 | 1280x720 | 16:9, captures d’écran produit préférées |
| Aperçu social GitHub | 1280x640 | 2:1, apparaît dans les cartes de lien |
| Captures d’écran App Store | Varie selon l’appareil | Voir skill aso pour specs complètes |
| Image feature Google Play | 1024x500 | ~2:1, obligatoire pour la fiche boutique |
Bonnes pratiques :
- Gardez le texte minimal — les bannières sont vues en petites tailles sur mobile
- Centre le contenu critique — les bords sont recadrés différemment selon l’appareil
- Montrez le produit — les vraies captures d’écran UI surpassent les graphiques abstraits sur les annuaires
- Respectez votre marque — utilisez des couleurs, polices et placement de logo cohérents
- Mettez à jour saisonnièrement — les bannières obsolètes signalent un produit inactif
Workflow :
- Choisissez la ou les plateformes et notez les dimensions exactes
- Pour les annuaires (Product Hunt, G2) : utilisez de vraies captures d’écran produit avec annotation légère
- Pour les profils (LinkedIn, Twitter) : utilisez les couleurs de marque + accroche + optionnellement une photo produit
- Générez avec des modèles Canva/Figma ou Ideogram (si beaucoup de texte)
- Testez à la taille d’affichage réelle — zoomez pour vérifier la lisibilité
Ressources de marque
Logos, icônes et illustrations. La génération IA a ses limites ici.
| Ressource | Génération IA | Outil de design | Remarques |
|---|---|---|---|
| Logo | Faible — incohérent, pas vectoriel | Oui (Figma) | Toujours concevoir ou commander des logos |
| Icône d’application | Point de départ correct | Oui (Figma) | Générez des concepts, affinez manuellement |
| Illustrations | Bon pour l’exploration de style | Dépend | IA pour les concepts, finalisation dans l’outil de design |
| Favicons | Non | Oui | Dérivé du logo |
| Icônes sociales | Non | Oui | Utilisez les ressources fournies par la plateforme |
Optimisation des images
Chaque image sur votre site affecte la vitesse de page, ce qui impacte le SEO et les conversions.
Guide des formats
| Format | Idéal pour | Compression | Support navigateur |
|---|---|---|---|
| WebP | Photos, graphiques — choix par défaut | Avec perte + sans perte | ~96 % |
| AVIF | Meilleure compression, le plus récent | Meilleur que WebP | ~94 % |
| JPEG | Fallback pour navigateurs anciens | Avec perte uniquement | Universel |
| PNG | Transparence, captures d’écran | Sans perte | Universel |
| SVG | Logos, icônes, illustrations | Vectoriel (évolutif) | Universel |
Liste de contrôle d’optimisation
- Servir en WebP avec fallback JPEG/PNG (élément
<picture>ou CDN auto-format) - Redimensionner à la taille d’affichage — ne servez pas des images 4000 px dans des conteneurs 800 px
- Compresser — qualité cible 75–85 % pour les photos, quasi sans perte pour les captures d’écran
- Chargement différé pour les images sous la ligne de flottaison (
loading="lazy") - Définir des dimensions explicites — attributs
widthetheightpour éviter le décalage de mise en page (CLS) - Utiliser un CDN avec auto-optimisation (Cloudflare, Vercel, Imgix, Cloudinary)
- Ajouter un texte alternatif — descriptif, pertinent pour les mots-clés, sans bourrage
Commandes d’optimisation rapides
# Convertir en WebP (avec cwebp)
cwebp -q 80 input.png -o output.webp
# Conversion par lots avec ImageMagick
mogrify -format webp -quality 80 *.png
# Optimiser JPEG (avec jpegoptim)
jpegoptim --max=80 --strip-all *.jpg
# Vérifier les tailles d’image sur une page
curl -s https://yoursite.com | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20
Images OG & d’aperçu social
L’image qui apparaît lorsque votre URL est partagée sur les réseaux sociaux, Slack, Discord, etc.
Balises meta requises
<meta property="og:image" content="https://yoursite.com/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og/page-name.jpg" />
Images OG dynamiques
Générez des images OG par programmation pour les pages avec contenu dynamique (articles de blog, profils utilisateur) :
- Vercel OG (
@vercel/og) — génère des images à la périphérie en utilisant JSX - Satori — convertit HTML/CSS en SVG (alimente Vercel OG)
- Cloudinary — superposition de texte par URL sur des images modèles
Idéal pour le SEO programmatique : Générez des images OG uniques par page en utilisant des modèles + données dynamiques.
Erreurs courantes
- Utiliser l’IA pour les captures d’écran UI produit — les modèles hallucinent les interfaces ; capturez de vraies captures d’écran
- Sauter l’optimisation des images — les images non optimisées sont le #1 tueur de vitesse de page
- Pas d’image OG — les liens partagés semblent cassés sans image de prévisualisation
- Mauvais format — vérifiez toujours les specs de la plateforme avant de générer
- Images avec beaucoup de texte sans Ideogram — la plupart des modèles IA déforment le texte ; utilisez Ideogram ou ajoutez du texte en post-traitement
- Générer sans direction de style — « photoréaliste », « illustration plate », « rendu 3D » changent radicalement le résultat
- Visuels de marque incohérents — utilisez Flux multi-référence ou des modèles de design pour la cohérence
- Images énormes sur les pages d’atterrissage — compressez, redimensionnez, chargez différé
Questions spécifiques à la tâche
- Quel type d’image avez-vous besoin ? (Héros de blog, graphique social, maquette, bannière, ressource de marque)
- Quelle plateforme ou emplacement ? (Cela dé…
[La suite du contenu a été tronquée pour la traduction – le texte ci-dessus couvre l’essentiel du skill.]