La guida definitiva all'ottimizzazione delle immagini per WordPress

1 … 2 … 3 … – il tuo potenziale cliente ha appena chiuso il tuo sito perché è ancora in fase di caricamento. Suona familiare? Credo che tu sia stato quel visitatore impaziente e frustrato molte volte. So di esserlo. Ecco perché ho compilato un elenco definitivo di cose che devi sapere sull'ottimizzazione delle immagini. Ci vorrà molto, ma spero che valga la pena leggerlo.

Sommario

• Il contenuto di questo articolo in un video di 3 minuti
• Vantaggi dell'ottimizzazione dell'immagine
• Formati immagine
• Ridimensiona le immagini prima del caricamento
  • Plugin Imsanity WordPress per il ridimensionamento automatico delle immagini
• Compressione delle immagini
  • I migliori strumenti online per la compressione delle immagini
    • TinyPNG
    • Ottimilla
    • Compressore
    • ImageOptim
    • ImmaginePiù piccolo
    • Kraken
    • JPEG.io
    • Approfondimenti sulla velocità della pagina
    • Risultati per il miglior strumento di compressione online
    • Il miglior strumento di compressione online per JPEG
    • Il miglior strumento di compressione online per PNG
    • Il miglior strumento di compressione delle immagini online in assoluto
  • I migliori plugin per WordPress per la compressione delle immagini
    • WP Smush (versione gratuita)
    • Comprimi immagini JPEG e PNG con TinyPNG
    • ShortPixel
    • Immagina
    • EWWW Image Optimizer (versione gratuita)
    • Risultati per il miglior plugin per WordPress per la compressione delle immagini
    • Il miglior plugin per WordPress per la compressione di JPEG
    • Il miglior plugin per WordPress per la compressione di PNG
    • Il miglior plugin per WordPress per la compressione delle immagini in generale
• Conclusione

Il contenuto di questo articolo in un video di 3 minuti

Ecco una panoramica video molto veloce di questo articolo. Consiglio comunque la lettura, ma tanto per stuzzicarvi abbastanza, eccoci qui:

Vantaggi dell'ottimizzazione dell'immagine

Non sei ancora venduto su tutta la cosa dell'ottimizzazione delle immagini? Diamo un'occhiata a tutti i vantaggi che otterrai, se solo risolverai quel piccolo e banale problema:

• Il tuo sito sarà più veloce
• Il tuo punteggio di Google PageSpeed ​​sarà migliore
• A Google piacerai di più e il tuo posizionamento sui motori di ricerca migliorerà
• La tua frequenza di rimbalzo sarà più piccola e più visitatori vedranno la tua pagina
• Avrai bisogno di meno spazio di archiviazione sui tuoi server e spenderai meno risorse sui server, il che ti farà risparmiare denaro
• Risparmierai i soldi del piano dati mobili per te e i tuoi visitatori

Ho la tua attenzione ora, giusto? Ora possiamo iniziare con il vero lavoro.

Formati immagine

L'ottimizzazione delle immagini inizia con alcune conoscenze di base sui formati delle immagini. I due formati più comuni su Internet sono PNG con estensione .png e JPEG con estensione .jpg . Userò JPEG nella maggior parte dei casi, poiché è il formato migliore per foto, immagini con sfumature e immagini con milioni di colori. D'altra parte, PNG è migliore con immagini a colori limitati, come i loghi, e con le immagini con trasparenza.

Il prossimo esempio ti mostrerà quanto sia importante scegliere il giusto formato di immagine per la migliore ottimizzazione dell'immagine.

Salverò la nostra immagine child.jpg non ottimizzata in entrambi i formati .jpg e .png . Possiamo vedere che l'immagine child-saved-as-jpeg.jpg è grande 3,1 MB e l'immagine child-saved-as-png.png è grande 4,5 MB. In questo caso, l'immagine PNG è diventata del 45% più grande dell'immagine JPEG, una differenza che deriva semplicemente dalla scelta di un formato immagine specifico. Non esiste un modo più semplice per risparmiare così tanto spazio con così poco sforzo. Beh, forse c'è. Diamo un'occhiata al passaggio successivo.

Ridimensiona le immagini prima del caricamento

Abbiamo risparmiato spazio scegliendo il formato immagine corretto nel nostro esempio precedente, ma possiamo risparmiare ancora più spazio , se ridimensioniamo l'immagine prima di caricarla. Ma quanto dovremmo ridimensionarlo? Dipende davvero dalla larghezza e dal contenitore del tuo sito web.

Sul nostro sito ProteusThemes, la larghezza massima per l'immagine è 1110 px, quindi ridimensionerò l'immagine corrente child.jpg , che è larga 1800 px, a 1110 px di larghezza. In tal caso siamo passati da 3,1 MB a 1,1 MB di dimensione, che è un altro 65% di spazio risparmiato e ridotto .

Suggerimento: puoi ridimensionare le immagini direttamente nella tua libreria multimediale di WordPress. Fai clic su Media -> Seleziona la tua immagine -> Modifica immagine e scegli nuove dimensioni per la tua immagine:

Plugin Imsanity WordPress per il ridimensionamento automatico delle immagini

Se non vuoi pensare al ridimensionamento delle immagini o se molti utenti diversi caricano immagini sul tuo sito Web, il plug-in Imsanity dovrebbe funzionare perfettamente per te. Nelle impostazioni del plug-in, puoi scegliere la larghezza o l'altezza massima che le immagini dovrebbero avere e il plug-in ridimensionerà tutte le immagini più grandi a quella dimensione. Puoi anche selezionare la funzione di ridimensionamento in blocco per ridimensionare tutte le immagini esistenti. Consiglio vivamente questo plugin a chiunque abbia problemi con il ridimensionamento di ciascuna immagine separatamente prima di caricarla. Puoi scaricare gratuitamente il plug-in Imsanity.

Compressione delle immagini

Ora che abbiamo appreso le basi dell'ottimizzazione delle immagini, vediamo come possiamo migliorare il nostro gioco. Possiamo trovare numerosi strumenti online di compressione delle immagini su Internet e persino plugin di WordPress , che ridurranno le dimensioni della tua immagine. Ma dobbiamo stare attenti qui, alcuni degli strumenti non faranno quasi alcuna differenza e alcune delle impostazioni distruggeranno la nostra immagine e la renderanno inutile. Quindi, come trovare l'equilibrio perfetto? Non preoccuparti, nel momento in cui scriviamo (giugno 2017, aggiornato 2018), abbiamo testato tutti gli strumenti/servizi online più popolari e i plugin di WordPress per l'ottimizzazione delle immagini e abbiamo selezionato i migliori.

Abbiamo utilizzato 3 diverse immagini JPEG e 1 immagine PNG per condurre il nostro test.

Tutte e 3 le immagini JPEG provengono da Unsplash, degli autori Mi Pham, Breather, Denise Chan e Niko Virtanen. Sono stati ritagliati e ridimensionati a 1110 x 624 px a scopo di test.

Per l'immagine PNG, abbiamo creato la nostra immagine con il logo ProteusThemes e qualche motivo dietro. Proprio come le immagini di prova JPEG, anche questa viene ridimensionata a 1110 x 624 px.

Ora metteremo tutte le immagini attraverso tutti gli strumenti e i plugin selezionati per la compressione e scopriremo qual è il migliore da usare. Cominciamo con gli strumenti online.

I migliori strumenti online per la compressione delle immagini

Nel momento in cui scriviamo (giugno 2017, aggiornamento 2018), ecco un elenco completo degli strumenti e dei servizi online più diffusi per la compressione delle immagini:

• TinyPNG
• Ottimilla
• Compressore
• ImageOptim
• ImmaginePiù piccolo
• Kraken
• JPEG.io
• Approfondimenti sulla velocità della pagina

Se pensi che qualche altro strumento meriti di essere in quell'elenco, faccelo sapere, lo testeremo e lo aggiungeremo all'elenco. Di seguito puoi trovare le mie recensioni di ciascuno strumento, oltre alla mia valutazione dei migliori. Se non vuoi leggere di ogni singolo strumento, clicca qui – Mostrami i vincitori!

TinyPNG

TinyPNG è stato uno dei primi strumenti di compressione delle immagini che ho usato e lo uso ancora a volte. Non ci sono opzioni, basta caricare le immagini e le otterrai compresse. Con questo strumento online, puoi caricare in blocco fino a 20 immagini con una dimensione di 5 MB.

Ottimilla

Optimizilla è un altro strumento online semplice ma potente. È gratuito e ha un'opzione per caricare in blocco fino a 20 immagini. Per il miglior rapporto compressione/qualità lasciamo l'impostazione della qualità a 90, come è per impostazione predefinita. Se vuoi spingere ulteriormente la compressione, cambia semplicemente questa impostazione e vedrai subito i cambiamenti nella qualità.

Compressore

Compressor ha il potenziale per diventare uno dei migliori strumenti per la compressione delle immagini, ma ha un grosso difetto. Al momento non è disponibile alcuna opzione per il caricamento collettivo, il che significa che puoi comprimere solo 1 immagine alla volta. Oltre a questo, è gratuito, facile da usare e con due opzioni di compressione. Usiamo l'opzione lossy nel nostro test, poiché la qualità dell'immagine rimane la stessa dopo la compressione.

ImageOptim

ImageOptim è uno strumento con molte impostazioni. Puoi scegliere tra 3 diverse opzioni di qualità e 3 diverse opzioni di qualità del colore. Abbiamo scoperto che i migliori risultati di compressione/qualità sono con le impostazioni predefinite. Imposta la qualità su media e la qualità del colore su automatica. La cosa che mi ha infastidito di più con ImageOptim , accanto al piccolo design obsoleto, era che esporta JPEG anche se carico PNG . Ho inviato a Kornel (creatore di ImageOptim) un'e-mail su quel problema e l'ha già risolto.

ImmaginePiù piccolo

Proprio come con Compressor , ImageSmaller ha lo stesso difetto. Non è disponibile alcuna opzione per il caricamento collettivo. Tuttavia, ha uno dei limiti di caricamento più grandi, con i 50 MB. Se hai file più grandi da ottimizzare, ImageSmaller potrebbe essere lo strumento giusto per te.

Kraken

Kraken è uno strumento di compressione delle immagini premium, con il miglior dashboard tra tutti gli strumenti che ho testato. Troverai una bella interfaccia web per caricare le tue immagini e molte impostazioni diverse per i migliori risultati. Abbiamo usato le loro impostazioni con perdita di default nel nostro test.

JPEG.io

JPEG.io è una versione gratuita dello stesso strumento di Kraken . Ha le stesse capacità di compressione, ma come ci dice l'URL del sito Web, è solo per JPEG.

Approfondimenti sulla velocità della pagina

Non ti aspettavi di vedere questo qui, giusto? PageSpeed ​​Insights ci fornisce anche un .zip di file compressi quando stiamo testando il nostro sito. Questo non è il modo più intuitivo, dal momento che dovrai già avere il tuo sito web online con tutte le immagini e poi sostituirle con le nuove compresse, ma otterrai immagini compresse proprio come le vuole Google.

Risultati per il miglior strumento di compressione online

Di seguito troverai i grafici con i risultati di tutti i nostri test. Puoi anche controllare il nostro foglio di calcolo dettagliato per ulteriori informazioni.

Il miglior strumento di compressione online per JPEG

La maggior parte degli strumenti ha compresso i nostri file JPEG di prova per circa l'80% . Diamo un'occhiata alla nostra immagine child.jpg . Abbiamo iniziato con una dimensione dell'immagine di 3,1 MB e dopo il ridimensionamento e la compressione la nostra immagine era grande solo 165 KB, il che significa una dimensione inferiore del 95% . Ora, questa è una differenza! Siamo riusciti a ottenere gli stessi risultati con Compressor e ImageOptim . Quindi, sembra che abbiamo due vincitori qui.

Il miglior strumento di compressione online per PNG

Per il nostro test PNG abbiamo ottenuto una dimensione media del 50% ridotta con tutti gli strumenti. Tuttavia, Optimizilla era leggermente migliore del resto, con una dimensione ridotta del 56% della nostra immagine pt-logo.png .

Il miglior strumento di compressione delle immagini online in assoluto

Anche se Optimizilla non fosse stato il miglior strumento di compressione per JPEG, lo avrei consigliato come il miglior strumento di compressione attualmente disponibile online. I JPEG compressi con il 79% sono comunque fantastici e puoi spingerli ancora più in alto, con una semplice impostazione della qualità sulla pagina. Ha anche un'opzione per il caricamento in blocco, dove Compressor è mancante e un caricamento più affidabile, rispetto a ImageOptim , in cui tutte le immagini vengono esportate come JPEG, anche se tra queste ci sono PNG. A causa di tutte queste cose, penso che Optimizilla meriti il ​​titolo di miglior strumento di compressione delle immagini online.

Successivamente, vediamo se i plugin di WordPress possono battere gli strumenti di compressione delle immagini online.

I migliori plugin per WordPress per la compressione delle immagini

Qual è la differenza tra gli strumenti di immagine online e i plugin di WordPress? Bene, se utilizzi strumenti di immagini online per la compressione delle immagini, dovrai comunque caricare quelle immagini sul tuo sito WordPress e quindi utilizzarle. Se preferisci avere tutto in un unico posto, il plug-in WordPress per la compressione delle immagini potrebbe essere la strada da percorrere. La maggior parte dei plugin ha anche un'opzione per ottimizzare le immagini con il caricamento, quindi puoi attivare quell'impostazione e dimenticare qualsiasi lavoro aggiuntivo.

Ho creato un nuovo sito WordPress per ogni plugin e ho caricato le stesse 4 immagini ogni volta. Plugin diversi hanno impostazioni diverse, quindi stavo cercando il perfetto equilibrio tra compressione e qualità dell'immagine.

Ho testato i seguenti plugin:

• WP Smush (versione gratuita)
• Comprimi immagini JPEG e PNG di TinyPNG
• ShortPixel
• Immagina
• EWWW Image Optimizer (versione gratuita)

Come ho detto prima, se conosci altri plugin che dovremmo testare, faccelo sapere e lo aggiungeremo all'elenco. Se non vuoi saperne di più su questi plugin, clicca qui – Mostrami i vincitori!

WP Smush (versione gratuita)

WP Smush è uno dei più vecchi plugin per la compressione delle immagini che io conosca. Ha un bel vantaggio rispetto a tutti gli altri plugin, poiché non è necessaria la registrazione per utilizzare una versione gratuita. Ha anche un'opzione per comprimere automaticamente le immagini appena caricate, quindi una volta impostato il plug-in, puoi dimenticartene e farà tutto il lavoro per te in background. Sfortunatamente, i risultati della compressione sono stati uno dei peggiori nella versione gratuita, quindi non consiglierei di usarlo. Hanno dichiarato sul loro sito che la versione pro si sta comprimendo molto meglio, quindi proverò anche questa nel prossimo aggiornamento dell'articolo.

Comprimi immagini JPEG e PNG con TinyPNG

Proprio come lo strumento di compressione online TinyPNG , anche il plugin di WordPress è molto semplice. Una volta completata la registrazione, ha impostazioni minime e praticamente funziona immediatamente. Tutte le immagini appena caricate possono anche essere compresse automaticamente, quindi puoi attivare il plug-in e dimenticartene.

ShortPixel

ShortPixel è stata, personalmente, una delle più grandi sorprese. Non ne avevo mai sentito parlare prima della mia ricerca e sono rimasto davvero colpito. Con le impostazioni predefinite consigliate con perdita, ha i migliori risultati di compressione tra i plugin di WordPress e ha anche un'opzione lucida. Questa opzione è per fotografi o altri professionisti, che necessitano di immagini di altissima qualità e non possono scendere a compromessi con la perdita di qualità.

Immagina

Imagify è un plugin, realizzato dalle mani di famosi autori di plugin WP Rocket . Dopo la registrazione, avrai alcune opzioni chiare tra cui scegliere. Per la migliore compressione della razione e qualità dell'immagine, scegli la modalità aggressiva. Una cosa carina nelle impostazioni è anche un'opzione per avere una cartella separata per le immagini originali, nel caso qualcosa sia andato storto con la compressione. L'unica cosa che non ho capito completamente è perché dobbiamo passare alla visualizzazione elenco nei media per vedere i risultati della compressione. A parte questo, Imagify è un plugin davvero bello e solido.

EWWW Image Optimizer (versione gratuita)

EWWW Image Optimizer era l'unico plugin che mi dava alcuni errori. In primo luogo, l'ho provato sul mio hosting e ho ricevuto un errore, che EWWW Image Optimizer richiede exec() o chiave API. La prossima volta che ho provato il plugin sul mio sito WordPress di sviluppo locale e ho ricevuto un errore che mi mancava pngout. Ho seguito le istruzioni su come installarlo e il plugin era finalmente pronto per il test. Dato che ho testato la versione gratuita, c'era solo un'opzione senza perdita di dati, che non ha portato ai migliori risultati. Proprio come con WP Smush, testerò anche la versione pro di EWWW Image Optimizer nel prossimo aggiornamento dell'articolo e vedremo se funzionerà meglio.

Risultati per il miglior plugin per WordPress per la compressione delle immagini

Proprio come prima, di seguito troverai i grafici con i risultati di tutti i nostri test. Puoi anche controllare il nostro foglio di calcolo dettagliato per ulteriori informazioni.

Il miglior plugin per WordPress per la compressione di JPEG

ShortPixel è stato il vincitore, con una compressione media dell'84% . Lo stesso di Compressor e ImageOptim nella categoria per il miglior strumento di compressione online. Il secondo miglior plugin è stato Imagify , con una compressione media del 70% . Dichiaro che ShortPixel è attualmente il vincitore assoluto di quella categoria.

Il miglior plugin per WordPress per la compressione di PNG

Il miglior plug-in di compressione PNG si chiama Comprimi immagini JPEG e PNG di TinyPNG , con una compressione del 56% . È interessante notare che il miglior risultato è, ancora una volta, lo stesso della categoria per il miglior strumento di compressione online. Tuttavia, altri plugin sono un po' più competitivi qui, con una compressione di circa il 50% .

Il miglior plugin per WordPress per la compressione delle immagini in generale

A mio parere, il miglior rapporto tra esperienza utente, diverse impostazioni e compressione proveniva dal plug-in ShortPixel . Nel complesso, è un plugin molto solido, con molte opzioni, ma anche con già ottime impostazioni predefinite. Puoi iniziare a utilizzare il plugin subito dopo la registrazione e, soprattutto, la compressione è ottima. Al momento, sceglierei il plug-in ShortPixel per il mio sito Web, soprattutto se la maggior parte delle immagini sono JPEG.

Conclusione

È stato un lungo viaggio, giusto? Nel frattempo, siamo riusciti a comprimere la nostra immagine child.jpg fino al 95% . Il tuo sito web può funzionare molto più velocemente, se segui solo questi 3 semplici passaggi . Ripetiamoli ancora:

• Seleziona il formato immagine corretto
• Ridimensiona l'immagine prima di caricarla
• Comprimi l'immagine con gli strumenti online o i plugin di WordPress

Un'altra cosa importante è che utilizzi un solo strumento o plugin di WordPress per ogni immagine, poiché la maggior parte di essi ha una sorta di compressione con perdita, il che significa che la qualità della tua immagine potrebbe peggiorare con ogni compressione aggiuntiva e questo è qualcosa che non facciamo non voglio. Abbiamo anche aggiunto tutte le immagini di test su GitHub se desideri controllare il confronto della qualità tra di loro o testare altri strumenti e plug-in da solo.

Non dovresti avere più scuse per non comprimere le tue immagini. Ci sono molti strumenti e modi diversi per farlo e lo abbiamo dimostrato che alla fine ne vale la pena. Scegli il tuo vincitore personale per la compressione online o il plug-in WordPress e vai a controllare il punteggio di Google PageSpeed ​​del tuo sito web prima e dopo l'ottimizzazione. Condividi le informazioni sulla velocità del tuo sito e sul miglioramento del punteggio nella nostra sezione commenti. Vorrei anche sapere se questo articolo ti ha aiutato con l'ottimizzazione dell'immagine e cosa ne pensi.