Immagini e media library: formati, dimensioni e alt text senza rallentare il sito
Le foto sono quasi sempre la parte più pesante di una pagina: qui sta buona parte della velocità di un sito.
Caricare una foto scattata con il telefono direttamente nella media library, da otto o dieci megabyte, è la causa più comune di un sito lento. Non serve un plugin di ottimizzazione per risolvere il problema alla radice: bastano poche abitudini corrette al momento del caricamento.
È come stampare una fototessera partendo dal file preparato per un manifesto pubblicitario. La qualità della fototessera non migliora di un millimetro, si spreca solo tempo a scaricare tutto quel peso che nessuno vedrà mai per intero.
1. Il formato del file: quando conviene il WebP
Dalla versione 5.8, WordPress supporta nativamente il formato WebP, che a parità di qualità visiva pesa in media circa il 30% in meno rispetto ai corrispondenti JPEG o PNG. Puoi caricarlo direttamente nella media library come qualsiasi altra immagine. Quando WordPress genera le dimensioni ridotte di un'immagine caricata, per impostazione predefinita mantiene lo stesso formato del file originale: caricare direttamente in WebP evita quindi conversioni successive.
2. Le dimensioni: lasciale gestire a WordPress
Ogni volta che carichi un'immagine, WordPress genera automaticamente più versioni ridotte, in base alle dimensioni registrate dal tema con la funzione add_image_size() e a quelle di base configurabili in Impostazioni, Media. Non serve ridimensionare l'immagine a mano prima del caricamento: serve solo evitare di caricare un file enorme quando il tema ne userà una versione molto più piccola.
Quando il tema mostra un'immagine con la funzione wp_get_attachment_image(), WordPress aggiunge automaticamente gli attributi srcset e sizes: è il browser stesso, in base alla dimensione reale dello schermo, a scegliere quale delle versioni generate scaricare. Su un telefono non arriva la stessa immagine pensata per un monitor largo.
3. Il testo alternativo: non è un dettaglio opzionale
Il campo «Testo alternativo» nella media library compila l'attributo alt dell'immagine. Serve a chi naviga con uno screen reader, che legge quel testo al posto dell'immagine, e serve anche quando l'immagine non riesce a caricarsi per un problema di rete. Un testo alternativo utile descrive cosa mostra l'immagine in poche parole semplici, senza ripetere parole chiave a caso solo per riempirlo.
- Immagini informative: una descrizione breve e concreta di ciò che mostrano: «Grafico delle vendite del terzo trimestre», non «immagine1».
- Immagini puramente decorative: meglio un attributo vuoto (alt="") piuttosto che ometterlo del tutto: uno screen reader lo salta senza interromperlo con un nome file inutile.
- Loghi e pulsanti con testo: l'alt text dovrebbe riportare lo stesso testo visibile nell'immagine, così chi non la vede riceve la stessa informazione.
4. Due cose che WordPress fa già da solo, senza plugin
Da WordPress 5.5 il caricamento differito delle immagini, il cosiddetto lazy loading, è attivo per impostazione predefinita: WordPress aggiunge automaticamente l'attributo standard loading="lazy" a ogni immagine con larghezza e altezza dichiarate, così le immagini più in basso nella pagina si caricano solo quando l'utente le sta per raggiungere scorrendo. Insieme alle dimensioni responsive del punto precedente, sono due ottimizzazioni che un sito riceve automaticamente, senza installare nulla.
In sintesi
| Voce | In pratica | Attenzione a |
|---|---|---|
| Formato | WebP quando possibile, circa il 30% più leggero di JPEG o PNG | Le sub-size mantengono il formato del file originale |
| Dimensioni | Generate automaticamente all'upload, servite via srcset | Non serve ridimensionare a mano prima di caricare |
| Alt text | Descrizione breve per ogni immagine informativa | Decorative: alt vuoto, mai omesso del tutto |
| Caricamento lazy | Attivo di default dalla versione 5.5 | Non serve un plugin per ottenerlo |
L'immagine più veloce da caricare è quella che pesa solo quanto serve, non un byte in più.
Commenti (0)
Registrati per commentare, fare domande e proporre l'argomento della prossima pillola (oppure accedi se hai già un account).
Nessun commento. Sii il primo a scrivere qualcosa.