Les feuilles de sprites PNG restent un choix rationnel lorsque le front doit limiter les requêtes HTTP ou figer un jeu d’états UI ; en revanche, elles exposent le pipeline à des erreurs de couture, de gouttière et de coordonnées CSS mal propagées entre design et code. Ce guide 2026 est une matrice de décision pour designers et intégrateurs : paramètres d’export d’atlas, règles @1x / @2x / @3x avec dimensions entières, tableau de commandes macOS / CLI pour le lot sur Mac mini M4 distant, et critères d’acceptation vérifiables sur plusieurs écrans — sans ambiguïté « ça rend bien chez moi ».
Dans cet article :
Pour cadrer le contexte alignement pixel et Auto Layout avant de monter un atlas, reprenez la checklist Figma Auto Layout & PNG aligné pixel ; pour la chaîne SVG → PNG Retina, voir le guide rasterisation SVG & matrices @2x. La QA PNG par lot avec OpenClaw prolonge ce document lorsque vous automatisez les seuils sur un nœud distant.
Paramètres d’export pour sprites PNG
Un atlas regroupe plusieurs découpes ; le front lit des rectangles via background-position / background-size. Paramètres à figer dans la spec :
- Grille : cellules en px entiers @1x ; gouttières entières (souvent 1–2 px) pour limiter la fuite d’alpha entre tuiles.
- Padding interne : marge documentée pour glyphes fins ; nécessaire au recalcul CSS de
background-size. - Ordre stable (lignes ou colonnes) ; versionnez l’atlas (
[email protected]) car tout réordonnancement casse l’historique des coordonnées. - PNG 32 bits alpha ; pas de fond gris factice.
- Manifeste
nom → { x, y, w, h }en unités @1x partagé avec le front (JSON ou SCSS).
@2x / @3x et alignement pixel
Toutes les dimensions exportées doivent être des multiples entiers des dimensions logiques 1× (ex. 24×24 pt → 24, 48 et 72 px, pas 47 px). Sinon : flou et décalages de background-position.
largeur_px = largeur_logique_pt × {1, 2, 3}pour chaque tuile et pour l’atlas.- Origines (x, y) entières en 1× dans le manifeste ; le front déduit @2x/@3x.
- Pas de sous-pixel en amont : recaler sur grille 1 px avant fusion.
Sprite issu de SVG : valider la rasterisation Retina avant fusion en atlas (voir le lien « SVG → PNG » en tête d’article).
Commandes et paramètres d’outils de traitement par lot
Sur un Mac M4 distant, enchaînez inspection et optimisation en script ; adaptez les chemins (sources/, dist/, qa/).
| Outil / commande | Rôle | Paramètres & remarques |
|---|---|---|
file / sips -g all |
Lecture rapide dimensions & profil | Scriptable ; filtrez les PNG dont pixelWidth n’est pas multiple attendu de la grille sprite. |
sips -g profile |
ICC embarqué | Alignez-vous sur la politique sRGB du design system ; rejet si profil absent alors qu’il est requis. |
ImageMagick identify -verbose |
Alpha, canal, dimensions | Utile pour détecter une tuile accidentellement en palette (PNG-8) au lieu du PNG-32 attendu. |
ImageMagick montage / convert +append |
Assemblage d’atlas automatisé | Figez -background none ; définissez -tile ou géométrie fixe pour des gouttières reproductibles. |
compare -metric AE |
Diff visuelle deux versions d’atlas | Seuil 0 = identique pixel à pixel ; journalisez les régressions entre builds. |
oxipng -o 4 --strip safe |
Compression sans perte | Après validation fonctionnelle ; conservez une copie non optimisée pour debug. |
Documentez commande et versions dans le README du lot. Pour automatiser les seuils (dimensions, alpha, ICC), reportez-vous au guide OpenClaw « QA PNG par lot » lié en introduction.
Prévisualisation multi-écrans & critères d’acceptation
La preuve finale se fait sur cibles réelles, pas uniquement dans l’outil de design.
- Chrome & Safari : page de démo @1x / @2x / @3x ; pas de décalage d’un demi-pixel sur les bords des tuiles.
- DPR 2 et 3 : écran Retina + 1× ou simulation DevTools ; hover/actif stables au pixel.
- Clair / sombre & zoom 125–150 % : pas de coutures visibles (gutter suffisant).
- Release : captures + hash PNG dans le ticket pour comparer les builds.
Si vous livrez des fichiers séparés plutôt qu’un atlas, les mêmes règles Retina s’appliquent ; normalisez les frames avec la checklist Figma « alignement pixel » (lien en introduction).
Tableau comparatif & pièges
| Approche | Avantages | Risques / coûts |
|---|---|---|
| Sprite PNG unique | Moins de requêtes ; un seul cache HTTP ; états groupés visuellement. | Coordonnées à maintenir ; rebuild complet si une tuile change ; merge conflicts fréquents. |
| Fichiers PNG par icône | Diff et revue ciblée ; srcset simple ; moins de couplage design/front. |
Plus de requêtes (mitigé par HTTP/2) ; discipline de nommage stricte. |
| SVG + PNG de secours | Échelle vectorielle ; un fichier pour plusieurs DPR si le navigateur suffit. | Rasterisation à calibrer ; pas toujours adapté aux effets complexes. |
FAQ
Faut-il des dimensions puissance de 2 pour le fichier atlas ? Utile pour certains moteurs jeu ou textures GPU ; pour le web CSS pur, ce n’est en général pas obligatoire — l’entier et la cohérence des tuiles priment.
Comment gérer le devicePixelRatio flottant (zoom OS) ? Le navigateur mappe toujours vers une grille de pixels physiques ; des coordonnées entières en 1× minimisent les erreurs d’arrondi sur background-position.
Mélanger couleur et monochrome dans un atlas ? Possible si fusion et ICC sont homogènes ; sinon séparez les feuilles pour la QA.
Gros lots ? Scripts sur Mac mini M4 distant (toolchain shell, nocturne, logs).
Poursuivre sur MacPng : accueil, forfaits & aide
Pour exécuter des chaînes de validation et des exports lourds sans saturer votre machine locale, parcourez la page d’accueil MacPng, comparez les tarifs & nœuds et les offres location / achat sans créer de compte. L’aide SSH / VNC détaille la mise en route ; le blog regroupe les guides OpenClaw, ICC et workflows design.