Media: immagini e testo alternativo

Modulo 4: Creare contenuti · Tempo di lettura: 9 minuti

Obiettivo della lezione: dopo questa lezione saprà preparare, caricare e descrivere correttamente le immagini, in modo che si carichino velocemente, appaiano nitide e siano fruibili da tutti.

Concetti chiave: libreria media, dimensioni delle immagini, big image threshold (2560 pixel), JPEG, PNG, WebP, AVIF, compressione, srcset, lazy loading, testo alternativo, nome del file, diritto d'autore

Cosa succede quando carica una foto

Lei carica una foto scattata con il telefono: 4.000 per 3.000 pixel, 5 MB. WordPress fa più di quanto si immagini:

1. Se la foto è più larga o più alta di 2.560 pixel, WordPress crea una versione ridotta (con -scaled nel nome) e la usa come "originale". Anche il vero originale viene conservato. Si chiama big image threshold ed esiste da WordPress 5.3.
2. WordPress crea inoltre una serie di dimensioni più piccole: miniatura (di serie 150 x 150 pixel, ritagliata), media (300), grande (1024) e dimensioni aggiuntive larghe 768, 1536 e 2048 pixel. Il tema e i plugin spesso ne aggiungono altre proprie.
3. Tutte le versioni finiscono in wp-content/uploads/2026/11/ (anno e mese del caricamento).

Così una sola foto diventa facilmente otto o più file. Ecco perché la cartella uploads cresce così in fretta (lezione 1.3) ed ecco perché conta ciò che carica.

Nella pagina, WordPress aggiunge a ogni immagine un srcset: un elenco di tutte queste dimensioni. Il browser sceglie da solo la dimensione più piccola che sia abbastanza nitida per lo schermo. Un telefono carica allora la dimensione da 768 pixel, uno schermo grande quella da 1536. Funziona bene solo se le dimensioni esistono, quindi se carica tramite la libreria media e non via FTP.

Ridimensionare e comprimere prima

Anche con queste dimensioni automatiche conviene ridurre le foto prima di caricarle:

• Dimensioni: una foto che sul Suo sito web non viene mai mostrata più larga di 1.600 pixel non deve essere larga 4.000 pixel. La riduca prima a circa 2.000 pixel sul lato lungo. Risparmia spazio, dimensione dei backup e tempo di caricamento.
• Compressione: un JPEG con qualità da 75 a 85 appare all'occhio quasi uguale a uno con qualità 100, ma spesso pesa la metà.
• Metadati: le foto scattate con il telefono contengono spesso la posizione GPS in cui sono state fatte. Se non vuole che tutti sappiano dove abita, la rimuova prima di caricarle. WordPress elimina molti metadati dalle dimensioni ridotte, ma l'originale può ancora contenerli.

Esistono plugin che comprimono le immagini durante il caricamento o le convertono in un formato più moderno. Sono comodi, ma verifichi se lo fanno sul Suo server o se inviano le foto a un servizio esterno (lezione 9.3), e se Le serve davvero un plugin quando può farlo anche prima.

Quale formato

Se il Suo server non sa elaborare un formato, WordPress restituisce un errore durante il caricamento oppure non crea le dimensioni più piccole. In Strumenti > Salute del sito, nella scheda Info, alla voce Gestione dei media, vede quali formati supporta il Suo server.

Lazy loading

Da WordPress 5.5 le immagini ricevono automaticamente loading="lazy": il browser carica un'immagine solo quando si scorre fino a essa. Questo rende molto più veloce una pagina lunga con molte foto. WordPress lascia volutamente senza lazy loading la prima immagine grande in cima alla pagina e spesso le dà la precedenza con fetchpriority="high", perché deve essere visibile il prima possibile. Ci torneremo nella lezione 6.3.

Imposti sempre anche larghezza e altezza di un'immagine (WordPress lo fa per le immagini della libreria media). Così il browser riserva lo spazio in anticipo e il testo non salta quando la foto arriva.

Testo alternativo: per chi non vede l'immagine

Il testo alternativo (alt text) descrive ciò che si vede in un'immagine. Gli screen reader lo leggono ad alta voce ai visitatori ciechi e ipovedenti, e compare quando l'immagine non si carica. I motori di ricerca lo usano per capire l'immagine.

Un buon testo alternativo descrive ciò che l'immagine comunica in questo contesto:

• Sbagliato: IMG_4032.jpg o foto.
• Sbagliato: negozio biciclette bici e-bike comprare economica bici (accumulare parole chiave non aiuta nessuno).
• Giusto: Meccanico regola i freni di una e-bike blu in officina.

Se un'immagine è puramente decorativa (una linea, un motivo di sfondo), lasci il testo alternativo vuoto. Così uno screen reader la salta. Vuoto è diverso da assente: con un'immagine senza alt uno screen reader spesso legge il nome del file. Un'immagine che è un link (per esempio un logo che porta alla homepage) descrive dove porta il link: Vai alla homepage del negozio di biciclette De Spaak.

Nella libreria media imposta il testo alternativo sull'immagine stessa, nell'editor a blocchi sul blocco Immagine. Attenzione: un testo alternativo inserito nella libreria media non cambia automaticamente nelle immagini già presenti nelle pagine.

Nomi dei file e diritto d'autore

• Nome del file: e-bike-remmen-afstellen.jpg (in olandese: «regolare i freni della e-bike») dice più di IMG_4032.jpg e finisce nell'indirizzo dell'immagine. Lettere minuscole, trattini, nessuno spazio.
• Diritto d'autore: un'immagine trovata su Google Immagini non è di libero utilizzo. Fotografi e banche di immagini inviano regolarmente fatture per l'uso senza licenza. Usi foto proprie, foto con una licenza chiara o una banca di immagini di cui conosce le condizioni, e conservi la prova della Sua licenza.

Spazio e pulizia

La libreria media non si ripulisce da sola. Un'immagine che toglie da una pagina rimane nella libreria e in uploads, con tutte le sue dimensioni. In un sito web con anni di contenuti, questo si accumula. Faccia pulizia di tanto in tanto, ma con cautela: un'immagine può essere usata in un punto che la libreria non vede (in un'impostazione del tema, un widget o un'email). Esegua prima un backup.

Riepilogo

• WordPress crea più dimensioni da ogni caricamento e riduce le foto grandi a 2.560 pixel; tramite srcset il browser sceglie la dimensione adatta.
• Riduca e comprima le foto prima di caricarle e rimuova i dati di posizione.
• Usi JPEG o WebP per le foto, PNG per loghi e screenshot; SVG solo con un plugin che ripulisce il file.
• Il lazy loading è automatico, tranne per la prima immagine grande; larghezza e altezza evitano gli spostamenti del layout.
• Un testo alternativo descrive ciò che l'immagine comunica nel contesto; le immagini puramente decorative ricevono un testo alternativo vuoto.

Quiz

Esercizio

Esercizio A4.4: Immagini nella Sua homepage. Inserisca l'indirizzo del Suo sito web. Il programma legge la homepage ed esamina le prime 20 immagini: hanno un attributo alt (vuoto va bene, assente no), hanno larghezza e altezza, e quanto pesa ciascun file (tramite una richiesta HEAD)? Le immagini oltre 300 kB vengono segnalate. Corregga ciò che è in rosso nella libreria media o nella pagina, poi ripeta il controllo.

Per approfondire

Questi articoli descrivono i passaggi nei pannelli di WebOké; in altri pannelli funzionano in modo simile.

• Guida DirectAdmin 18.5: Upload troppo grande (errore 413) o timeout
• Non è possibile caricare il file: aumentare upload_max_filesize e max_execution_time
• Libreria media (wordpress.org, in inglese): https://wordpress.org/documentation/article/media-library-screen/
• Scrivere testi alternativi (W3C, in inglese): https://www.w3.org/WAI/tutorials/images/decision-tree/