Un'immagine web è pronta quando ha uno scopo chiaro, l'autorizzazione all'uso, un ritaglio adeguato, un file efficiente e un'alternativa testuale coerente con la sua funzione. Il file più piccolo non è sempre la scelta migliore: chi visita il sito deve comunque poter riconoscere un prodotto, leggere un diagramma o capire il senso di un'illustrazione. Controlla l'immagine nella pagina effettiva prima di approvarla.
Usa questa checklist quando prepari un nuovo sito, sostituisci un banner troppo pesante o consegni una cartella di materiali a chi sviluppa il sito. Parti da un'immagine rappresentativa, concorda le scelte e poi applicale alle altre. Conserva separatamente l'originale, così un futuro restyling non dipenderà da un'esportazione già compressa.
1. Decidi che cosa deve comunicare l'immagine
Descrivi in una frase il compito di ogni immagine. La fotografia di un prodotto potrebbe mostrare una finitura; un diagramma di processo potrebbe spiegare una sequenza; una texture decorativa potrebbe semplicemente accompagnare l'atmosfera della pagina. Se nessuno sa descriverne il compito, rivaluta se valga la pena scaricarla. Per alleggerire una pagina puoi anche eliminare un'immagine superflua, oltre a comprimere quelle esistenti.
Conserva insieme al file master la fonte, l'autore o il fornitore, gli usi consentiti e le eventuali attribuzioni richieste. Verifica se l'autorizzazione copre l'uso previsto sul sito e le modifiche o i ritagli. Ricevere un file per email non risolve, da solo, queste questioni. Per i permessi dubbi, rivolgiti al titolare dei diritti o a un consulente qualificato; questo è un controllo di gestione dei materiali, non una consulenza legale.
Per le immagini concettuali generate, conserva il prompt e il registro di generazione e dichiarane onestamente la funzione. Non presentare uno spazio di lavoro, un gruppo di persone o un prodotto immaginario come una fotografia dell'attività. Elimina dagli screenshot le informazioni personali non necessarie e controlla l'esportazione finale, compreso ciò che appare nelle schede del browser o nei pannelli dell'account.
2. Scegli il formato in base al contenuto
Scegli un formato di partenza, esporta una versione e confrontala con l'originale nelle dimensioni in cui verrà vista. Immagini diverse reagiscono diversamente alle stesse impostazioni di codifica. Non esiste un unico valore di qualità o un'estensione che renda ogni risorsa pronta per la pubblicazione.
- Fotografie e illustrazioni dettagliate: confronta WebP o AVIF con un JPEG ben codificato. Conserva l'opzione che mantiene i dettagli importanti con un peso di trasferimento accettabile.
- Loghi e diagrammi semplici: valuta SVG quando è disponibile un originale vettoriale affidabile. Controlla l'SVG ricevuto prima di aggiungerlo al sito e lascia il testo essenziale disponibile nella pagina.
- Grafica raster che richiede bordi precisi o trasparenza: confronta PNG con un'esportazione WebP adatta, senza perdita o con trasparenza. Esamina le linee sottili, le lettere e i bordi traslucidi sullo sfondo effettivo.
- Risorse animate: chiediti prima se il movimento aggiunge informazioni. Un'immagine statica può comunicare lo stesso concetto con meno distrazioni e una gestione più semplice.
Sono punti di partenza per le prove, non un obbligo di creare ogni formato. Ogni variante aggiuntiva richiede un motivo e una configurazione che la serva correttamente. Un AVIF inutilizzato accanto al JPEG pubblicato non migliora nulla. Conserva le impostazioni di esportazione nella scheda della risorsa, così un'altra persona potrà riprodurre una correzione senza andare per tentativi.
3. Adatta le dimensioni al layout
Distingui le dimensioni del file originale, quelle di visualizzazione e il ritaglio. Una fotografia può contenere migliaia di pixel e apparire in una scheda di dimensioni modeste. Esportare l'intero originale della fotocamera per ogni scheda spreca trasferimento senza renderla necessariamente più utile. Al contrario, allargare un'esportazione minuscola su uno schermo grande ne evidenzia la scarsa nitidezza.
Il markup delle immagini responsive può offrire più larghezze tramite srcset, mentre sizes descrive la larghezza prevista nel layout. Il browser seleziona una risorsa usando queste informazioni e le caratteristiche del proprio ambiente. Usa picture quando deve cambiare la composizione, per esempio con un ritaglio più stretto su mobile. MDN spiega la differenza tra scelta della risoluzione e direzione artistica nella sua guida alle immagini responsive.
Per la revisione, elenca gli spazi effettivi: banner a tutta larghezza, immagine di contenuto su due colonne, scheda e anteprima social. Controlla un telefono stretto e uno schermo ampio. Tieni il soggetto lontano dai bordi che scompaiono nel ritaglio. Se vengono tagliati un volto, un'etichetta o un dettaglio importante, cambiare la compressione non risolve il problema; cambia il ritaglio o il layout.
Imposta attributi width e height appropriati, così il browser può riservare spazio usando le proporzioni dell'immagine. Assicurati che il CSS responsive e gli eventuali ritagli alternativi siano coerenti con quello spazio. Prova il caricamento iniziale oltre alla pagina completamente caricata: uno screenshot stabile può nascondere uno spostamento avvenuto poco prima.
4. Comprimi senza perdere la funzione dell'immagine
Confronta le esportazioni affiancate nelle dimensioni di visualizzazione previste. Cerca bande nelle sfumature, aloni sui bordi sottili, dettagli impastati e contorni inattesi nelle aree trasparenti. Per le immagini di prodotto, verifica che non siano scomparse una texture o una differenza di colore. Il compromesso accettabile dipende da ciò che il visitatore deve capire.
Concorda un limite di peso orientativo per ogni spazio, poi analizza le eccezioni. Un'immagine didattica dettagliata può meritare più byte di una scheda decorativa. Il limite deve favorire una conversazione utile su formato, ritaglio e dimensioni; non deve imporre un risultato illeggibile né diventare una regola universale inventata come «ogni immagine deve pesare meno di 100 KB».
Misura il file che il browser riceve davvero. Un sistema di gestione dei contenuti potrebbe ricomprimere un caricamento, servire una variante inattesa o conservare in cache un'immagine precedente. Dopo la pubblicazione, esamina la pagina renderizzata e la risposta di rete. Mantieni un file master approvato ed esportazioni con nomi chiari, invece di salvare ripetutamente un'immagine già compressa attraverso ulteriori passaggi con perdita.
5. Scrivi il testo alternativo in base alla funzione
Parti dal contenuto circostante. Le immagini informative richiedono un'alternativa testuale che ne trasmetta il significato rilevante; quelle decorative usano normalmente un alt="" vuoto. Se un'immagine fornisce il nome accessibile di un link o pulsante, descrivine l'azione o la destinazione. I diagrammi complessi richiedono una spiegazione più completa disponibile nelle vicinanze. L'albero decisionale W3C per il testo alternativo aiuta a distinguere questi casi.
Per esempio, un primo piano in una pagina sui materiali potrebbe avere l'alternativa «Maniglia in ottone spazzolato con bordo arrotondato». Un'icona collegata a un download deve indicare lo scopo del download, non descrivere la freccia. Un bagliore decorativo dietro un titolo non dovrebbe annunciare «sfondo blu luminoso» a ogni persona che usa un lettore di schermo. La stessa immagine può richiedere un'alternativa diversa in un'altra pagina perché la sua funzione è cambiata.
Scrivi in modo naturale e conciso e includi dettagli solo quando aiutano a sostituire le informazioni visive rilevanti. Non riempire l'attributo di parole chiave sui servizi. Controlla se una didascalia o un paragrafo vicino dica già la stessa cosa ed evita ripetizioni inutili durante la lettura. Traduci le alternative insieme alla pagina, compresi i significati influenzati da etichette o screenshot localizzati.
Rivedi la pagina con le immagini non disponibili e controlla i nomi accessibili dei link costituiti da immagini. Questo permette di individuare significati mancanti e annunci duplicati che una revisione visiva può non rilevare. I controlli automatici possono segnalare un attributo assente, ma non giudicano in modo affidabile se una frase descriva la cosa giusta.
6. Carica l'immagine importante al momento giusto
L'immagine principale visibile all'arrivo non dovrebbe essere ritardata dal caricamento differito. Le immagini più in basso nella pagina sono candidate a loading="lazy". Riserva spazio anche per loro. La guida di web.dev al caricamento differito spiega perché le immagini visibili inizialmente richiedono un trattamento diverso da quelle fuori dall'area iniziale dello schermo.
Controlla quale immagine diventa effettivamente l'elemento visibile più grande della pagina. Un grande banner decorativo può competere con il titolo e i contenuti utili. Se l'immagine principale è probabilmente quella che determina Largest Contentful Paint, rendila individuabile presto e valuta se assegnarle una priorità di download alta. Dare priorità alta a ogni immagine elimina questa distinzione utile.
Prova un caricamento nuovo con una connessione limitata, poi scorri l'intera pagina. Cerca spazi che restano vuoti, spostamenti visibili dei contenuti e download molto più grandi del necessario per gli spazi di visualizzazione. Considera un audit locale delle prestazioni come evidenza relativa alla pagina e alla configurazione provate, non come una promessa per la connessione o il dispositivo di ogni visitatore.
7. Usa una scheda decisionale prima di esportare
Conserva questa breve scheda nella cartella dei materiali. Collega una scelta visiva a un controllo di implementazione e offre a chi modificherà i contenuti qualcosa di più utile di un nome di file che termina con «finale». Compila una riga per funzione quando lo stesso master compare in più posizioni.
| Decisione | Da registrare e verificare |
|---|---|
| Scopo e fonte | Che cosa spiega l'immagine; file master; registrazione del permesso o dell'approvazione. |
| Posizione e ritaglio | Pagina e spazio; larghezze di visualizzazione; punto focale; ritaglio mobile. |
| Esportazione | Formato scelto; dimensioni in pixel; peso del file; impostazioni; revisione visiva. |
| Alternativa | Funzione informativa, decorativa o funzionale; testo localizzato; spiegazione vicina. |
| Distribuzione | Varianti responsive; dimensioni riservate; comportamento di caricamento; URL pubblicato. |
Immagina un negozio di ceramiche che prepara la fotografia di una ciotola per una pagina di prodotto. Il master è una fotografia approvata larga 4000 pixel. Il gruppo di lavoro controlla lo spazio effettivo del prodotto, esporta due larghezze utili, confronta JPEG e WebP e sceglie la versione che conserva i dettagli dello smalto. Il ritaglio per telefono mantiene visibile il bordo. L'alternativa descrive la finitura rilevante; il testo del prodotto accanto riporta dimensioni e istruzioni per la cura.
L'esempio descrive un processo decisionale, non una ricetta obbligatoria di esportazione né un risultato ottenuto per un cliente. Un primo piano di una texture, uno schema delle misure e un'immagine decorativa per una campagna porterebbero a scelte diverse. Registra il motivo di un'eccezione, così l'aggiornamento successivo non la annullerà.
8. Verifica la reperibilità e la pagina finale
Usa elementi immagine standard per i contenuti significativi, fornisci un src di riserva funzionante e mantieni gli URL delle immagini accessibili ai crawler quando vuoi favorirne la scoperta. Usa nomi di file descrittivi e colloca le immagini accanto a testo pertinente. La guida Google alla SEO delle immagini illustra queste pratiche e precisa che Google non indicizza le immagini di sfondo CSS. Questi controlli favoriscono la reperibilità, ma non garantiscono l'indicizzazione o il posizionamento.
- Conferma l'immagine, il ritaglio e l'alternativa approvati in ogni lingua pubblicata.
- Controlla il file responsive selezionato, le dimensioni intrinseche e il comportamento di caricamento.
- Segui i link delle immagini con la tastiera e verifica che i loro nomi siano comprensibili.
- Controlla separatamente l'anteprima social: potrebbe usare un ritaglio e un file diversi.
- Conserva il master, le impostazioni di esportazione e la registrazione del permesso per il prossimo aggiornamento.
Se la preparazione delle immagini fa parte di un progetto web più ampio, consulta il servizio siti web di Digital Studio e includi i materiali esistenti e le immagini mancanti nel tuo brief del sito. Un elenco chiaro delle risorse aiuta ad avviare il progetto con decisioni concrete su che cosa conservare, sostituire o creare.
