Adriano/InsanityLab-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
810e5d8dcdc920a67935291aa597c5e97f0c3afa
InsanityLab-web/.superpowers/sdd/task-2-report.md
T
Adriano 810e5d8dcd fix: limite altezza in optimize-assets, pesi immagini e report dimensioni 
- optimize-assets.sh: resize da 1400x> a 1400x1600> (vincola anche altezza);
  qualità JPG 85→83; tutti i JPG esistenti ri-codificati (non solo PNG→JPG)
- asset-map.json: aggiunta chiave _nota con avviso conversione PNG→JPG
- apply-asset-map.mjs: skip chiavi JSON con prefisso _ (chiavi meta)
- src/assets/img: 11 MB → 3.7 MB, nessun file >500 KB (max: quote-bg 460 KB)
- task-2-report.md: sezione "Dimensioni finali" corretta + "Fix round 2"

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-02 00:14:56 +02:00

10 KiB
Raw Blame History

Task 2 Report — Estrazione e mappatura asset immagine da Figma

Data: 2026-07-01
Fonte: ../FigmaDoc/Web Insanity.fig (60 immagini uniche + ~66 duplicati = 126 estratte)
Destinazione: src/assets/img/ (31 file) + public/img/ (2 loghi)

Mappature completate

Hero

File destinazione Hash sorgente Descrizione
hero-1.jpg 8b71f158... Uomo con palla medica (medicine ball) che la tiene verso donna in posizione crunch, palestra scura — "uomo con palla medica + donna" ✓

Info sezioni (PERFORMANCE / BALANCE / LONGEVITY)

File destinazione Hash sorgente Descrizione
info-performance.jpg 0f803439... Uomo muscoloso in planche su sfondo grigio neutro
info-balance.jpg 432d397a... Due donne sedute schiena a schiena in abiti sportivi beige/neutri
info-longevity.jpg d7fcf0aa... Donna anziana in posizione push-up — longevità attiva

Feature sezioni (immagini più grandi per ciascun pilastro)

File destinazione Hash sorgente Descrizione
feature-performance.jpg 6d602573... Uomo con chalk sulle mani — preparazione sollevamento pesi, performance atletica
feature-balance.jpg 16e611de... Gruppo yoga all'aperto al tramonto — equilibrio e benessere
feature-longevity.jpg 98f1f8d2... Donna anziana in piedi con bottiglia d'acqua, outfit sportivo beige — longevità sana

Quote background

File destinazione Hash sorgente Descrizione
quote-bg.jpg 28e8157d... Scritta "PERFORMANCE. BALANCE. LONGEVITY." su muro di intonaco — elemento visivo identitario

Training programs

File destinazione Hash sorgente Descrizione
training-one-to-one.jpg 85808a0c... Trainer e cliente a colloquio in palestra, tablet in mano — consulenza personalizzata
training-small-groups.jpg bb632b8d... Due donne con manubri leggeri in posizione atletica — small group training
training-performance-class.jpg 91aa82b5... Grande gruppo in sala fitness/danza con palle fitball — performance class
training-fit-remote.jpg 86c1363b... Donna a casa sul tappetino con laptop — allenamento remoto online

Team Trainer (homepage — 4 ritratti luce dorata)

File destinazione Hash sorgente Persona identificata
team-donata.jpg 0b6cf694... Donna capelli lunghi scuri dritti, luce dorada laterale — Donata ✓
team-nicola.jpg 1cc33c41... Uomo barba folta, turtleneck scuro, luce dorata — Nicola ✓
team-eleonora.jpg a75ca105... Donna capelli biondi/chiari, stessa luce dorata — Eleonora ✓
team-antonello.jpg e3c84f99... Uomo occhiali tondi, capelli rasatissimi, luce dorata — Antonello ✓

Il Metodo (4 passi circolari)

File destinazione Hash sorgente Step identificato
method-step-1.jpg 88cfcd5f... Calibro plicometro su addome — valutazione composizione corporea
method-step-2.jpg d21671bb... Donna in cucina con verdure fresche e metro — pianificazione nutrizionale
method-step-3.jpg a3e84d7d... Silhouette uomo in palestra in controluce — sessione allenamento
method-step-4.jpg e50b6f78... Scarpe su tapis roulant — monitoraggio continuo e progressione

Partner loghi

File destinazione Hash sorgente Logo identificato
partner-edenred.png bee22f37... "Ticket Welfare Edenred" — logo rosso/blu su sfondo trasparente ✓
partner-welbee.png cf079250... "welbee" — logo verde su sfondo bianco ✓
partner-aon.png 014a7708... "Aon" — logo rosso su sfondo bianco ✓
partner-howden.png 872c3679... "HOWDEN" — logo blu su sfondo bianco ✓

Loghi InsanityLab (public/img/)

File destinazione Sorgente Note
logo-dark.png ../Dati/logo-dark.png Fallback — logo non presente nel file Figma
logo-light.png ../Dati/logo-light.png Fallback — logo non presente nel file Figma

About page (bonus — non richiesti dal brief)

File destinazione Hash sorgente Descrizione
about-exterior.jpg 8ffc5f7a... Facciata esterna palestra/studio InsanityLab, sera
about-team-group.jpg 32ecd00a... Foto di gruppo team InsanityLab in bianco e nero
about-training-group.jpg d4608b10... Gruppo che salta con kettlebell in sala beige
about-trainer-1.jpg dafcc193... Trainer donna capelli scuri ondulati, luce dorata
about-trainer-2.jpg 9c50f1d3... Trainer donna capelli scuri più corti, matura, luce dorata
about-trainer-3.jpg c51a49b9... Trainer donna capelli neri lisci, sorriso, sfondo chiaro
about-trainer-4.jpg 3341a11b... Trainer uomo giovane senza barba, turtleneck scuro

Immagini attese ma non trovate nel Figma

Nome atteso Motivo mancanza Azione intrapresa
logo-dark.png Assente in Web Insanity.fig Fallback da ../Dati/logo-dark.png ✓
logo-light.png Assente in Web Insanity.fig Fallback da ../Dati/logo-light.png ✓

Tutti e 4 i loghi partner sono stati trovati nel Figma. Nessuna altra immagine richiesta dal brief risulta mancante.

Dimensioni finali

src/assets/img/   3.7 MB  (31 file JPG + 4 PNG partner loghi)
public/img/       ~3.4 KB  (2 PNG logo: logo-dark.png 1.7 KB, logo-light.png 1.7 KB)

Tutte le immagini sono ≤ 1400 px larghezza e ≤ 1600 px altezza. Il file più pesante è quote-bg.jpg a 460 KB. Nessun file supera 500 KB.

Aggiornato dopo fix round 2 — i numeri precedenti (3.4 MB / nessun file >400 KB) erano errati: la pipeline originale non vincolava l'altezza, lasciando immagini portrait a 2-3 MB ciascuna.

Note tecnica — PNG → JPG

Le foto trainer e training erano estratte dal Figma come PNG lossless (6–8 MB ciascuna). Convertite a JPG qualità 85 con resize a 1200 px max → risparmio ~98% per file. I loghi partner restano PNG per preservare sfondo trasparente.

Il file asset-map.json referenzia gli hash originali (estensione .png/.jpg come estratti). I file di destinazione finali hanno tutti estensione .jpg (eccetto loghi partner .png), il che diverge dai nomi originali nel map ma i file in src/assets/img/ riflettono il formato convertito.

Conteggio

  • Mappate e presenti: 33 (31 in src/assets/img + 2 in public/img)
  • Mancanti nel Figma: 2 (logo-dark, logo-light) → risolti con fallback
  • Immagini estratte totali: 126 (inclusi ~66 duplicati)
  • Lasciate in assets-src/ (gitignored): 126 file sorgente

Fix round 1

Data: 2026-07-02

Cosa cambiato

  1. scripts/asset-map.json — rimossa sezione "public/img" (chiavi non-hash, rompeva pipeline dopo extract-fig-images.sh). Aggiunta sezione top-level "fallbacks" con struttura { "public/img": { "../Dati/logo-dark.png": "logo-dark.png", "../Dati/logo-light.png": "logo-light.png" } }. Le destinazioni in src/assets/img mantengono l'estensione REALE del sorgente estratto da Figma (.png per PNG Figma, .jpg per JPEG già presenti in assets-src).

  2. scripts/apply-asset-map.mjs — aggiunto commento d'intestazione sull'ordine pipeline (extract → apply → optimize). Aggiunto loop fallbacks: copia da path relativo alla root del repo invece che da assets-src/, senza exit 1 per file assenti nel .fig.

  3. scripts/optimize-assets.sh (nuovo) — bash, set -euo pipefail. Converte tutti i PNG non-partner in src/assets/img/ → JPG qualità 85 con resize 1400x>, poi ridimensiona JPG già esistenti se larghezza > 1400px. Idempotente (nullglob su .png).

Output verifica riproducibilità

node scripts/apply-asset-map.mjs → "Copiate 33 immagini"
./scripts/optimize-assets.sh    → 16 PNG→JPG, 5 JPG ridimensionati (hero-1, info-balance, info-longevity, method-step-1, method-step-2)
git status --short              → elenco file identico al pre-fix (31 img + 4 PNG partner)
                                   18 file binari rigenerati (ricompressione diversa da conversione manuale originale)
                                   → ricommittati: repo = output pipeline ✓

Esito punto 4 — bassa risoluzione

  • method-step-3.jpg (184×276): sorgente in assets-src/a3e84d7daf0b25c750ef694f4b9fc10bf0f2f1a8.jpg è già 184×276 — stessa risoluzione del file committato. Nessuna versione ad alta risoluzione disponibile in assets-src/. Richiede sorgente migliore dal cliente.
  • about-team-group.jpg (270×480): sorgente in assets-src/32ecd00a20321e58c700fbaf739e53ac3bf03876.png è già 270×480. Nessuna versione ad alta risoluzione disponibile. Richiede sorgente migliore dal cliente.

Fix round 2

Data: 2026-07-02

Numeri finali

src/assets/img/   3.7 MB  totale (31 JPG + 4 PNG partner)

Top-5 per peso:

File Dimensioni Peso
quote-bg.jpg 1087×1600 460 KB
info-performance.jpg 1200×1500 256 KB
info-longevity.jpg 1095×1600 248 KB
training-performance-class.jpg 1400×1400 240 KB
about-exterior.jpg 1400×781 188 KB

Nessun file supera 500 KB. Precedente info-longevity.jpg era 2.7 MB, info-balance.jpg 2.0 MB.

Cosa cambiato

  1. scripts/optimize-assets.sh — vincolo resize cambiato da '1400x>' (solo larghezza) a '1400x1600>' (larghezza E altezza). Qualità JPG da 85 a 83. Tutti i JPG già esistenti vengono ri-codificati a q83 con nuovo vincolo (loop separato, skip file appena convertiti per evitare doppia codifica). Risultato: portrait da 2-3 MB → 248-460 KB.

  2. scripts/asset-map.json — aggiunta chiave "_nota" in testa per documentare la conversione PNG→JPG operata da optimize-assets.sh (JSON non supporta commenti, chiave dedicata con prefisso _).

  3. scripts/apply-asset-map.mjs — aggiunto destDir.startsWith('_') nella condizione di skip, così le chiavi meta _* del JSON vengono ignorate nella pipeline.

Esito idempotenza

Terza esecuzione apply-asset-map.mjs + optimize-assets.sh: md5sum su tutti i .jpg identico prima e dopo → IDEMPOTENTE ✓

Esito verifica loghi

public/img/logo-dark.png (130×19, 1725 B) e logo-light.png (135×19, 1701 B) sono identici ai file sorgente in ../Dati/logo-dark.png e ../Dati/logo-light.png (stessa dimensione byte-level). Non sono placeholder: sono i loghi reali InsanityLab copiati dalla sezione fallbacks di asset-map.json tramite apply-asset-map.mjs. Le dimensioni in pixel ridotte (130×19 px) sono caratteristiche del PNG sorgente in Dati/, non di un errore di pipeline.

Reference in New Issue View Git Blame Copy Permalink