Pour les illustrateurs, les concepteurs d'interfaces et les créateurs de contenu en ligne, disposer d'un outil d'intelligence artificielle léger permettant de tester des pistes visuelles en temps réel constitue un atout précieux. Craiyon — initialement conçu par Boris Dayma sous le nom de DALL-E mini — est passé du statut d'outil viral amusant à celui de carnet de croquis pratique pour la conception d'illustrations éditoriales et de maquettes graphiques. Même si la grille de génération initiale produit des images de faible résolution, l'association de variations de prompts méthodiques et de l'outil d'agrandissement par IA (Upscaler) intégré permet d'obtenir des visuels nets et optimisés pour la publication web.
L'optimisation de la netteté sur Craiyon s'articule autour de deux axes complémentaires : affiner la composition sur la grille de neuf vignettes sans consommer de crédits inutiles, puis exploiter l'upscaler natif en 2K (2048 pixels sur le côté le plus long) pour restaurer les contours avant de convertir l'image vers des formats modernes et légers comme le WebP.
1. Explorer les variations de prompts sur la grille 3x3
Craiyon produit simultanément neuf propositions visuelles à chaque requête. Les illustrateurs chevronnés n'envisagent pas la génération comme un tirage au sort unique, mais s'en servent comme d'une planche d'exploration pour confronter différents choix de cadrage, de lumière et de rendu.
Poser le style de départ grâce aux préréglages
Autour du champ de saisie, Craiyon propose quatre modes de style prédéfinis : Art, Drawing, Photo et None :
- Mode Art (Art) : Met l'accent sur les empâtements de peinture, les textures riches et les palettes vibrantes. Il convient idéalement aux concepts fantastiques et aux illustrations d'en-tête atmosphériques.
- Mode Drawing (Dessin) : Privilégie les contours nets, les ombrages graphiques et les arrière-plans épurés. C'est l'option recommandée pour les illustrations vectorielles, les pictogrammes d'interface et les schémas techniques.
- Mode Photo (Photo) : Reproduit le comportement d'un objectif photographique, une profondeur de champ naturelle et un éclairage d'ambiance diffus.
- Mode None (Aucun) : Désactive le guidage stylistique du moteur pour laisser l'entière direction artistique aux termes rédigés dans le prompt.
Anatomie d'un prompt hiérarchisé
Des descriptions vagues aboutissent généralement à des compositions confuses. Un prompt professionnel organise les critères de manière ordonnée :
[Sujet principal & Action] + [Technique graphique & Trait] + [Éclairage & Palette] + [Cadrage & Angle]
Exemple d'évolution pour une illustration de site internet :
- Prompt générique : « cute robot reading a book » (un robot mignon lisant un livre)
- Variation vectorielle épurée : « a friendly minimalist robot reading an open book, flat clean vector illustration, isometric perspective, soft pastel color palette, crisp outlines, isolated on white background » (robot minimaliste et amical lisant un livre ouvert, illustration vectorielle plate et propre, perspective isométrique, palette pastel douce, contours nets, isolé sur fond blanc)
- Variation gouache texturée : « a small retro robot reading an antique leather book in a sunlit conservatory, digital gouache painting, visible brushstrokes, rim lighting, atmospheric depth, warm earthy tones » (petit robot rétro lisant un livre relié en cuir dans une véranda ensoleillée, peinture gouache numérique, coups de pinceau visibles, éclairage de contour, tons chauds de terre)
Supprimer les défauts avec les mots négatifs (Negative words)
Craiyon intègre un champ spécifique de Negative words (mots négatifs). Comme les modèles de diffusion compacts peuvent introduire du bruit ou des anomalies morphologiques, exclure les termes problématiques assainit le résultat :
- Pour l'illustration et le dessin :
blurry, grainy, low-res, messy sketch, watermark, distorted hands, extra limbs, muddy colors(flou, granuleux, basse résolution, croquis brouillon, filigrane, mains déformées, membres en trop, couleurs ternes) - Pour les bannières et éléments web :
cluttered background, text, logo, oversaturated, chromatic aberration, photographic noise(arrière-plan surchargé, texte, logo, sursaturé, aberration chromatique)
En éliminant ces défauts dès le départ, on offre à l'upscaler une image de départ dotée de lignes claires et de contrastes nets.
2. Reconstruire les détails grâce à l'upscaler IA intégré
Les vignettes de la grille de génération initiale ne disposent pas d'une densité de pixels suffisante pour les écrans modernes. Affichées sans traitement, elles laissent apparaître des bordures floues et de la pixellisation. La commande Upscale remédie à ce problème.
Principe de fonctionnement de l'agrandisseur IA
En sélectionnant une vignette et en cliquant sur le bouton « Upscale », l'algorithme de Craiyon procède à un rééchantillonnage intelligent :
- Reconstruction des contours : Il détecte les arêtes nettes des cheveux, des objets et des lignes mécaniques, appliquant une accentuation sous-pixel pour supprimer l'effet d'escalier.
- Atténuation du bruit de diffusion : Les artefacts de compression et les micro-taches de couleur sont gommés pour un rendu homogène.
- Mise à l'échelle en 2K : La dimension la plus longue passe à 2048 pixels, ce qui quadruple le nombre total de pixels par rapport à la vignette source.
Un point déterminant réside dans la fidélité de l'algorithme : l'upscaler ne réinvente pas d'éléments fictifs et ne dénature pas l'expression du sujet, garantissant le respect scrupuleux de la composition retenue.
Formules d'abonnement, filigranes et crédits d'édition
Avant d'intégrer ces images dans des productions professionnelles, il est indispensable de connaître les modalités d'utilisation de la plateforme :
- Formule Free (Gratuite) : Présence de bandeaux publicitaires, délais d'attente allongés (souvent 1 à 2 minutes), filigrane officiel incrusté dans le coin de l'image et obligation de citer Craiyon en cas d'usage commercial.
- Formule Supporter : Suppression des publicités et des filigranes, licence d'exploitation commerciale, traitement accéléré et allocation de 100 crédits d'édition mensuels (Edit credits) pour l'agrandissement et le détourage.
- Formules Professional et Ultra : Dotées de 300 à 1 200 crédits mensuels, d'une file d'attente ultra-prioritaire et d'un mode de génération privé.
Pour une publication web commerciale soignée, l'abonnement payant est la voie préconisée afin d'obtenir des fichiers PNG 2K vierges de tout marquage et parfaitement conformes sur le plan légal.
3. Optimisation pour la publication et l'intégration web réactive
Une image PNG en 2048 pixels exportée après agrandissement pèse généralement entre 3 Mo et 8 Mo. L'intégrer telle quelle sur un site web dégraderait les temps de chargement et impacterait négativement les Core Web Vitals de Google, notamment le Largest Contentful Paint (LCP).
Conversion de format : du PNG au WebP
Pour concilier restitution fidèle des détails et légèreté :
- WebP avec perte (qualité 80 %–85 %) : Conserve la finesse des traits tout en réduisant le poids de 70 % à 85 % par rapport au PNG, ramenant l'image finale entre 150 Ko et 350 Ko.
- WebP sans perte : Recommandé pour les graphismes avec fond transparent, les icônes ou les dessins au trait pur ne tolérant aucune altération.
Implémentation réactive en HTML
Grâce à la balise <picture> et à l'attribut srcset, les écrans haute densité (Retina) reçoivent le fichier 2K haute fidélité, tandis que les terminaux mobiles téléchargent une déclinaison plus légère :
<picture>
<source type="image/webp"
srcset="illustration-600.webp 600w,
illustration-1200.webp 1200w,
illustration-2048.webp 2048w"
sizes="(max-width: 768px) 100vw,
(max-width: 1200px) 50vw,
800px">
<img src="illustration-1200.jpg"
alt="Illustration numérique minimaliste d'un robot lisant un livre"
loading="lazy"
width="1200"
height="1200">
</picture>
Cette approche garantit que la version 2K maximale n'est téléchargée que par les appareils capables d'en restituer la finesse, préservant la fluidité de navigation sur mobile.
4. Tableau récapitulatif du flux de travail
| Étape | Action clé | Recommandation technique |
|---|---|---|
| 1. Structuration du prompt | Rédiger les composantes en couches | Sujet + Technique + Éclairage + Cadrage |
| 2. Filtrage préventif | Renseigner les Negative words | Exclure blurry, deformed, low-res, muddy colors |
| 3. Sélection du style | Choisir le préréglage | Drawing pour le trait net ; Art pour la peinture |
| 4. Tri sur la grille | Comparer les 9 déclinaisons | Valider l'harmonie, la lisibilité et l'anatomie |
| 5. Agrandissement IA | Activer la fonction Upscale | Passage en 2048px et lissage des artefacts (1 crédit) |
| 6. Compression web | Convertir le PNG en WebP | Choisir un taux de qualité de 80 % à 85 % |
| 7. Déploiement en ligne | Insérer la balise <picture> | Ajouter loading="lazy" et les paliers srcset |
En combinant une formulation rigoureuse de prompts, la puissance de l'upscaler 2K natif de Craiyon et les bonnes pratiques de compression pour le web, les créateurs obtiennent des illustrations expressives et nettes, parfaitement adaptées aux exigences de vitesse du web contemporain.