Ottimizzazione delle immagini di WordPress: compressione delle dimensioni, aggiunta di tag alt (per migliorare la velocità e il SEO)

Le immagini sono il “fiore all'occhiello” di un sito web, ma se non vengono gestite correttamente, possono diventare un “ostacolo” che rallenta la velocità del sito e si perde l'opportunità di migliorare il SEO. Il fulcro dell'ottimizzazione delle immagini è “ridurne le dimensioni senza comprometterne l'aspetto visivo” e “far sì che i motori di ricerca comprendano il contenuto delle immagini”.Ridurre le dimensioni del file和Aggiungi un tag alt.Sono i due metodi più basilari e più efficaci.

I. Perché è necessario ottimizzare le immagini?

Per capire l'importanza dell'ottimizzazione, dobbiamo prima dare maggiore importanza a questo passaggio:

• Aumentare la velocità di caricamento.Le immagini non ottimizzate possono prolungare il tempo di caricamento della pagina e i visitatori potrebbero lasciare il sito prima che la pagina sia completamente caricata (uno studio ha dimostrato che i visitatori di 53% abbandonano il sito se il caricamento della pagina supera i 3 secondi).
• Risparmiare spazio sul server.Le immagini compressate occupano meno spazio e consentono di ridurre l'utilizzo dello spazio di archiviazione del server e il consumo di traffico (questo è particolarmente importante per i server che addebitano i costi in base al traffico).
• Aiuta il posizionamento SEO.I motori di ricerca (come Baidu e Google) non sono in grado di “capire” direttamente le immagini, ma possono comprendere il loro contenuto solo attraverso le informazioni testuali (come i tag alt). L'ottimizzazione delle immagini consente loro di ottenere maggiore visibilità nei risultati di ricerca.
• Adatto per dispositivi mobili.I telefoni cellulari hanno un traffico dati limitato, quindi le immagini di piccole dimensioni possono ridurre i tempi di caricamento e migliorare l'esperienza utente sui dispositivi mobili.

II. Compressione delle immagini: ridurre le dimensioni senza compromettere la qualità dell'immagine.

Il principio della compressione delle immagini consiste nell'eliminare le informazioni ridondanti delle immagini (come le differenze di colore difficilmente distinguibili a occhio nudo), riducendo le dimensioni del file pur mantenendo l'effetto visivo. Per i principianti, si consiglia di utilizzareIl plug-in comprime automaticamente.Non c'è bisogno di un'operazione manuale.

Metodo 1: Comprimere automaticamente con un plug-in (consigliato per i principianti)

Plugin consigliati: Smush o ShortPixel (la versione gratuita è sufficiente).

以 Smush Per esempio, i passaggi sono i seguenti:

1. Installare il plug-in: Backend [Plug-in] → [Installa plug-in] → Cerca “Smush” → Clicca su [Installa] → [Attiva].
2. Impostazioni di base:
   • Dopo l'attivazione, accedi alla pagina delle impostazioni del plug-in e seleziona “Comprimi automaticamente le immagini appena caricate” (le immagini appena caricate verranno compresse automaticamente, senza bisogno di alcuna azione manuale).
   • Fai clic su “Compressione in batch” e seleziona “Comprimi tutte le immagini” (per comprimere le vecchie immagini già caricate nella libreria multimediale).
3. Aspettare che la compressione sia completata: il plug-in mostrerà il progresso della compressione e lo spazio risparmiato (ad esempio “sono state compresse 50 immagini, con un risparmio di 20 MB di spazio”).

VantaggiIl tutto in modo completamente automatico, con supporto per la compressione in batch. La versione gratuita è sufficiente per le esigenze dei siti web di medie e piccole dimensioni (Smush, nella versione gratuita, consente di comprimere immagini singole fino a 5 MB, mentre ShortPixel, nella versione gratuita, consente di comprimere 100 immagini al mese).

Metodo 2: comprimere manualmente prima del caricamento (adatto per chi cerca l'ottimizzazione massima)

Se le immagini sono particolarmente grandi (come le foto originali scattate con una fotocamera, che spesso superano i 10 MB), si consiglia di comprimere manualmente le immagini sul computer prima di caricarle sul sito web:

1. Strumenti online(Non è necessario installare alcun software):
   • TinyPNG (\ntinypng.com(Supporta PNG e JPG, con un alto tasso di compressione e una minima perdita di qualità delle immagini; è possibile caricare fino a 20 immagini alla volta.)
   • Uno strumento di compressione delle immagini che supporta il formato WebP (che ha un volume inferiore del 30% rispetto al JPG).
2. I passaggi operativi：
   • Aprire lo strumento → Caricare l'immagine → Attendere che il processo di compressione sia completato → Scaricare l'immagine compressa → Caricarla nella libreria multimediale di WordPress.

Adatto al contesto.Per le immagini importanti come il banner della homepage e l'immagine principale della pagina dei dettagli del prodotto, la compressione manuale consente un controllo più preciso della qualità dell'immagine.

NB: per quanto riguarda la compressione, è necessario prestare attenzione ai seguenti aspetti:

• Le immagini normali (come quelle che accompagnano gli articoli) vengono compresse fino a Non più di 200 KB. Basta così, l'immagine di copertina della homepage dovrebbe essere contenuta entro Non più di 1 MB.。
• Usare preferibilmente Il formato WebP.(WordPress 5.8+ lo supporta nativamente) Rispetto al JPG, il formato PNG occupa circa il 50% di spazio in meno a parità di qualità dell'immagine.
• Evitare di comprimere troppo: una percentuale di compressione superiore all'80% potrebbe rendere le immagini sfocate, soprattutto quelle con molti testi (come screenshot e infografiche).

III. Aggiungere un tag alt: consentire ai motori di ricerca di “capire” le immagini.

“Il ”tag alt“ (o ”attributo alt“) è la ”descrizione testuale" di un'immagine. Quando l'immagine non riesce a caricarsi a causa di problemi di connessione Internet, questo testo verrà visualizzato; ancora più importante, i motori di ricerca utilizzano questa descrizione per comprendere il contenuto dell'immagine e influenzare il posizionamento della stessa nei risultati di ricerca.

Perché è necessario aggiungere un tag alt?

• Esempio 1: un'immagine di “scarpe da ginnastica rosse”. Se non fosse presente un tag alt, i motori di ricerca potrebbero sapere solo che si tratta di un'immagine; aggiungendo il tag alt “scarpe da ginnastica rosse, leggere e traspiranti”, i motori di ricerca assoceranno questa immagine ai termini di ricerca relativi alle “scarpe da ginnastica rosse”.
• Esempio 2: Quando il caricamento dell'immagine fallisce, i visitatori vedono il testo dell'attributo alt e capiscono quale immagine avrebbe dovuto essere visualizzata (invece di un'icona vuota o di un messaggio che indica che “l'immagine non può essere visualizzata”).

Come aggiungere un tag alt?

Metodo 1: aggiungere direttamente l'immagine durante il caricamento (consigliato)

1. Carica l'immagine (sia tramite la libreria multimediale che tramite l'editor) e, nella finestra delle impostazioni dell'immagine che si apre, trova la casella di testo per il “testo alternativo” (ovvero l'attributo alt).
2. Compila la descrizione:
   • Deve essere conciso e preciso (è consigliabile utilizzare 10-15 parole) e includere il contenuto principale dell'immagine (ad esempio, “la reception dell'ufficio aziendale” o “l'aspetto del laptop del 2023”).
   • Evita di accumulare parole chiave (come “Creazione di siti web con WordPress”, "Siti web", "Design", "Azienda") in una descrizione inutile.
   • Se l'immagine è decorativa (come una linea di separazione o un motivo di sfondo), è possibile lasciarla vuota o scrivere “Immagine decorativa” (per evitare di fuorviare i motori di ricerca).
3. Fai clic su “Inserisci nell'articolo” e l'etichetta alt entrerà in vigore automaticamente.

Metodo 2: aggiungere/modificare il tag alt delle immagini già caricate.

1. Accedi a [Media] → [Libreria], trova l'immagine che desideri modificare e fai clic sull'immagine per accedere alla pagina di editing.
2. Nella casella “Testo alternativo” a destra, inserisci o modifica il contenuto, quindi fai clic su [Aggiorna].

Etichette alt vs Titolo vs Didascalia: non confondiamo le cose!

Molti principianti confondono questi tre concetti. Per fare una distinzione semplice:

• Etichetta alt (testo alternativo)Questo campo è destinato ai motori di ricerca e viene visualizzato quando il caricamento fallisce; influisce sul SEO e deve essere compilato obbligatoriamente.
• TitoloIl testo visualizzato quando il cursore del mouse si posiziona sull'immagine (opzionale, adatto per fornire ulteriori dettagli, come ad esempio “Clicca per visualizzare l'immagine in alta definizione”).
• Descrizione (Caption)Il testo visualizzato sotto l'immagine (simile a una didascalia dell'immagine, come ad esempio “Figura 1: Scena della festa annuale dell'azienda”), da compilare secondo necessità.

4. Problemi comuni per i principianti

1. Tutte le immagini devono essere provviste di un tag alt?Quasi sì. Ad eccezione delle immagini puramente decorative (come sfondi a colori unito, cornici), tutte le altre immagini che contengono contenuti reali (immagini di prodotti, di persone, di scene, ecc.) devono essere aggiunte; questo è un requisito fondamentale per il SEO.
2. Cosa fare se l'immagine dopo la compressione risulta sfocata?Ridurre l'intensità della compressione (è possibile regolare il tasso di compressione nel plug-in) o ricomprimere con uno strumento di compressione manuale (come TinyPNG) per mantenere una qualità dell'immagine più elevata.
3. Le immagini in formato WebP non vengono visualizzate sui browser più vecchi?I browser moderni (Chrome, Edge, Firefox, Safari 14+) supportano tutti il formato WebP, mentre i browser più vecchi (come IE) sono usati raramente e non è necessario preoccuparsene troppo. Se è necessaria la compatibilità, è possibile installare il plug-in “WebP Express”, che fornisce automaticamente versioni alternative JPG per i browser più vecchi.
4. Dopo l'ottimizzazione delle immagini, la velocità del sito web non è cambiata?Potrebbero esserci altri fattori che influenzano (come la lentezza del server o l'eccesso di plug-in). Inizialmente, è possibile utilizzare lo strumento GTmetrix per verificare se le “dimensioni delle immagini” rappresentano ancora il problema principale.

L'ottimizzazione delle immagini è un'operazione “a basso costo e ad alto rendimento”: basta dedicare 10 minuti all'installazione dei plug-in e all'aggiunta dei tag alt per migliorare significativamente la velocità del sito web e le prestazioni SEO. Adottando l'abitudine di “ottimizzare sempre le immagini prima di caricarle”, il tuo sito web sarà più apprezzato dai visitatori e dai motori di ricerca.