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
Tutte le immagini sono ≤ 1400 px larghezza o ≤ 1200 px (ritratti). Nessun file supera 400 KB.
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
-
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).
-
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.
-
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à
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.
