Come scegliere le dimensioni delle immagini per un sito web

Misura lo spazio nel tuo layout

Misura la larghezza dell’area occupata dall’immagine nella pagina, non quella dell’intera finestra. Parti dalle dimensioni consigliate dal tema o dal blocco immagine. Se non sono indicate, usa l’ispettore del browser o chiedi a chi gestisce il sito di verificare la larghezza visualizzata su telefono e computer. Considera anche eventuali viste ingrandite della galleria o funzioni di zoom.

Per un’immagine visualizzata a 720 pixel di larghezza, confronta versioni da 720 e 1440 pixel. Quella più grande può apparire più nitida su uno schermo ad alta densità, ma verifica se i dettagli aggiuntivi giustificano il file più pesante. Usa un originale abbastanza grande: ingrandire da 900 a 1440 pixel non recupera dettagli mancanti.

Punti di partenza per posizione

Una copertina da 2400 pixel non è giusta per ogni visitatore. Il telefono può richiedere meno pixel o un ritaglio diverso. Lo zoom prodotto può invece richiedere un file distinto maggiore della scheda normale.

Distingui pixel e peso

Le dimensioni descrivono la griglia, per esempio 1200 × 800. Il peso descrive dati memorizzati o trasferiti in KB o MB. Stesse dimensioni possono produrre pesi diversi secondo dettaglio, formato e compressione.

Un pixel CSS misura la dimensione visibile nel layout. Su uno schermo ad alta densità può usare più pixel fisici. Un’immagine nitida può quindi richiedere più pixel della sua larghezza visualizzata.

Parti dal layout. Una foto larga 600 pixel CSS solitamente non richiede la stessa sorgente di una foto a schermo intero. Schermi ad alta densità di pixel possono beneficiare di più pixel rispetto alla larghezza CSS; dipende dall’immagine e dall’aumento del peso del file.

Mantieni proporzioni intenzionali

In il ridimensionatore, blocca le proporzioni e inserisci 1200 pixel di larghezza per un originale di 3000 × 2000. L’altezza diventa automaticamente 800. Non occorre calcolare e inserire entrambe le dimensioni. Controlla la forma di volti e cerchi.

Per una miniatura quadrata ritaglia, invece di schiacciare una foto larga. Usa il ritaglio mantenendo il soggetto visibile su schermi piccoli. Ingrandire non ricrea dettagli mai acquisiti.

Fornisci le varianti necessarie

Il markup responsive permette al browser di scegliere i file. srcset basato sulla larghezza e sizes descrivono larghezze disponibili e spazio previsto, senza creare file. Vedi la guida MDN alle immagini responsive.

Controlla se il CMS genera già varianti e codice. Nei siti statici esporta i file e referenziali nella pagina. Tre caricamenti non collegati al codice non rendono responsive la consegna.

Definisci un obiettivo di peso per le immagini

Prova immagini rappresentative e tutta la pagina. Dodici schede prodotto hanno un budget diverso da un portfolio con una foto dettagliata. Nessuna soglia unica di kilobyte garantisce velocità o qualità.

1. Ispeziona alle dimensioni reali di visualizzazione.
2. Confronta misure inferiori e formati più efficienti.
3. Controlla il peso del file scaricato e i dettagli visibili.
4. Prova su mobile prima di riutilizzare l’impostazione.

Distingui copertine, prodotti e miniature

Se il soggetto di una copertina larga scompare su mobile, prepara un ritaglio dedicato invece di deformarla. Lo zoom prodotto può richiedere un file grande separato, inutile per ogni piccola scheda. Una miniatura quadrata va ritagliata, non ottenuta schiacciando una foto orizzontale.

Annota per ogni posizione proporzioni, larghezza massima, dimensioni candidate e dettagli indispensabili. Ricontrolla dopo un cambio di tema. Se il telefono scarica sempre il file maggiore, esamina la selezione responsive. Un nuovo file piccolo non aiuta se la pagina non lo usa.