Immagini

Le immagini raster della libreria vivono in public/images/ (loghi, banner, immagini decorative dei template). Non è una libreria di asset per i contenuti dei siti consumer: quelli restano gestiti dal CMS ospitante.

Convenzioni di naming

Le varianti ad alta densità (retina) usano il suffisso @Nx prima dell’estensione:

public/images/
├── logo-regione.png
├── logo-regione-square@2x.png
├── banner-arti.jpg
├── banner-arti@2x.jpg
├── banner-arti@3x.jpg
└── banner-arti@3-5x.jpg

Uso nel markup, tramite srcset:

<img src="/images/logo-regione.png" srcset="/images/logo-regione.png 1x, /images/logo-regione@2x.png 2x" alt="Regione Toscana - home page">

Nota: la libreria non usa oggi loading="lazy" né <picture>/srcset responsive per breakpoint — solo srcset a densità (1x/2x) per le immagini raster dei template esistenti. Chi integra immagini proprie nel sito consumer è libero di applicare lazy-loading o <picture> responsive: non è un pattern imposto né sconsigliato dal DS, solo non ancora presente nei componenti attuali.

Pacchetto scaricabile

Per uso locale/offline, un pacchetto zip di tutte le immagini è generato con:

npm run zip-images

Genera public/images.zip (tutto il contenuto di public/images/). Esiste anche npm run zip-images-with-date, che genera uno zip con timestamp nel nome invece di sovrascrivere images.zip.