Créer des images avec l’IA pour un site : du premier essai à la bannière

Une belle image ne trouve pas forcément sa place sur une page. La tasse se retrouve derrière le titre, le décor gêne la lecture et le cadrage mobile coupe l’anse. Le prompt doit donc préciser le rôle de l’image dans la mise en page.

Indiquez l’usage, le sujet, la composition, la lumière et les contraintes. Vérifiez ensuite le résultat avec le vrai titre, sur écran large et étroit. Préparez enfin le fichier et son texte alternatif.

Notre exemple et sa méthode

Nous avons créé quatre images de céramiques fictives : une génération initiale, deux retouches successives et une nouvelle pièce à partir d’une référence de style. Cet exercice éditorial Neaptide date du 6 septembre 2026. Il ne s’agit ni d’un projet client ni d’un comparatif de modèles. L’outil intégré de génération n’a fourni ni identifiant de modèle ni seed. Les prompts anglais ci-dessous sont ceux qui ont réellement été envoyés ; ils ne garantissent pas un résultat identique.

• Télécharger les prompts et l’ordre des opérations (JSON)

Décider où l’image sera utilisée

Pour notre atelier, le titre et le bouton seront à gauche, la tasse à droite. Une vignette d’article doit rester lisible en petit. Une fiche produit doit représenter fidèlement l’objet vendu. Ces usages demandent des consignes différentes.

Premier essai : le sujet prend toute la place

Create a wide landscape photograph of a handmade ceramic mug for a pottery studio website. Warm daylight, natural linen, tasteful editorial product photography. No text, logos or watermark. Save the generated image.

Le prompt précise l’ambiance et les matières, mais pas la disposition des éléments. Le générateur a ajouté une plante et des fleurs. L’image peut servir d’illustration seule, mais notre bannière demande un fond moins chargé à gauche et une tasse plus petite pour laisser la place au texte.

Retoucher la composition

Nous transmettons cette image comme point de départ. La demande précise ce qui doit changer et ce qu’il faut conserver : déplacer la tasse, retirer le décor, garder les matières et la lumière.

Edit the supplied generated mug image for a pottery website hero. Make a wide 3:2 landscape composition. Keep one recognizably matching cream speckled ceramic mug with the same brown unglazed foot and curved handle, the linen, warm daylight and natural photographic style. Reframe so the complete mug including handle sits in the right third and occupies at most 40% of the image width. Leave the left half a quiet light warm off-white surface with very little texture for a dark HTML heading to be added later. Remove the plant and dried flowers. No lettering, logos, border or watermark. The mug is a fictional design for an educational example.

L’anse et les proportions ont aussi légèrement changé. Pour cet objet fictif, c’est acceptable. Pour un produit réel, il faudrait comparer le résultat à la photo d’origine. Une consigne de préservation ne garantit pas une fidélité parfaite.

Ajoutez le titre et le bouton en HTML : ils resteront sélectionnables, traduisibles et modifiables. Jugez ensuite l’image dans cette mise en page.

• Comparer les deux images dans la bannière

Préparer la version mobile

Un recadrage central peut couper la tasse ou son anse. Essayez d’abord de conserver l’image entière et de placer le texte au-dessus. Si le bloc exige un format vertical, préparez une autre composition.

Edit this generated pottery hero into a portrait 2:3 mobile website image. Use the input image as the edit target. Keep a recognizably matching single cream speckled ceramic mug, brown unglazed foot, right handle, warm daylight, pale wall, wooden table and linen. Place the complete mug and handle in the lower half, comfortably inside both side edges. Keep the upper 40 percent quiet pale wall for dark HTML text to be added by the website. No plant, flowers, text, logos or watermark. Preserve the restrained photographic style. This is a fictional product for an educational website example.

Pour afficher une composition différente selon la largeur de l’écran, utilisez l’élément HTML picture avec des éléments source qui précisent quand choisir chaque image. Pour proposer plusieurs résolutions de la même composition, utilisez srcset et sizes. Dans la démonstration, vous pouvez comparer le recadrage central de l’image large et la version verticale.

• Les images adaptatives expliquées par web.dev

Garder le même style d’une image à l’autre

Pour illustrer un autre article, nous demandons un bol. L’image précédente sert de référence de style : même lin, même bois, même lumière chaude et même palette sobre. Le sujet, lui, change.

Create a new square editorial image for an educational pottery studio blog, using the supplied image ONLY as a style reference, not an edit target. Show a single shallow handmade ceramic bowl, cream speckled glaze with a brown unglazed foot, fully visible on natural linen over a wooden table, pale warm wall, soft window daylight, restrained warm neutral palette and quiet photographic texture matching the reference. Bowl in lower right area, simple upper left background, no other pottery, no plants, flowers, people, text, logos or watermark. The bowl is a fictional design, not a real product photograph.

Conservez une référence et quelques consignes stables. Comparez les images côte à côte : le mot « beige » ne suffit pas à obtenir les mêmes nuances.

Corriger un problème précis

• Le sujet gêne le titre : nommez la zone à laisser libre.
• Le décor est chargé : indiquez les éléments à retirer.
• Le produit a changé : repartez de la photo d’origine et limitez la retouche.
• La série manque de cohérence : réutilisez la même référence.
• Les retouches s’éloignent du résultat voulu : revenez à la dernière version utile.

Préparer la publication

Nos fichiers WebP pèsent environ 189, 89, 71 et 80 Kio. Ces valeurs correspondent à nos images et au niveau de compression choisi. Vérifiez les contours et les textures après compression ; renseignez largeur et hauteur pour réserver la place dans la page.

L’attribut alt fournit une description textuelle de l’image : rédigez-la brièvement et utilisez la légende pour expliquer l’intérêt de la retouche. Une image purement décorative peut avoir un alt vide. Google recommande des noms de fichiers explicites, un texte pertinent autour de l’image et des descriptions sans accumulation de mots-clés. Expliquez également dans l’article ce que montre l’image, pour que le propos reste compréhensible sans elle.

• Conseils de Google pour le référencement des images

Avant de publier

1. Testez avec le vrai titre et le bouton.
2. Vérifiez les écrans larges et étroits.
3. Comparez tout produit réel à sa photo d’origine.
4. Contrôlez la compression et le chargement.
5. Ajoutez alt et légende ; conservez prompt et image source.

• Créer avec Codex