Le Lottie reste du JSON vectoriel, mais beaucoup de chaînes exigent encore des séquences PNG. En 2026, il faut figer FPS, pixels, ICC et effets entre AE / Bodymovin, Figma et le rendu headless sur Mac M4 distant. Matrice de décision, paramètres batch et seuils QA ci-dessous. Croisez avec la checklist sRGB / Display P3, WebP, AVIF & PNG par lot et exports multi-outils (Affinity, Sketch, Figma).
Dans cet article :
① Contrôles avant export
Verrouillez le contrat de rendu : durée en secondes, FPS maître identique Lottie ↔ script, taille logique, calques non supportés, polices installées sur le distant (sinon dérive typographique frame par frame). Précisez marge transparente vs fond opaque — le fond du moteur peut différer du lecteur web.
Intention couleur : sRGB par défaut ; dossier P3 + README si requis. ICC embarqué, retiré ou normalisé via magick / sips : alignez-vous sur la checklist PNG liée.
- Durée source ± 1 frame documentée (arrondi d’export compris).
- FPS maître = FPS batch (ex. 24/24 ou 30/30, jamais mélangé sans resampling).
- Versions : AE, Bodymovin, runtime ou CLI épinglées dans le manifeste du lot.
- Échantillon « frame 0, milieu, dernière » revu visuellement sur fond blanc et gris moyen pour l’alpha.
② Paramètres du traitement par lot
Gabarit stable : {projet}_{variante}_f{frame:06d}_{w}x{h}_srgb.png ; index 0 ou 1 — une seule règle d’équipe. Inclure w×h post-échelle ; dossiers séparés out/@1x/, out/@2x/, out/@3x/.
Paramètres exécutables typiques sur macOS (à adapter au moteur exact : CLI maison, lottie-ios snapshot, outil AE scripté, etc.) :
- FPS d’export : identique au FPS composition ; pas de changement à la volée sans recalcul du nombre de frames attendu.
- Échelle : facteurs entiers 1, 2, 3 pour du Retina ; évitez les 1,25× sauf besoin documenté (flou sous-pixel).
- Profondeur : PNG 8 bits / canal pour la plupart des lots UI ; 16 bits seulement si spec média l’exige (poids multiplié).
- Couleur : pipeline sRGB ; si conversion post-export, journaliser la commande (ex.
magick input.png -profile sRGB.icm output.png) dans le README du lot.
Produisez un manifeste JSONL : une ligne par frame avec chemin, index, timestamp logique, WxH, taille en octets et empreinte SHA-256. Ce fichier devient la vérité pour les relances partielles et les audits QA.
③ Matrice FPS & charge de frames
Le FPS pilote fluidité et volume de frames. L’export doit rester aligné sur la source Lottie ; un décalage 30 ↔ 24 sans resampling casse les tests de comptage.
| FPS export | Cas d’usage typique | Frames pour 3 s | Risque principal |
|---|---|---|---|
| 24 | Storytelling, bandes-annonces, tonalité « ciné » | 72 (+1 si bord d’arrondi) | Mélange avec sources 30 fps sans resampling |
| 30 | Réseaux sociaux, ads, motion générique | 90 | Sous-échantillonnage si la source était 60 sans frame drop explicite |
| 60 | UI riches, jeux légers, Lottie très détaillé | 180 | Volume disque et temps de rendu sur nœud distant |
Contrôle : N_frames = ceil(duration_sec × FPS) (ou troncature documentée — même règle partout). Sur M4 distant, plafonnez les jobs GPU pour les rendus 4K@60.
④ Cohérence entre logiciels
Un même JSON peut diverger entre navigateur, Figma et moteur headless :
| Source de vérité | Avantage | Limite |
|---|---|---|
| After Effects + Bodymovin | Contrôle maximal des calques et effets supportés | Dépend des versions d’export et scripts |
| Figma / intégrations Lottie | Alignement design ↔ handoff | Features Lottie partielles ; texte vivant |
| Rendu headless sur Mac distant | Reproductibilité CI, logs, manifeste | Doit matcher polices & versions du master AE |
Golden JSON + trois frames témoins signées ; toute upgrade moteur repasse par comparaison avant batch étendu.
⑤ Seuils d’acceptation batch (exécutables)
Seuils types (à figer dans le README projet) :
| Contrôle | Seuil suggéré | Outil / note |
|---|---|---|
| Nombre de fichiers | Égal à N_frames_attendu ± 0 (idéalement strict) |
Script shell / Python ; échec bloquant |
| Dimensions | Chaque PNG = W×H spec ; écart 0 px |
sips -g pixelWidth -g pixelHeight |
| Taille octets | Min > 300 o (hors cas pathologique) ; max < P95 historique × 1,25 | Détecte frame vide ou explosion effets |
| Doublons | Aucune paire de frames consécutives identiques (hash) sauf storyboard figé | shasum -a 256 |
| ICC / profil | Liste blanche sRGB ou absent selon policy | exiftool ; aligné checklist PNG |
| Comparaison spot | RMSE ou AE < seuil sur 3 frames témoins vs golden | magick compare -metric AE |
Baseline octets : médiane des lots récents plutôt que constantes magiques ; même logique manifeste / JSONL / quarantaine que vos autres pipelines PNG.
⑥ Échecs et relances
Les échecs sont souvent partiels (octets, IO, GPU). Stratégie :
- Backoff exponentiel (ex. 2 s, 4 s, 8 s) sur erreurs IO ou timeout GPU.
- Quarantaine
failed/avec symlink ou copie des JSON sources + log stderr. - Relance ciblée : relire le manifeste, ne rerendre que les index listés.
- Plafond de tentatives (ex. 3) puis ticket humain avec les frames et les logs.
Volume dédié, rotation des logs, versions script/binaire épinglées — la matrice devient un contrat ops partagé.
⑦ FAQ
Q : Puis-je exporter directement depuis le lecteur web ?
A : Possible pour des prototypes, mais la production exige un environnement figé (même macOS, mêmes polices, même moteur) — d’où l’intérêt du nœud distant.
Q : Lottie gère mal un effet ; que livrer ?
A : Soit aplatir le calque fautif en PNG raster dans AE avant export JSON, soit livrer une séquence PNG à la place du JSON pour ce module — documentez le choix côté client.
Q : @2x obligatoire pour une séquence ?
A : Si l’usage final est Retina, oui — ou livrez une résolution unique plus grande avec convention de downscale côté app ; dans tous les cas, évitez le redimensionnement bilinéaire répété sur des centaines de frames.
Synthèse
La livraison Lottie → PNG, c’est un accord FPS / pixels / ICC / noms, plus des seuils et des relances ciblées. Externaliser le rendu sur un Mac M4 distant MacPng décharge les postes design et fige un nœud reproductible pour QA et CI — pertinent dès que les séquences dépassent quelques dizaines de frames.
Suite : Mac distant pour rendu & QA
Explorez l’accueil MacPng, la page achat et formules, les tarifs et le guide d’aide (accès sans connexion obligatoire pour parcourir les informations). Poursuivez sur le blog pour compléter vos pipelines design : checklists couleur, livraison WebP/AVIF/PNG et workflows multi-outils cités dans l’introduction.
Rendu séquence & validation sur Mac M4
Louez un Mac distant pour exécuter exports Lottie lourds, manifestes JSONL et contrôles QA sans saturer les portables design — idéal pour les campagnes qui exigent des centaines de frames PNG propres et traçables.