Media: immagini e testo alternativo

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

Obiettivo della lezione: Dopo questa lezione sarà in grado di preparare, caricare e descrivere correttamente le immagini, in modo che si carichino velocemente, appaiano nitide e siano utilizzabili da chiunque.

Concetti chiave: libreria media, formati immagine, 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

Carica una foto dal Suo telefono: 4.000 per 3.000 pixel, 5 MB. WordPress fa allora più di quanto si pensi:

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". L'originale vero e proprio viene comunque conservato. Questo si chiama big image threshold ed esiste da WordPress 5.3.
2. WordPress crea inoltre una serie di formati più piccoli: miniatura (predefinita 150 x 150 pixel, ritagliata), medio (300), grande (1024) e formati aggiuntivi da 768, 1536 e 2048 pixel di larghezza. Il Suo tema e i Suoi plugin spesso ne aggiungono altri ancora.
3. Tutte le versioni finiscono in wp-content/uploads/2026/11/ (anno e mese del caricamento).

Una sola foto diventa così facilmente otto o più file. Per questo la cartella uploads cresce così tanto (lezione 1.3), ed è per questo che importa cosa carica.

Sulla pagina, WordPress aggiunge a un'immagine uno srcset: un elenco di tutti quei formati. Il browser sceglie da solo il formato più piccolo che risulta abbastanza nitido per lo schermo. Un telefono carica così il formato da 768 pixel, uno schermo grande quello da 1536. Questo funziona correttamente solo se i formati esistono, quindi se carica tramite la libreria media e non via FTP.

Ridimensionare e comprimere in anticipo

Anche con questi formati automatici, conviene ridimensionare le foto in anticipo:

• Dimensione: una foto che sul Suo sito non viene mai mostrata più larga di 1.600 pixel, non deve essere larga 4.000 pixel. La riduca in anticipo a circa 2.000 pixel sul lato lungo. Questo fa risparmiare spazio di archiviazione, dimensione del backup e tempo di caricamento.
• Compressione: un JPEG con qualità da 75 a 85 appare quasi identico all'occhio rispetto alla qualità 100, ma è spesso la metà più piccolo.
• Metadati: le foto scattate con un telefono contengono spesso la posizione GPS in cui sono state scattate. Se non vuole che tutti sappiano dove abita, li rimuova prima di caricare. WordPress rimuove molti metadati nei formati ridotti, ma l'originale può ancora contenerli.

Esistono plugin che comprimono le immagini al momento del caricamento o le convertono in un formato più moderno. Utili, ma verifichi se lo fanno sul Suo stesso server o inviano le foto a un servizio esterno (lezione 9.3), e se Le serve davvero un plugin quando può farlo anche in anticipo.

Quale formato

Se il Suo server non è in grado di gestire un formato, WordPress restituisce un errore al momento del caricamento oppure non crea i formati più piccoli. In Strumenti > Salute del sito (scheda Informazioni, sotto Gestione media) può vedere quali formati il Suo server supporta.

Lazy loading

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

Imposti sempre anche larghezza e altezza su un'immagine (WordPress lo fa per le immagini provenienti dalla libreria media). In questo modo il browser riserva in anticipo lo spazio e il testo non si sposta quando la foto viene caricata.

Testo alternativo: per chi non vede l'immagine

Il testo alternativo (alt text) descrive cosa rappresenta un'immagine. Gli screen reader lo leggono ad alta voce ai visitatori non vedenti e ipovedenti, e compare se l'immagine non si carica. I motori di ricerca lo usano per capire l'immagine.

Un buon testo alternativo descrive cosa dice l'immagine in questo contesto:

• Scorretto: IMG_4032.jpg oppure foto.
• Scorretto: negozio bici bicicletta e-bike comprare bicicletta economica (accumulare parole chiave non aiuta nessuno).
• Corretto: Un meccanico regola i freni di una e-bike blu nell'officina.

Se un'immagine è puramente decorativa (una linea, un motivo di sfondo), lasci il testo alternativo vuoto. Uno screen reader la ignorerà. Vuoto è diverso da assente: un'immagine senza alt fa spesso leggere ad alta voce il nome del file da uno screen reader. Un'immagine che funge da link (ad esempio un logo che porta alla homepage) descrive dove porta il link: Alla homepage di Fietsenwinkel De Spaak.

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

Nomi dei file e diritto d'autore

• Nome del file: e-bike-remmen-afstellen.jpg dice più di IMG_4032.jpg e compare nell'indirizzo dell'immagine. Lettere minuscole, trattini, nessuno spazio.
• Diritto d'autore: un'immagine presa da Google Immagini non è liberamente utilizzabile. Fotografi e banche immagini inviano regolarmente fatture per l'uso senza licenza. Usi foto proprie, foto con una licenza chiara o una banca immagini di cui conosce le condizioni, e conservi la prova della Sua licenza.

Spazio di archiviazione e pulizia

La libreria media non si pulisce da sola. Un'immagine che rimuove da una pagina resta nella libreria e nella cartella uploads, con tutti i suoi formati. Su un sito con anni di contenuti, questo si accumula. Faccia pulizia di tanto in tanto, ma con cautela: un'immagine può essere utilizzata in un punto che la libreria non vede (in un'impostazione del tema, in un widget o in un'email). Esegua prima un backup.

Riepilogo

• WordPress crea più formati per ogni caricamento e riduce le foto grandi a 2.560 pixel; il browser sceglie il formato adatto tramite srcset.
• Ridimensioni e comprima le foto in anticipo 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 avviene automaticamente, tranne per la prima grande immagine; larghezza e altezza evitano gli spostamenti del layout.
• Un testo alternativo descrive cosa dice l'immagine nel contesto; un elemento puramente decorativo riceve un testo alternativo vuoto.

Quiz

Esercizio

Esercizio A4.4: Immagini nella Sua homepage. Inserisca l'indirizzo del Suo sito. Il programma legge la homepage ed esamina le prime 20 immagini: hanno un attributo alt (può essere vuoto, non assente), hanno larghezza e altezza, e quanto è grande ogni file (tramite una richiesta HEAD)? Le immagini sopra i 300 kB vengono segnalate. Corregga ciò che è segnato in rosso nella Sua libreria media o nella pagina, e verifichi di nuovo.

Per saperne di più

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, Inglese): https://wordpress.org/documentation/article/media-library-screen/
• Scrivere testi alternativi (W3C, Inglese): https://www.w3.org/WAI/tutorials/images/decision-tree/