Formati e dimensioni

Scegliere il formato

WebP e AVIF offrono spesso file più leggeri di JPEG o PNG a qualità visiva comparabile, soprattutto per foto e hero. Non tutti i browser legacy li supportano: usa <picture> o servizio che negozia Accept per fallback JPEG. SVG resta ideale per icone e illustrazioni vettoriali, non per foto.

Srcset e sizes

Con srcset e sizes il browser sceglie la risoluzione adeguata al viewport e al DPR, evitando di scaricare 2400px su telefono 390px wide. L’attributo sizes descrive quanto spazio occupa l’immagine nel layout a varie breakpoint.

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(min-width: 64rem) 1200px, 100vw"
  alt="Atelier con luce naturale"
  width="1200"
  height="675"
  loading="eager"
  fetchpriority="high">

Ridurre il peso

Esporta alla dimensione massima realmente mostrata, non oltre. Comprimi con qualità 75–85 per JPEG/WebP e verifica a occhio. Below the fold usa loading="lazy"; above the fold evita lazy e considera preload per LCP.

Picture e fallback

Esempio art direction: crop diverso mobile/desktop con <source media="...">. Fallback <img> finale garantisce un’immagine sempre.

Pipeline di produzione

Definisci preset export (larghezze 400/800/1200, qualità WebP) in tool design o CI. Hero unico per campagna non deve essere 4000px se max display 1280. Usa CDN con trasformazione on-the-fly solo se cache e costi sono sotto controllo. Monitora peso totale immagini per pagina in audit performance.

Per icone UI preferisci SVG sprite o font icon solo se tree-shaken; altrimenti SVG inline con aria-hidden.

Per consolidare quanto hai letto, scegli due pagine reali del tuo sito e applica gli stessi criteri con il team: una modifica alla volta, verifica su mobile e annota nel registro interno data e responsabile. Così la lezione diventa pratica ricorrente e non un intervento una tantum prima di una campagna.

Verifica periodica

Programma ogni trimestre un controllo su pagine ad alto traffico: applica i criteri di Formati e dimensioni con la stessa procedura (browser, dispositivo, rete). Registra esito e responsabile in un foglio condiviso così il team non riparte da zero.

Se hai appena cambiato tema, plugin o builder, ripeti il controllo dopo 48 ore: cache CDN e minificazione possono mascherare errori finché non scade la vecchia versione. Coinvolgi chi scrive i contenuti, non solo chi sviluppa: molti problemi nascono da campi CMS lasciati vuoti.

Confronta i risultati con una pagina concorrente solo per capire gap di chiarezza, non per copiare testi. L’obiettivo è che un visitatore capisca in pochi secondi cosa offri e come contattarti.

Errori comuni

• srcset senza sizes (browser assume 100vw).
• Lazy su hero LCP.
• AVIF solo senza fallback testato.
• Ridimensionare solo via CSS width:100% con file sorgente enorme.
• Dimenticare alt e dimensioni intrinseche.
• Non verificare peso totale immagini per pagina dopo ogni upload editoriale.

In pratica, integra questo controllo nella routine di qualità del sito: una pagina campione al mese per categoria (home, servizio, articolo, checkout se presente), stesso profilo browser e rete. Annota nel registro interno data verifica e esito, così al prossimo redesign sai cosa è già stato validato. Quando il team cresce, una checklist condivisa evita che ognuno interpreti i criteri in modo diverso e riduce regressioni dopo deploy frettolosi.

Quando lavori con clienti o stakeholder non tecnici, traduci ogni raccomandazione in un esempio concreto sulla loro pagina: uno screenshot prima/dopo, una URL di prova, un tempo di caricamento misurato. Così le lezioni diventano azioni nel backlog invece di slide dimenticate. Riutilizza gli stessi criteri su ambienti preview prima della produzione e registra chi ha approvato il go-live, per tracciabilità in caso di regressione SEO o accessibilità.

Tieni un elenco di URL di riferimento nel tuo progetto e riapplicalo dopo ogni modifica al tema o al CMS, così non devi ricordare a memoria ogni regola.

Segna in calendario una revisione trimestrale: venti minuti bastano per confermare che template e plugin non abbiano reintrodotto errori già corretti.

In breve

• WebP/AVIF + fallback JPEG dove serve.
• srcset/sizes allineati al layout.
• width/height, lazy sotto piega.
• Compressione e dimensione sorgente realistica.