Le immagini sono una parte importante del contenuto di un sito web, ma sono anche il "killer numero uno" della velocità: un'immagine ad alta risoluzione non ottimizzata (come quella di 5 MB) potrebbe aumentare il tempo di caricamento della pagina di 3-5 secondi, facendo perdere la pazienza agli utenti. Per fortuna, l'ottimizzazione delle immagini è un'operazione semplice, che consente di ridurre i tempi di caricamento delle immagini di oltre il 50% grazie a due strumenti fondamentali: la "compressione delle dimensioni" e il "caricamento differito". In questa sezione, l'ottimizzazione verrà eseguita in modo completamente automatico tramite un plug-in, rendendola accessibile anche ai principianti senza alcuna conoscenza tecnica.
I. Perché le immagini devono essere ottimizzate? 3 dati scioccanti.
- Le immagini di solito rappresentano il 60% del volume totale di caricamento di un sito web (molto più rispetto a testi, codici e altri contenuti).
- Per ogni secondo aggiuntivo di tempo di caricamento, il tasso di abbandono degli utenti aumenta del 201% (in particolare per gli utenti mobili, che sono più sensibili alla velocità).
- Le immagini non ottimizzate ridurranno direttamente il punteggio Google PageSpeed (che influisce sul posizionamento SEO).
Obiettivo principaleComprimere le immagini del 501% in TP4T e consentire il caricamento "su richiesta" delle immagini non visualizzate nella prima schermata, senza compromettere significativamente la qualità delle immagini stesse.
II. Metodo 1: Compressione delle immagini (utilizzare un plug-in per ridurre automaticamente le dimensioni)
Il principio della compressione delle immagini consiste nell'eliminare i dati ridondanti (come le informazioni sull'apparecchio di ripresa e i dettagli dei pixel non visualizzati), mantenendo al contempo pressoché invariata la qualità percettibile a occhio nudo. Si consiglia di utilizzare il plug-in "Smush" per una compressione completamente automatica, che supporta l'elaborazione in batch delle immagini esistenti e la compressione automatica delle immagini appena caricate.
Passo 1: installare e attivare il plug-in Smush.
- Dopo aver effettuato l'accesso al backend di WordPress, vai su "Plugins → Installa plugin".
- Cerca "Smush", trova il plug-in contrassegnato come "Sviluppato da WPMU DEV", e clicca su "Installa" → "Attiva".
Passo 2: Configurare la compressione automatica (non c'è bisogno di elaborare manualmente le nuove immagini)
Dopo l'attivazione, il plug-in passerà automaticamente alla pagina delle impostazioni, dove potrai procedere alla configurazione seguendo i passaggi indicati di seguito:
- Attivare la compressione automatica.Nella scheda "Impostazioni", assicurati che l'opzione "Comprimi automaticamente le immagini appena caricate" sia selezionata (selezionata per impostazione predefinita), in modo che le immagini caricate in futuro vengano automaticamente compresse senza bisogno di un'azione manuale.
- Scegli la modalità di compressione.：
- Per i principianti, si consiglia la "compressione senza perdita" (opzione predefinita): rimuove solo i dati ridondanti, senza perdita di qualità dell'immagine, con un tasso di compressione di circa 30%-50%.
- Se si desidera ottenere un tasso di compressione più elevato (ad esempio, se l'immagine è ancora troppo grande), è possibile selezionare la "compressione con perdita": con una leggera perdita di qualità (quasi impercettibile a occhio nudo), il tasso di compressione può raggiungere i 60%-80% (è necessario fare clic su "Impostazioni avanzate" per attivarlo).
- Salva le impostazioniClicca su "Salva impostazioni" in fondo alla pagina.
Passo 3: Comprimere le immagini esistenti in blocco (un'unica operazione per ottimizzare tutto il sito web)
Se il sito web contiene già molte immagini non compresse (come le immagini che accompagnano gli articoli precedentemente caricati), è possibile ottimizzarle con una sola azione utilizzando la funzione "Compressione batch":
- Nella pagina del plug-in Smush, fai clic sull'etichetta "Smush in batch" a sinistra.
- Fai clic su "Inizia subito" e il plug-in scannerà automaticamente tutte le immagini nella libreria multimediale.
- Dopo aver completato la scansione, fai clic su "Applica Smush a XX immagini" e il sistema le comprimerà in blocco (il processo potrebbe richiedere alcuni minuti, ma non è necessario aspettare, poiché può essere eseguito in background).
- \nControlla l'effetto della compressione.Dopo il completamento della compressione, verrà visualizzato il "risparmio totale di spazio" (ad esempio, "12 MB risparmiati"), e verrà inoltre elencata la comparazione delle dimensioni di ogni immagine prima e dopo la compressione.
III. Metodo 2: caricamento differito (consentire alle immagini di caricarsi "al bisogno")
Il principio del lazy loading è il seguente:L'immagine inizierà a caricarsi solo quando l'utente scorrerà fino alla posizione dell'immagine.In questo modo, le immagini della prima schermata (l'area che si vede per prima quando si apre la pagina) verranno caricate in priorità, mentre le immagini non appartenenti alla prima schermata (come le immagini degli articoli in basso e le immagini del piè di pagina) non verranno caricate temporaneamente, riducendo notevolmente il tempo di caricamento iniziale.
Con il plug-in Smush, puoi attivare il caricamento differito con un solo clic (senza bisogno di altri plug-in).
Smush ha una funzionalità di caricamento differito integrata, senza necessità di installare un plug-in separato. I passaggi di configurazione sono i seguenti:
- Nella pagina del plugin Smush, fai clic sull'etichetta "Caricamento differito" a sinistra.
- Seleziona "Abilita caricamento differito" e segui la configurazione consigliata di seguito:
- "Tipo di caricamento differito delle immagini": seleziona tutto (immagini, avatar, miniature, ecc.).
- "Elimina l'immagine della prima schermata": si consiglia di selezionare questa opzione (l'immagine della prima schermata non verrà ritardata, assicurando che gli utenti possano visualizzare rapidamente il contenuto principale quando aprono la pagina).
- "Animazione di caricamento": mantieni la preimpostazione (mostra una leggera animazione per segnalare all'utente che l'immagine è in fase di caricamento).
- Fai clic su "Salva impostazioni" e il caricamento differito entrerà immediatamente in vigore.
Verificare se il caricamento differito è effettivamente in funzione.
- Apri la pagina di un articolo qualsiasi sul sito web (che contenga più immagini) e premi F12 per aprire gli "Strumenti per sviluppatori" del browser.
- Fai clic sulla scheda "Rete", aggiorna la pagina e osserva il caricamento delle immagini:
- Durante il caricamento iniziale, solo l'immagine della prima schermata verrà visualizzata nell'elenco "Rete".
- Scorri la pagina verso il basso e, quando le immagini non presenti nella prima schermata entrano nel campo visivo, i record di caricamento di queste immagini appariranno nell'elenco "Rete", a dimostrazione che il caricamento differito è in funzione.
4. Ulteriori consigli per l'ottimizzazione delle immagini che i principianti devono conoscere.
1. Scegliere il formato di immagine corretto (che è ancora più importante della compressione).
Prima di caricare le immagini, selezionare il formato appropriato per ridurne le dimensioni fin dall'inizio:
- Foto/immagini complesseCon il formato WebP (che ha un volume inferiore del 301% rispetto al JPG e offre una qualità migliore), il plug-in Smush può convertire automaticamente i file JPG/PNG in WebP (attivando l'opzione "Conversione automatica in WebP" nelle "Impostazioni avanzate").
- Grafici/icone semplici: Utilizzare il formato PNG (che supporta gli sfondi trasparenti e ha dimensioni ridotte), evitando di utilizzare il formato JPG.
- Non utilizzare assolutamente i formati BMP e TIFF.Questi formati sono molto grandi e non sono adatti per l'uso sulle pagine web.
2. Controlla le dimensioni delle immagini (non usare "immagini grandi visualizzate in dimensioni ridotte").
Molti principianti caricano direttamente immagini ad alta definizione scattate con la fotocamera (ad esempio 3000×2000 pixel) e poi le visualizzano con le impostazioni di WordPress a 300×200 pixel, il che è un errore! Questo perché il browser continuerà a caricare l'immagine originale di grandi dimensioni, sprecando larghezza di banda e tempo.
Il modo corretto di procedere.：
- Prima di caricare l'immagine, utilizzare uno strumento di editing delle immagini (come "Pittura", preinstallato sul computer, o uno strumento online come Canva) per ritagliare l'immagine alle dimensioni effettive di visualizzazione (ad esempio, un banner di prima schermata largo 1200 pixel).
- Se non sai come usare gli strumenti per le immagini, puoi installare il plug-in "Imsanity", che comprimerà automaticamente le immagini caricate fino a una dimensione specificata (ad esempio, larghezza massima di 1200 pixel).
3. Evita di abusare delle immagini (non è sempre meglio averne di più).
- Quando è possibile spiegare qualcosa con delle parole, è meglio non usare delle immagini (come ad esempio delle semplici istruzioni passo passo).
- Molte immagini consecutive possono essere unite in una galleria a scorrimento (come la presentazione di un prodotto), riducendo il numero di immagini caricate contemporaneamente.
5. Risoluzione dei problemi più comuni
1. La qualità delle immagini dopo la compressione è notevolmente peggiorata?
- Se si utilizza la "compressione con perdita di qualità", è possibile ridurre l'intensità della compressione nelle impostazioni di Smush (selezionare "Impostazioni avanzate" → "Intensità della compressione" e impostarla su 50%).
- Si consiglia di utilizzare in via prioritaria la "compressione senza perdita" e il "formato WebP", per trovare un equilibrio tra dimensione e qualità dell'immagine.
2. Il caricamento differito causa la visualizzazione anomala delle immagini (ad esempio, vuote o disallineate)?
- Verificare se l'immagine della prima schermata è stata esclusa (se non lo è, potrebbe causare un caricamento ritardato dell'immagine della prima schermata e la comparsa di uno spazio vuoto temporaneo).
- Se alcune immagini devono essere caricate immediatamente, è possibile immettere il nome della classe CSS dell'immagine nella casella "Escludi" delle impostazioni di "Caricamento differito" di Smush (richiede una conoscenza di base del codice; i principianti possono disattivare temporaneamente il caricamento differito della pagina in cui si trova l'immagine).
3. L'aumento della velocità dopo l'ottimizzazione non è evidente?
- Rieseguire il test con GTmetrix (riferimento) Uno strumento per verificare la velocità del sito web.Dopo aver apportato le modifiche, controlla il "diagramma a cascata" per verificare se il tempo di caricamento delle immagini è diminuito.
- Se è ancora lento, potrebbero esserci altri fattori (come la lentezza della risposta del server o l'eccesso di plug-in), che richiedono l'applicazione di metodi di ottimizzazione successivi (come l'attivazione della cache).
Riassunto
L'ottimizzazione delle immagini è l'operazione con il "rapporto costi-benefici più alto" nell'ottimizzazione della velocità del sito web. Con il plug-in Smush, impostando tutto in 10 minuti, è possibile ridurre i tempi di caricamento delle immagini di oltre 50%. I passaggi principali sono: installare Smush → attivare la compressione automatica e la compressione in batch → abilitare il caricamento differito (escludendo le immagini della prima schermata).
Ricorda che il principio dell'ottimizzazione delle immagini è "quello che basta": non c'è bisogno di puntare a un tasso di compressione estremo, né di caricare immagini in altissima definizione. Il miglior risultato si ottiene trovando un equilibrio tra la qualità dell'immagine e la velocità di caricamento, in modo che gli utenti possano vedere chiaramente il contenuto e che questo si carichi rapidamente.
Italiano