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

Une image peut être belle et ne pas trouver sa place sur une page. La tasse se retrouve derrière le titre, le décor gêne la lecture, le cadrage mobile coupe l’anse. C’est donc par le rôle de l’image dans la mise en page que le prompt doit commencer.

Indiquez à quoi servira l’image, ce qu’elle montre, la composition, la lumière et les contraintes. Vérifiez ensuite le résultat avec le vrai titre, sur un écran large puis sur un écran étroit. Il reste alors à préparer 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 valeur du paramètre aléatoire. Les prompts anglais ci-dessous sont ceux que nous avons réellement envoyés, sans garantie d’obtenir un résultat identique.

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

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

Dans le cas de notre atelier, le titre et le bouton seront à gauche, la tasse à droite. Une vignette d’article, elle, doit rester lisible en petit, et une fiche produit doit montrer fidèlement l’objet vendu. À chaque usage ses consignes.

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. Seule, l’image peut servir d’illustration, mais notre bannière demande un fond moins chargé à gauche et une tasse plus petite pour laisser la place au texte.

Retoucher la composition

Cette image nous sert de point de départ. La demande dit ce qui doit changer et ce qui doit rester : la tasse se déplace, le décor disparaît, les matières et la lumière sont conservées.

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. Demander de préserver l’objet ne garantit pas qu’il le sera parfaitement.

Ajoutez le titre et le bouton en HTML : on pourra encore les sélectionner, les traduire et les modifier. 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 risque de couper la tasse ou son anse. Essayez d’abord de garder l’image entière et de placer le texte au-dessus. Si le bloc impose vraiment 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, dont les éléments source précisent quand choisir chaque image. Quand la composition reste la même et que seule la résolution varie, srcset et sizes suffisent. La démonstration permet de comparer le recadrage central de l’image large avec 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, et nous reprenons le lin, le bois, la lumière chaude et la palette sobre. Seul le sujet 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.

Gardez une image de référence et quelques consignes de style qui ne bougent pas. Comparez les images côte à côte, car écrire « beige » dans deux prompts ne donne pas forcément 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, limitez la retouche et vérifiez à nouveau.
• La série manque d’unité : 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, et renseignez la largeur et la hauteur pour réserver la place dans la page.

L’attribut alt décrit l’image en texte. Rédigez-le brièvement et servez-vous de la légende pour expliquer à quoi a servi 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 qui n’empilent pas les mots-clés. Dites aussi dans l’article ce que montre l’image : le propos doit rester 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 un texte alternatif et une légende, et conservez le prompt avec l’image source.

• Créer avec Codex