14 en-têtes en HTML 3D rendus avec Playwright, sans une seule image IA

Pour illustrer mes pages piliers sans image générée par IA, j’ai dessiné un seul visuel en HTML et CSS 3D, que Playwright rend en image : un gabarit, une clé par page, et un script qui exporte et envoie les 14 en-têtes en quelques minutes.

Le problème

Mes 13 pages piliers et un guide avaient des illustrations générées par IA : boucliers et serveurs bleu néon, le genre d’image qu’on reconnaît tout de suite. Je voulais une famille d’en-têtes cohérente, sobre, qui donne une impression de solidité et d’expertise, et qui se refasse en une commande quand une page change.

Le gabarit : un fichier HTML, un paramètre

Le visuel est un seul fichier HTML. Une adresse comme gabarit.html?s=em choisit le symbole, dessiné en SVG sur une grille de 100 unités. Le socle, lui, est de la perspective CSS : quatre plaques empilées, inclinées à 57 degrés et tournées de 45 :

.vis { container-type: inline-size; width: 2516px; height: 2428px; perspective: 190cqw; }
.iso { position: absolute; left: 50%; top: 56%; width: 52cqw; height: 52cqw;
       transform-style: preserve-3d;
       transform: translate(-50%, -50%) rotateX(57deg) rotateZ(-45deg); }
.face { background: linear-gradient(135deg, #1a2a8c, #0a0f33);
        border: .22cqw solid rgba(150, 168, 255, .75);
        box-shadow: 0 0 6cqw rgba(116, 138, 255, .35); }

Toutes les dimensions sont en cqw, proportionnelles à la largeur du conteneur : le rendu reste identique quelle que soit la taille. Un petit script place chaque plaque à sa hauteur (translateZ) et ajoute cinq fines couches sur la tranche pour lui donner de l’épaisseur.

Un paramètre &guide affiche la zone sûre en pointillés (189 px à gauche et à droite, 158 px en haut et en bas) : c’est là que doit tenir le symbole, parce que le thème recadre l’image selon l’écran.

Le rendu : Playwright et ffmpeg

Un script ouvre le gabarit une fois par page, attend les polices, fait la capture à 2516 × 2428 (le double de la taille d’affichage) puis convertit en WebP :

const { chromium } = require('playwright');
const { execFileSync } = require('child_process');
const pillars = require('./pillars');   // [{ s: 'em', slug: 'email-marketing', … }]

(async () => {
  const browser = await chromium.launch({ channel: 'msedge' });
  for (const p of pillars) {
    const page = await browser.newPage({ viewport: { width: 2516, height: 2428 } });
    await page.goto('file:///…/gabarit.html?s=' + p.s, { waitUntil: 'networkidle' });
    await page.evaluate(() => document.fonts.ready);
    await page.screenshot({ path: `export/hero-${p.slug}.png` });
    execFileSync('ffmpeg', ['-y', '-i', `export/hero-${p.slug}.png`, '-quality', '88', `export/hero-${p.slug}.webp`]);
    await page.close();
  }
  await browser.close();
})();

Chaque WebP pèse environ 160 Ko. Une nouvelle page, c’est un symbole à dessiner et une ligne dans la liste.

L’envoi par l’API

Un second script téléverse chaque image dans la médiathèque, remplit le texte alternatif, le titre et la description, puis la pose en image à la une de la page. Il écrit dans un journal l’ancienne et la nouvelle image : pour revenir en arrière, il suffit de remettre l’ancienne. Le texte alternatif est généré (« socle de plaques bleues surmonté d’un symbole »), avec une petite fonction qui gère l’élision, pour ne pas écrire « surmonté de une ».

Trois tours de direction artistique

Le script est la partie facile. Le style, lui, a demandé trois propositions successives :

1. Un schéma, un gros plan, un symbole. Ma recommandation était un schéma en briques reliées, avec du texte. Retour : « pas autant de texte à côté d’un titre et d’un sous-titre ».
2. Deux versions sans texte, un schéma muet et un symbole seul. Retour : refusées, « je veux un visuel design et percutant, qu’on ressente la solidité, le sérieux et l’expertise ».
3. Trois objets en CSS 3D et SVG : un objet sculpté sous un faisceau, un socle de plaques, un cadran de précision. Le socle l’a emporté.

Ce que j’en retiens, et qui est devenu la règle : aucun texte dans l’image, pas de briques légendées, pas de pictogrammes plats, pas de schéma pédagogique. Seul le symbole change d’une page à l’autre (une bulle pour le SMS, un bouclier pour la délivrabilité, une balance pour le comparatif).

Les limites

• Le rendu dépend du navigateur. La 3D CSS est rendue par Chromium : tant que vous utilisez le même, les images sont identiques d’un jour à l’autre.
• Les polices doivent être prêtes avant la capture, d’où l’attente de document.fonts.ready.
• Un symbole se dessine à la main, en SVG. Claude propose des tracés, mais il faut les regarder.
• Le guide Black Friday a eu son propre en-tête : le socle ne disait pas « e-mail de promotion », il a été remplacé le jour même par un mur d’e-mails inclinés, en HTML aussi, avec des marques fictives.

À retenir

Un visuel en HTML se refait, se versionne et se rend par script, et il ne ressemble pas à une illustration générée. Fixez le gabarit, une clé par page, un script de rendu et un script d’envoi qui garde l’ancienne image : le plus long est de trouver le style.