Public : designers et ops e-commerce qui livrent une longue image de fiche produit en PNG découpé en tranches empilées plutôt qu’un seul bitmap géant dans le DOM. Vous voulez des règles claires sur la hauteur de slice, le nommage, le volume en octets, le lazy loading sans décalage de mise en page, et une checklist d’acceptation avant CDN. Un Mac distant (classe M4) centralise préréglages, polices et journaux de batch.
Ce guide livre : une matrice décisionnelle (quand découper, quelle hauteur, quel mode PNG), des étapes exécutables (paramètres d’export, regex de nom, plafond de pixels sur le grand côté, traitement des bords transparents), la structure dossiers + logs pour un run distant, et une FAQ placeholders / Web Vitals avant mise en ligne.
À croiser avec la QA PNG fond blanc par lot, la matrice PNG-8 palette & dithering, et la chaîne CLI PNG + retry sur Mac distant pour une pipeline complète.
Dans cet article :
Scénarios longues images et risques performance
Les bandeaux « story » et specs longues vendent — mais un seul PNG multi-mégapixels oblige le navigateur à tout décoder tôt, charge le thread principal sur mobile milieu de gamme, et peut dégrader le LCP si le héros vit dans la même pile. Découper en tranches permet le lazy load sous la ligne de flottaison, de plafonner la mémoire par décodage et de paralléliser les requêtes CDN. Les échecs typiques : jointures visibles entre tranches, CLS si la hauteur réservée est fausse, fichiers trop lourds par excès de truecolor, collisions de noms quand l’ops uploade des final_v12 sans manifeste.
Matrice décisionnelle (livrer / corriger) :
| Signal | Feu vert | Feu rouge (bloquant) |
|---|---|---|
| Coût de décodage | Chaque tranche ≈ 2–4 MP typiques ; ≤ 2 tranches above-the-fold pour le premier paint | Un PNG > 6 MP ou > 1,5 Mo après passe sans perte sur le palier mobile visé |
| Parcours scroll | Découpes alignées sur fins de section (tableau, coloris, légal) | Coupe horizontale au milieu du corps de texte ou d’un badge prix |
| Transparence | Alpha seulement où le gabarit l’exige ; politique de matting documentée | Alpha résiduel sur panneaux « blancs » → lavage gris en thème sombre |
| Traçabilité ops | Une ligne manifeste par fichier : SKU, campagne, index tranche, version préréglage | QA dossier seul, sans ID de préréglage versionné |
Checklist d’acceptation (design + ops) : (1) référence composite figée côté design ; (2) échantillon 0,5–1 % des SKU ou campagnes sur écran sRGB + un P3 courant ; (3) seuils d’octets par largeur de tranche inscrits dans le manifeste ; (4) ticket pour chaque ligne de failed.jsonl.
Hauteur de tranche et tableau de rupture (breakpoints)
La hauteur est un compromis entre nombre de requêtes, poids par fichier et intégrité graphique. Partez mobile first : la largeur maquette doit correspondre à la largeur maître PDP (souvent 750–1125 px en @2x pour des layouts 375 px logiques). Visez environ un à deux viewports de contenu à cette échelle, puis ajustez pour tomber dans les gouttières, pas sur les glyphes.
| Largeur ref. (CSS px) | Largeur maquette @2x typ. | Hauteur de tranche de départ (px) | Notes |
|---|---|---|---|
| 375 | 750 | 1400–2000 | Tranches plus courtes si héros + 1er bloc doivent LCP séparément |
| 390 | 780 | 1500–2100 | Famille iPhone ; revérifier encoches / safe areas |
| 428+ | 856+ | 1600–2400 | Cartes plus larges tolèrent des tranches plus hautes si budget octets OK |
| Desktop compagnon | Souvent 1200–1600 | Réutiliser tranches mobile ou regénérer (autre manifeste) | Ne jamais étirer silencieusement des PNG mobile au-delà de leur largeur intrinsèque |
Couplez ce tableau à un budget octets par tranche (exemple indicatif : alerte > 400 Ko, échec > 800 Ko pour une bande truecolor 750–900 px de large après oxipng). Calibrez sur votre contrat CDN et la télémétrie PDP — pas sur des chiffres génériques de blog.
PNG-24 vs couleur indexée — seuils
Les longues fiches mélangent blocs UI plats et inserts photo. Un tableau de seuils évite le réglage fichier par fichier.
| Caractéristique visuelle | Mode recommandé | Porte QA |
|---|---|---|
| Dégradés, ombres douces, tons peau | PNG-24 (+ alpha si besoin) | Zoom 100 % : pas de banding ; comparaison au master |
| Icônes plates, ≤ 6 couleurs, bords durs | PNG indexé (≤ 256 couleurs) | Préréglage pngquant figé ; contrôle ΔE coins |
| Texte sur photo texturée | PNG-24 | Lisibilité subpixel sur écran sRGB de référence |
| Motifs répétitifs décoratifs | Envisager WebP/AVIF hors SKU ; PNG si CMS impose | Colonne « codec » dans le manifeste pour les exceptions |
Si vous poussez l’indexé, réutilisez la même grille QA que pour le PNG-8 palette : halos clair/sombre et dithering non négociable sans validation design.
Mac distant : arborescence batch et journaux
Sur un Mac M4 distant, isolez chaque run de campagne pour que l’ops puisse comparer les sorties et remettre en file d’attente les échecs sans toucher aux dossiers de travail des designers.
Arborescence suggérée :
~/batch/pdp-long/{campaignId}/{presetVer}/in/— sources PNG ou exports maquette (lecture seule après ingest)slice/— tranches générées, noms issus du manifesteopt/— sorties optimisées prêtes CDN (sans perte ou quantifiées selon règles)logs/run-{timestamp}.jsonl— un objet JSON par fichier : chemin, octets avant/après, versions d’outils, pass/failquarantine/— rejets dimensions, alpha ou plafond octets
Checklist d’acceptation batch (signée par le responsable run) :
- Le nombre de lignes manifeste = nombre de fichiers dans
opt/± skips documentés. - Aucune tranche ne dépasse le plafond pixels grand côté convenu (souvent 4096 px par fichier pour une large compatibilité GPU mobile ; baissez si vos analytics montrent des appareils anciens).
- Toutes les tranches suivent la même politique ICC (en pratique sRGB embarqué) que le README versionné.
failed.jsonlvide ou chaque ligne a un ticket propriétaire.- Contrôle visuel sur 0,5–1 % des tranches : alignement des jointures vs composite de référence.
FAQ mise en ligne : lazy-load et placeholders
Quelle stratégie de placeholder avec des tranches PNG en lazy-load ?
Réservez l’espace avec la largeur et hauteur réelles de la tranche (attributs width/height ou aspect-ratio CSS). Ajoutez un LQIP minimal, un fond couleur dominante ou un squelette assorti à la section — évitez une vignette 40 px étirée sur toute la hauteur. Utilisez loading="lazy" sous la ligne de flottaison ; gardez les une ou deux premières tranches en chargement prioritaire si elles portent le LCP.
Quelle hauteur par tranche sur mobile PDP ?
Point de départ : 1,2–2,0× la hauteur de viewport visible en pixels à votre échelle d’export, puis recaler les découpes entre modules. Validez avec les appareils les plus représentés dans vos données, pas seulement les téléphones de l’équipe design.
PNG-24 obligatoire ou PNG indexé ?
Par défaut PNG-24 dès qu’il y a dégradés, bords doux ou alpha sur fonds variables. L’indexé n’est acceptable qu’après quantification qui passe vos contrôles banding / frange — voir le tableau ci-dessus et le guide PNG-8 lié.
Pourquoi un Mac M4 distant pour ce batch ?
Exporteur stable, stockage rapide, mémoire unifiée pour jobs parallèles, pas de thermal throttle sur les portables, et journaux JSONL centralisés pour audit. L’équipe se connecte SSH/VNC, récupère opt/, pousse vers le CDN avec hash de manifeste.
Étapes exécutables : export, nommage, pixels max, bords alpha
Paramètres d’export (figer dans v202604 ou votre ID interne) :
- Couleur : master sRGB, profil embarqué ; interdire les exports « assignés » sans embedding réel.
- Dimensions : largeur = maître storefront ; hauteur par tranche selon les garde-fous ; hauteurs paires de préférence pour certains encodeurs.
- Profondeur : 8 bpc ; entrelacement désactivé pour assets PDP (décodage prévisible).
- Post-export : passe sans perte (ex. oxipng) sur toutes les tranches ; pngquant uniquement sur les lignes manifeste marquées « palette OK ».
Règle de nommage (compatible regex) :
{tenant}_{skuOuCampagne}_{indexTranche3}_w{width}px_h{height}px_{typeTranche}_srgb_v{preset}.png
indexTranche3— zéro-padding (001,002) pour le tri stable.typeTranche—hero,spec,story,legalpour aider le front à régler les seuils de lazy.- Clés en minuscules ; pas de renommage post-QA sans incrémenter
v{preset}.
Plafond pixels (grand côté) : appliquer par manifeste. Défaut pratique : 4096 px maximum sur un bord par PNG web ; si le marketing exige des masters 5K+, conserver TIFF/PSD d’archive et livrer des tranches redimensionnées pour le web.
Bords transparents : ne pas découper au milieu d’ombres semi-transparentes — décaler la ligne de coupe vers une bande de fond opaque. Si deux voisins ont tous deux de l’alpha, prévoir 1 px de recouvrement dans le master avant export ou adoucir la jointure dans le fichier design pour éviter le fil de compression. Pour produits « flottants », idéalement garder tout le détourage dans une seule tranche ; sinon, dupliquer une bande de matting 2–4 px sur les deux voisins et valider en thème clair et sombre.
Les premières connexions SSH/VNC sont décrites dans notre guide d’aide pour onboarder design et ops sans friction.
Louez un Mac M4 distant pour découpe, optimisation et QA manifeste
Déportez la découpe des longues fiches, l’optimisation PNG et les contrôles batch journalisés vers un Mac mini M4 dédié : exports sRGB cohérents, disque stable, accès depuis n’importe où. Parcourez l’accueil, les tarifs et nœuds et l’aide SSH/VNC sans connexion obligatoire, puis louez au mois et connectez-vous en SSH ou VNC. Pour d’autres guides, ouvrez le blog design & workflow.