Nous avons créé Thumbnail Prompt Builder : une petite expérience pour adapter naturellement les vignettes générées par IA à différents supports

Pour créer les visuels d'en-tête d'articles de blog, les outils de génération d'images par IA comme ChatGPT permettent aujourd'hui d'obtenir des résultats très convaincants.

Cependant, dès qu'on passe à une utilisation concrète, un problème apparaît.

Les dimensions d'image requises varient énormément d'un support à l'autre.

Par exemple, pour cet outil, nous avons prévu les sorties suivantes.

Au départ, je pensais : « Ce serait pratique de créer une seule image carrée et de la décliner automatiquement dans toutes les tailles, non ? »

C'est ainsi qu'a commencé le développement de Thumbnail Prompt Builder.

Ce que je voulais créer au départ

Au début, l'objectif était simple.

Un outil qui génère, à partir du titre et du résumé d'un article, un prompt à coller dans une IA de génération d'images.

Ensuite, en important l'image carrée générée,

• Instagram
• Thumbnail
• X
• Cover

je voulais pouvoir la convertir automatiquement dans chacun des formats suivants :

En somme, l'idéal était le suivant.

Saisie des informations de l'article
↓
Création du prompt d'image
↓
Génération de l'image carrée
↓
Déclinaison automatique aux formats de chaque support

Au départ, la conception était assez directe.

« Si l'on place le sujet principal au centre et qu'on laisse de l'espace autour, cela devrait fonctionner sur tous les supports. »

C'est ce que je pensais.

Problèmes constatés lors des premiers tests

Cependant, lorsque nous avons affiché les images en conditions réelles, des problèmes sont apparus.

Le problème concerne surtout les images de couverture (Cover).

Lorsqu'une image carrée est convertie au format paysage,

• le haut et le bas sont fortement rognés,
• le sujet principal devient anormalement petit,
• la bordure du fond devient visible,
• et la composition, valable en format carré, ne tient plus en format Cover.

Ce sont les problèmes qui se sont produits.

Au départ, nous avons testé plusieurs approches tout en échangeant avec Codex.

Par exemple :

• Limiter la SAFE ZONE aux 60 % centraux
• Placer le sujet principal au centre
• Éviter les objets en arrière-plan
• Étendre les bords gauche et droit uniquement avec la couleur d'arrière-plan
• Appliquer un fondu sur les bords de l'image d'origine
• Sur X / Cover, réduire légèrement l'image pour limiter le risque de recadrage

etc.

Chacune de ces approches a eu un effet certain.

Cependant, un problème décisif est resté.

Il existe des limites à la création naturelle d'un Cover à partir d'une image carrée.

Le Cover a un format très panoramique, de 1280×560.

Si l'on place dans une image carrée un PC, une personne, une carte d'interface, des icônes, etc., cela peut convenir au format carré, mais dans un Cover, le haut et le bas seront fortement rognés.

À l'inverse, si l'on tente de tout inclure, le sujet principal devient trop petit.

J'ai donc décidé de revoir la conception à ce stade.

Conclusion finale : séparer les prompts en deux systèmes

En fin de compte, j'ai conçu la solution en divisant les prompts en deux.

Instagram / Thumbnail 用プロンプト
X / Cover 用プロンプト

Autrement dit, plutôt que de tout couvrir avec une seule image carrée,

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

c'est la philosophie qui sous-tend cette approche.

Il s'agissait d'un changement d'orientation majeur.

Au départ, nous visions un outil capable de tout générer à partir d'une seule image, mais en réfléchissant à l'usage réel, nous avons compris qu'il était plus naturel de concevoir dès le départ des compositions adaptées à chaque support.

Au pire, un designer peut toujours ajuster la mise en page, mais nous voulions que l'outil reste accessible à ceux qui ne maîtrisent pas Figma ou des outils similaires, et qu'il puisse fonctionner de manière simple, uniquement grâce à l'IA.

Ce que l'outil permet actuellement

Avec le Thumbnail Prompt Builder actuel, il suffit de saisir les informations d'un article pour générer deux types de prompts.

1. Pour Instagram / vignette

Prompt destiné aux visuels carrés servant de vignette.

• Image carrée 1:1
• Sujet principal au centre
• Marges adaptées aux formats verticaux d'Instagram
• Composition lisible en vignette de blog

pour un contenu pensé dans ce sens.

2. X / Cover

Prompt destiné aux visuels d'en-tête au format paysage.

• Composition paysage dès le départ
• Haut et bas restent bien visibles, même en Cover
• Ménager des marges à gauche et à droite
• Résultat stable sur X comme sur Cover

Ces consignes ont été intégrées au prompt.

Cela permet de réduire le risque que l'image Cover ait l'air d'un carré étiré en format paysage.

Génération des images également passée à deux variantes

Le téléversement des images a également été séparé en deux flux.

• Téléversement d'image carrée
• Téléversement d'image paysage

À partir d'une image carrée,

• instagram.png
• thumbnail.png

sont générées.

À partir d'une image paysage,

• x.png
• cover.png
• [email protected]

sont générées.

Seule l'image Cover est aussi exportée en version double taille pour les écrans Retina.

Nous avons d'abord voulu produire une version double taille de toutes les images, mais Instagram et X compressent souvent les images à la publication, et Thumbnail est déjà suffisamment grand. Nous nous sommes donc finalement limités à une sortie double taille pour Cover uniquement.

Préservation de la saisie du formulaire

Un point délicat pendant le développement : la saisie des formulaires disparaissait à chaque actualisation de la page.

En demandant à Codex d'effectuer le travail, j'ai constaté que les contenus saisis partiellement disparaissaient lors de l'actualisation de la page.

Comme cela devenait frustrant, nous avons également renforcé la fonction de sauvegarde.

Actuellement, les contenus saisis sont enregistrés dans

• localStorage
• Cookie

les deux emplacements.

Le cookie sert de sauvegarde pendant 7 jours.

Ainsi, même en cas d'actualisation de la page ou de rechargement pendant le développement, la saisie est plus facilement restaurée.

Ce que nous avons appris lors de l'implémentation

Le principal enseignement de ce développement est le suivant :

La génération d'images par IA est plus stable lorsqu'on crée les visuels directement selon leur usage dès le départ, plutôt que de les convertir après coup

c'est ce qui en ressort.

Les images d'en-tête en particulier présentent de fortes variations de format selon les supports.

Une composition efficace en carré n'est pas forcément efficace en format Cover.

Si l'on tente de forcer une version commune,

• le sujet principal se retrouve réduit,
• les espaces vides deviennent excessifs,
• le haut et le bas sont coupés,
• l'arrière-plan paraît artificiel,

et plusieurs problèmes apparaissent.

Au final,

Ne pas trop généraliser : séparer les prérequis de génération selon chaque usage

C'est cette conception que nous avons retenue.

Ce que nous avons fait en échangeant avec Codex

Cet outil n'avait pas une forme finale définie dès le départ.

En échangeant avec Codex,

• décliner une image carrée sur chaque support
• éliminer les défauts de l'extension de fond
• revoir la SAFE ZONE
• corriger la réduction du sujet principal avec Cover
• Clarifier les définitions de taille
• Ajouter une sortie Retina
• Mais Retina est limité à Cover uniquement
• Séparer les prompts en deux systèmes
• Enregistrer le contenu saisi

C'est ainsi que j'ai progressivement fait évoluer la conception.

Mon idée initiale était de faire d'une image carrée un « master universel ».

Pourtant, en améliorant les choses au fil des tests sur des images, j'ai finalement opté pour une approche plus réaliste : « séparer les formats carrés et les formats horizontaux ».

Ce changement m'a semblé intéressant.

Conclusion

Thumbnail Prompt Builder n'est pas simplement un outil de conversion de taille d'image.

Pour être plus précis,

c'est un outil d'aide qui permet de retoucher les visuels de couverture créés avec l'IA pour les rendre utilisables en production

.

Dans sa forme actuelle,

• il permet de générer deux types de prompts d'image à partir des informations de l'article
• générer les formats Instagram / Thumbnail à partir d'une image carrée
• générer les formats X / Cover à partir d'une image au format paysage
• exporter également une version Retina pour Cover uniquement
• conserver les données saisies pendant une durée déterminée

jusqu'à ce point.

C'est devenu un peu plus complexe que ce que j'avais initialement prévu, mais cela a aussi rendu l'outil nettement plus pratique à l'usage en conditions réelles.

Pour aller plus loin à l'avenir, je souhaiterais notamment explorer

• le basculement entre les modèles de prompts
• la gestion des palettes de couleurs par marque
• l'enregistrement des exemples de génération
• les sorties destinées à Notion et WordPress
• l'intégration directe avec des générateurs d'images par IA

ou encore d'autres pistes similaires.

Les générateurs d'images par IA sont pratiques, mais pour une utilisation réelle dans des articles ou sur les réseaux sociaux, une conception humaine reste nécessaire.

Mon objectif est de faire évoluer Thumbnail Prompt Builder comme un outil qui allège un peu ce travail de conception.