Picture element: art direction immagini
L'elemento <picture> è la soluzione HTML5 per servire immagini diverse in base a viewport, densità di pixel e formato supportato dal browser. Permette art direction (crop diversi su mobile e desktop), fallback graceful per formati moderni come WebP e AVIF, e ottimizzazione delle performance senza JavaScript. Vediamo come sfruttarlo.
Sintassi e funzionamento
Picture contiene una serie di <source> con media query e/o type, seguiti da un <img> come fallback obbligatorio. Il browser scorre le source dall'alto verso il basso e usa la prima che soddisfa le condizioni; in caso contrario carica l'img di fallback. Importante: solo l'immagine effettivamente scelta viene scaricata, evitando spreco di banda su risorse non utilizzate.
Art direction
Permette di servire immagini con crop o composizione diversa a seconda del viewport. Esempio: foto panoramica orizzontale su desktop, ritaglio verticale concentrato sul soggetto su mobile. Diverso da srcset (che serve solo la stessa immagine in risoluzioni diverse). Picture è imprescindibile quando il design richiede composizioni differenti per layout differenti, con vantaggi sia visivi che di performance.
Combinare con srcset e sizes
Picture e srcset si combinano per ottenere il massimo: ogni source può avere il proprio srcset con descrittori w, e l'img di fallback può avere srcset+sizes. Esempio: source con srcset="md.webp 800w, lg.webp 1200w" per breakpoint desktop, source per mobile con immagine diversa, img fallback con srcset jpg. Il browser sceglie source per media query e dentro la source la versione ottimale per viewport e densità. Massima ottimizzazione di performance e art direction simultanea, vale lo sforzo iniziale di configurazione.
Formato moderno e fallback
Strategia consigliata oggi: ordina le source da formato più moderno (AVIF) a meno (WebP), poi JPG come img fallback. Il browser sceglie il primo che supporta. AVIF offre 30-50% peso in meno rispetto a JPG con qualità equivalente; WebP è universale e ben supportato. Per immagini con trasparenza preferisci AVIF/WebP a PNG (peso minore). Generazione automatica via tool come Sharp (Node.js), Pillow (Python), ImageMagick o servizi CDN come Cloudinary, Imgix, Bunny.net.
Picture e cookie banner
Per cookie banner o promozioni che mostrano immagini diverse per regione, picture con media query non basta (richiede solo viewport size). Usa lazy loading + fetch dinamico via JavaScript: rileva paese via IP/header, scegli l'immagine appropriata, sostituisci il src dell'img. Per casi statici (es. localizzazione di lingue), picture può essere combinato con CSS che mostra/nasconde diverse picture in base alla classe sul body. Soluzione hybrid: HTML statico con tutte le opzioni, JavaScript leggero per attivare quella corretta in base al contesto runtime dell'utente.
Performance impact
Picture ben configurato riduce il peso totale delle immagini del 50-70%. Su un sito con 20 immagini in homepage, può tradursi in 500KB-2MB di risparmio sul caricamento iniziale, traducendosi in 1-3 secondi di LCP più veloce su connessioni mobile lente. Migliora i Core Web Vitals e quindi anche il SEO ranking. Combina con loading=lazy per immagini below-the-fold e fetchpriority=high per LCP image. Audit con Lighthouse evidenzia automaticamente immagini non ottimizzate; usalo per identificare quali hanno più potenziale di miglioramento.
Picture per dark mode
Picture può servire immagini diverse in base alla preferenza dark/light dell'utente tramite media query (prefers-color-scheme): <source srcset="logo-dark.png" media="(prefers-color-scheme: dark)">. Il browser rileva il tema OS dell'utente e sceglie l'immagine appropriata. Pattern utile per logo, illustrazioni, screenshot. Combina con CSS dark mode per esperienza coerente. Per JavaScript-driven dark mode (utente toggle), serve cambiare programmaticamente il src delle picture: meno elegante. Soluzione moderna: usa CSS custom properties + SVG inline che cambia colore via CSS. Per immagini raster fotografiche, picture con media query resta lo standard più compatibile.
Procedura passo-passo
- Apri il tag <picture>.
- Aggiungi <source srcset="img-desktop.webp" type="image/webp" media="(min-width: 1024px)"> per desktop WebP.
- Aggiungi <source srcset="img-mobile.webp" type="image/webp" media="(max-width: 1023px)"> per mobile WebP.
- Aggiungi una source AVIF prima delle WebP per browser più recenti.
- Includi <img src="img-fallback.jpg" alt="..."> come fallback obbligatorio.
- Per accessibility usa sempre alt descrittivo.
- Testa con DevTools simulando viewport e formati supportati.
Errori comuni e come risolverli
- img mancante: senza fallback il browser non sa cosa renderizzare; img è obbligatorio.
- Ordine source sbagliato: il primo match vince; metti i formati più recenti (AVIF) prima.
- Media query incompatibili: ranges che si sovrappongono o lasciano scoperti viewport; testa tutti i breakpoint.
- alt mancante: penalizza accessibilità e SEO; descrivi sempre l'immagine.
- Confondere picture e srcset: picture per art direction e formati; srcset per risoluzione.
Domande frequenti
D: Posso usare picture senza media query?
R: Sì, solo con type per servire formati alternativi come WebP/AVIF con fallback JPG.
D: Picture supporta lazy loading?
R: Sì, aggiungendo loading="lazy" all'img fallback.
D: Quale formato moderno usare?
R: AVIF per massima compressione, WebP per compatibilità più ampia, JPG come fallback universale.
D: Picture funziona con immagini di sfondo?
R: No, solo per immagini inline. Per background usa image-set in CSS.
Hai bisogno di aiuto?
Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.