En 2026, le PNG-8 indexé revient dans les briefs : sprites légers, CMS historiques, budgets LCP. L’échec typique : dithering non revu, alpha imprévisible, halos visibles seulement en thème sombre chez le partenaire. Guide design / passation front : matrice PNG-8 vs PNG-24, checklist dithering et palette, QA bords et halo blanc, batch Mac M4 distant (scripts vs Actions) avec bandes de temps, FAQ seuils d’octets. Croiser la checklist PNG sRGB / Display P3 sur Mac, l’audit palette OpenClaw sur Mac distant et la QA PNG fond blanc par lot pour les catalogues à fond uniforme.
Dans cet article :
PNG-8 vs PNG-24 : tableau de choix
PNG indexé si la créa est plate, le dither est accepté et les Ko comptent. Truecolor si dégradés, ombres ou alpha multi-niveaux : le PNG-8 ici crée de la dette visuelle pour peu de gain.
| Dimension | PNG-8 (indexé) | PNG-24 / 32 (truecolor + alpha) |
|---|---|---|
| Couleur & dégradés | ≤ 256 couleurs ; banding sans dither ; UI plate, logos peu de aplats. | Millions de couleurs ; rampes et photo préservés. |
| Alpha & bords | Transparence 1 bit / astuces palette ; halos AA doux risqués. | Alpha complet ; composite prévisible. |
| Gain octets typique | Souvent 40–75 % sous un PNG-24 naïf équivalent. | Plus lourd ; recompress sans perte ou lossy maîtrisé si besoin. |
| Meilleur moment de passation | Icônes, stickers, atlas UI, portails à plafond Ko. | Héros, packshots avec ombres, brief mode sombre exigeant. |
| Charge de relecture | Élevée : dither, palette, franges. | Plus faible ; ICC / métadonnées selon politique. |
Même asset clair + sombre : privilégier PNG-24 sauf si la DA assume un rendu indexé — halos rarement pardonnés après prod.
Dithering et paramètres palette : checklist exécutable
À coller dans Jira, Notion ou README pour aligner designers et batch.
- Palette : 256 par défaut ; 128 / 64 si art très plat + QA posterisation.
- Dither : diffusion (Floyd–Steinberg) pour photo→indexé ; tramage ordonné seulement si texture marque — nommer le motif dans le ticket.
- Intensité (0–100 %) : 75–100 % photo-dérivé ; 0–35 % vecteurs plats (éviter grain sur aplats).
- Transparence : on pour chrome UI ; variante opaque si CMS→JPEG — pas d’ombres douces via alpha PNG-8.
- Entrelacement : off sauf demande mesurée (souvent +octets).
- Profil : sRGB IEC61966-2.1 sauf route P3 documentée.
- pngquant (distant) : figer ex. qualité
65–85,--speed 1,--floyd=1dansEXPORT_PRESET.md. - Or : un
_gold.pngpar préréglage avant promotion batch.
Bords transparents et halo blanc : étapes d’acceptation
Frange = contrat de composite : tester sur les fonds réels du partenaire, pas seulement le damier.
- Trois fonds : #000000, #FFFFFF, teinte marque ; zoom 100 % dans Safari (référence Mac fréquente).
- Zoom : 100 / 200 / 400 % — les indexés cassent souvent entre 200 et 400 % (coutures de mat).
- vs PNG-24 : calques + mode différence (Affinity/PS) ; bruit sur le bord = halo / premult.
- SKU #FFF : aplat #FFFFFF, pas de liseré gris ; gros catalogues : même politique de mat (article e-commerce lié).
- Dark : #121212 + #000000 ; KO si mat clair visible ~2 px dans la silhouette.
- Visa : relecteur, date, fonds, OK/KO/dérogation — dérogation PM/marque écrite.
Traitement par lot sur Mac M4 distant (scripts / Actions) et comparaison des temps
Mac mini M4 distant : thermique hors portable, files nocturnes, arborescence partagée. Bandes indicatives pour ~100 PNG UI hétérogène sur Apple Silicon (manifeste et disque influencent).
| Chemin | Ce que vous automatisez | Temps typique (100 fichiers) | Optimal quand |
|---|---|---|---|
| Export manuel « Enregistrer sous… » | Choix format fichier par fichier. | 45–90 min | Très peu de livrables ou correctifs ponctuels. |
| Action Photoshop / macro Affinity | Étapes enregistrées : taille, mode, Enregistrer pour le web, fermeture. | 20–40 min | Ajustements créatifs qui doivent rester dans l’app ; équipe déjà dans l’outil. |
| Shell + pngquant / optipng | Boucle sur dossier ; journal JSONL ; seuils. | 3–10 min | Gros volumes d’indexation avec flags CLI figés — idéal sur M4 distant. |
| ImageMagick + optimiseur en seconde passe | Redimensionnement, réduction de profondeur, puis squeeze sans perte. | 5–12 min | Sources raster mixtes où la normalisation géométrique précède la réduction de palette. |
Script (illustratif) : boucle pngquant --quality=70-85 --speed 1 puis optipng -o2 si contrat sans perte ; watcher possible sur le même dossier. Orchestration retry/logs : articles OpenClaw cités.
M4 distant : parallèle, Homebrew stable, SSH — évite de bloquer le poste designer sur des milliers de passes pngquant.
FAQ : seuils de volume après export
Seuils = contrats front/CDN, pas lois absolues — tableau de départ, resserrement par release.
| Classe d’asset | Seuil de départ (PNG-8 indexé) | Règle d’escalade |
|---|---|---|
| Glyphe barre d’outils 16–32 px | < 5–12 Ko | Si au-dessus : vérifier métadonnées dupliquées ou embed truecolor accidentel. |
| Onglet / icône nav @2x | < 15–35 Ko | Comparer au PNG-24 ; l’indexé doit être nettement plus léger ou justifier une dérogation. |
| Illustration carte / tuile web | < 80–180 Ko | Inspecter bruit de dither vs LCP ; envisager compagnon WebP/AVIF si autorisé. |
| Bandeau / héros marketing | Spécifique équipe (souvent 150–400 Ko) | PNG-8 rarement adapté — si utilisé, visa marque obligatoire sur le banding. |
Q : Quand « assez petit » est-il mauvais signe ?
R : Lorsqu’une régression visuelle apparaît sur les fonds cibles ou que les gains gzip/Brotli n’existent pas parce que la charge est déjà une entropie de dither — relancer avec un plancher qualité plus haut ou changer de classe vers truecolor.
Q : Les seuils @2x et @3x doivent-ils différer ?
R : Oui. Faites évoluer les plafonds avec la surface en pixels ; documentez des multiplicateurs (ex. @2x ≤ ~1,8× le plafond 1x) plutôt qu’un chiffre unique.
Q : Qui tranche le contrôle final des octets ?
R : Le design porte la fidélité visuelle ; le front ou la plateforme porte le budget transport. Une colonne manifeste bytes_max partagée évite les ré-exports de dernière minute.
En résumé
PNG-8 = outil livraison quand aplats + palette + plafonds Ko s’alignent. Chaque préréglage indexé mérite checklist dithering, QA bords/halo sur fonds réels, et batch M4 distant (pngquant/optipng) pour ne pas thermiquer les portables. Seuils d’octets : répliquer en audit dossier si besoin. Louer un Mac distant pour ces lots reste le gain le plus direct : même OS/outils, files nocturnes, validation équipe via SSH avant envoi client.
Pour aller plus loin
Blog (design, OpenClaw, PNG), accueil. Proches : WebP/AVIF/PNG, ImageOptim vs CLI. Scripts/QA : aide SSH/VNC.
Louer un Mac distant pour les batches PNG-8 de nuit
Déportez réduction de palette, passes optimiseur et manifestes de QA vers un Mac mini M4 dédié — outillage stable, accès SSH/VNC, formules et nœuds consultables avant engagement.