← Vedi la demo live

Case study · progetto demo

Un catalogo prodotto senza una sola fotografia

Vetrina per una bottega di ceramiche artigianali, costruita per caricarsi in un istante anche con la connessione dati di chi la visita passeggiando sul lungomare.

Il problema

Una bottega artigianale in una località turistica riceve gran parte del traffico da persone che navigano dal telefono, spesso in spiaggia o per strada, con connessioni dati non sempre affidabili. Un catalogo prodotto tipico — dieci o dodici foto ben fatte — pesa facilmente 2-3 MB solo di immagini: su una rete debole significa secondi di attesa prima che compaia anche una sola ciotola, il tipo di attrito che fa chiudere la scheda prima ancora di vedere il prodotto.

Contesto e vincoli

Progetto demo pensato per dimostrare competenza su un vincolo specifico, non generico: non "voglio imparare a ottimizzare le immagini", ma "questo catalogo deve restare leggibile e veloce anche a 3 Mbit/s in un punto affollato del lungomare d'estate". Vincoli dichiarati:

• zero richieste di rete per le immagini prodotto: nessun file .jpg/.webp da scaricare;
• ogni illustrazione deve restare nitida su qualsiasi risoluzione di schermo, dal telefono al monitor esterno;
• il peso della pagina deve essere un dato dichiarato e verificabile, non una promessa generica.

Processo e decisioni

La decisione centrale è stata sostituire completamente la fotografia prodotto con illustrazioni vettoriali disegnate a mano, incluse direttamente nell'HTML come <svg> inline invece che come file .svg esterni: elimina anche l'unica richiesta di rete che un'immagine vettoriale esterna comunque richiederebbe. Ogni pezzo del catalogo è un tracciato semplice — poche curve di Bézier, nessun riempimento complesso — pensato per restare riconoscibile come disegno tecnico più che come illustrazione decorativa, coerente con l'idea di "scheda tecnica di bottega" che guida tutta la pagina.

La seconda decisione è stata rendere il peso della pagina un contenuto vero, non un claim di marketing: ogni scheda prodotto riporta il proprio peso in kilobyte accanto alle misure fisiche del pezzo (diametro, peso in grammi, temperatura di cottura), come se fosse una specifica tecnica alla pari delle altre. I numeri che si leggono in pagina sono stati misurati sul codice sorgente reale, non stimati a occhio.

Ho scelto anche di non caricare font esterni: una scelta di performance, ma anche coerente con l'impostazione generale — meno richieste di rete possibili, punto e basta, senza eccezioni "solo per la parte estetica".

Soluzione

La pagina risultante ha zero richieste HTTP per immagini o font: gli unici tre file scaricati sono l'HTML, il foglio di stile e — per le altre pagine del sito — questo case study. Le illustrazioni si caricano nello stesso istante del testo, perché tecnicamente sono testo: markup vettoriale, non file binari.

Risultati

Peso misurato sui file sorgente di questa pagina (HTML + CSS): circa 11 KB non compressi, meno di 4 KB con la compressione gzip che qualunque hosting statico applica di default. Per confronto, una singola fotografia prodotto compressa bene pesa da sola 150-400 KB — l'intero sito qui presente pesa meno di un decimo di una fotografia qualsiasi.

Nota: progetto dimostrativo a scopo di portfolio. Bottega, indirizzo e pezzi sono fittizi.