Come ottimizzare le immagini per le prestazioni del web senza perdere la qualità

Sapevate che l’ottimizzazione delle immagini prima di caricarle su WordPress può avere un impatto enorme sulla velocità del vostro sito web?

Quando si apre un nuovo blog, molti principianti caricano semplicemente le immagini senza ottimizzarle per il web. Questi file immagine di grandi dimensioni rendono il sito web più lento.

Potete risolvere questo problema utilizzando le migliori pratiche di ottimizzazione delle immagini come parte della vostra regolare routine di blogging.

In questo articolo vi mostreremo come ottimizzare le immagini per ottenere prestazioni web più veloci senza perdere in qualità. Condivideremo anche i plugin di ottimizzazione automatica delle immagini per WordPress che possono rendervi la vita facile.

Trattandosi di una guida completa sull’ottimizzazione delle immagini per il web, abbiamo creato una tabella dei contenuti facile da seguire:

1. Che cos’è l’ottimizzazione delle immagini?

L’ottimizzazione delle immagini è il processo di salvataggio e consegna delle immagini nella dimensione di file più piccola possibile, senza ridurre la qualità complessiva dell’immagine.

Anche se il processo sembra complesso, in realtà al giorno d’oggi è piuttosto semplice. È possibile utilizzare uno dei numerosi plugin e strumenti per l’ottimizzazione delle immagini per comprimere automaticamente le immagini fino all’80% senza alcuna perdita visibile di qualità.

Ecco un esempio di immagine ottimizzata e non ottimizzata:

Come si può vedere, se ottimizzata correttamente, la stessa immagine può essere fino all’80% più piccola dell’originale senza alcuna perdita di qualità. In questo esempio, l’immagine è più piccola del 52%.

Come funziona l’ottimizzazione delle immagini?

In termini semplici, l’ottimizzazione delle immagini funziona utilizzando la tecnologia di compressione.

La compressione può essere “lossy” o “lossless”.

La compressione senza perdita riduce la dimensione complessiva del file senza alcuna perdita di qualità dell’immagine. Con la compressione lossy, la perdita di qualità può essere minima, ma idealmente non sarà percepita dai visitatori.

Cosa significa ottimizzare le immagini?

Potreste aver ricevuto una raccomandazione per l’ottimizzazione delle immagini dal supporto del vostro hosting WordPress o da uno strumento di test della velocità e vi siete chiesti cosa dovete fare.

È necessario ridurre le dimensioni dei file delle immagini ottimizzandole per il Web. Vi mostreremo come farlo passo dopo passo.

2. Quali sono i vantaggi dell’ottimizzazione delle immagini?

I vantaggi dell’ottimizzazione delle immagini sono molteplici, ma ecco i principali da conoscere:

• Velocità del sito web più elevata
• Miglioramento delle classifiche SEO
• Un tasso di conversione complessivo più elevato per vendite e contatti
• Meno spazio di archiviazione e larghezza di banda (che può ridurre i costi di hosting e CDN)
• Backup del sito web più veloci (che possono ridurre il costo dello storage di backup)

Le immagini sono il secondo elemento più pesante di una pagina web dopo i video. Secondo l’archivio HTTP, le immagini costituiscono il 42% del peso totale di una pagina web media.

Poiché sappiamo che i siti web veloci si posizionano meglio nei motori di ricerca (SEO) e hanno conversioni migliori, l’ottimizzazione delle immagini è qualcosa che ogni sito web aziendale deve fare se vuole avere successo online.

Ora vi starete chiedendo quanta differenza possa fare l’ottimizzazione delle immagini.

Secondo uno studio di Strangeloop, un ritardo di un secondo nel tempo di caricamento del sito web può costare il 7% delle vendite, l’11% di pageviews in meno e una diminuzione del 16% della soddisfazione dei clienti.

Se questi non sono motivi sufficienti per velocizzare il vostro sito web, sappiate che anche i motori di ricerca come Google riservano un trattamento SEO preferenziale ai siti web che si caricano più velocemente.

Ciò significa che, ottimizzando le immagini per il web, è possibile migliorare la velocità del sito e aumentare le classifiche SEO di WordPress.

Video tutorial

Se preferite le istruzioni scritte, continuate a leggere.

3. Come salvare e ottimizzare le immagini per le prestazioni sul Web

La chiave del successo dell’ottimizzazione delle immagini per le prestazioni del Web è trovare il perfetto equilibrio tra la dimensione minima del file e una qualità accettabile dell’immagine.

I tre elementi che giocano un ruolo fondamentale nell’ottimizzazione delle immagini sono:

• Formato del file immagine (JPEG vs. PNG vs. GIF)
• Compressione (maggiore compressione = minore dimensione del file)
• Dimensioni dell’immagine (altezza e larghezza)

Scegliendo la giusta combinazione di questi tre elementi, è possibile ridurre le dimensioni delle immagini fino all’80%.

Analizziamo ciascuno di essi in modo più dettagliato.

1. Formato del file immagine

Per la maggior parte dei proprietari di siti web, gli unici tre formati di file immagine veramente importanti sono JPEG, PNG e GIF. La scelta del tipo di file giusto svolge un ruolo importante nell’ottimizzazione delle immagini.

Per semplificare le cose, si consiglia di usare i JPEG per le foto o le immagini con molti colori, i PNG per le immagini semplici o trasparenti e le GIF solo per le immagini animate.

Per coloro che non conoscono la differenza tra i vari tipi di file, il formato immagine PNG non è compresso, il che significa che è un’immagine di qualità superiore. Lo svantaggio è che le dimensioni dei file sono molto più grandi.

D’altra parte, JPEG è un formato di file compresso che riduce leggermente la qualità dell’immagine per fornire un file di dimensioni significativamente inferiori.

Mentre la GIF utilizza solo 256 colori e una compressione senza perdite, il che la rende la scelta migliore per le immagini animate.

Su WPBeginner, utilizziamo tutti e tre i formati di immagine in base al tipo di immagine.

2. La compressione

Il punto successivo è la compressione delle immagini, che svolge un ruolo fondamentale nell’ottimizzazione delle immagini.

Esistono diversi tipi e livelli di compressione delle immagini. Le impostazioni per ciascuno di essi variano a seconda dello strumento di compressione delle immagini.

La maggior parte degli strumenti di modifica delle immagini, come Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo e altri, hanno funzioni di compressione delle immagini integrate.

È anche possibile salvare le immagini normalmente e poi utilizzare uno strumento web come TinyPNG o JPEGmini per facilitare la compressione delle immagini.

Sebbene richiedano un certo sforzo manuale, questi due metodi consentono di comprimere le immagini prima di caricarle su WordPress, ed è quello che facciamo su WPBeginner.

Esistono anche alcuni popolari plugin per WordPress, come Optimole e EWWW Image Optimizer, in grado di comprimere automaticamente le immagini al primo caricamento. Questo è comodo e molti principianti e persino grandi aziende preferiscono usare questi plugin per l’ottimizzazione delle immagini.

Più avanti nell’articolo parleremo dell’utilizzo dei plugin di WordPress.

3. Dimensioni dell’immagine

Normalmente, quando si importa una foto dal telefono o da una fotocamera digitale, questa ha una risoluzione molto alta e grandi dimensioni del file (altezza e larghezza).

In genere, queste foto hanno una risoluzione di 300 DPI e dimensioni a partire da 2000 pixel. Mentre le foto di alta qualità sono adatte alla stampa o al desktop publishing, le loro grandi dimensioni le rendono inadatte ai siti web.

Ridurre le dimensioni dell’immagine a qualcosa di più ragionevole può ridurre significativamente le dimensioni del file. È possibile ridimensionare le immagini utilizzando un software di editing di immagini sul computer.

Ad esempio, abbiamo ottimizzato una foto con una risoluzione di 300 DPI e dimensioni di 4900×3200 pixel. La dimensione del file originale era di 1,8 MB.

Abbiamo scelto il formato JPEG per una maggiore compressione e abbiamo modificato le dimensioni in 1200×795 pixel. La dimensione del file è stata ridotta a soli 103 KB. È il 94% in meno rispetto alle dimensioni del file originale.

Ora che conoscete i tre fattori importanti per l’ottimizzazione delle immagini, diamo un’occhiata ai vari strumenti di ottimizzazione delle immagini per i proprietari di siti web.

4. I migliori strumenti e programmi per l’ottimizzazione delle immagini

Come abbiamo detto in precedenza, la maggior parte dei software di editing delle immagini è dotata di impostazioni di ottimizzazione e compressione delle immagini.

Al di fuori del software di editing delle immagini, esistono anche diversi potenti strumenti gratuiti per l’ottimizzazione delle immagini che possono essere utilizzati per ottimizzare le immagini per il web (con pochi clic).

Vi consigliamo di utilizzare questi strumenti per ottimizzare le immagini prima di caricarle su WordPress, soprattutto se siete dei perfezionisti.

Questo metodo consente di risparmiare spazio su disco sul proprio account di hosting WordPress e garantisce immagini più veloci e di qualità migliore, poiché ogni immagine viene esaminata manualmente.

Adobe Photoshop

Adobe Photoshop è un’applicazione premium per l’editing di immagini che consente di esportare immagini di dimensioni ridotte per il web.

Utilizzando la finestra di dialogo di esportazione, è possibile scegliere il formato di file immagine (JPG, PNG, GIF) che offre le dimensioni più ridotte.

È inoltre possibile ridurre la qualità dell’immagine, i colori e altre opzioni per ridurre ulteriormente le dimensioni del file.

GIMP

GIMP è un’alternativa gratuita e open-source ad Adobe Photoshop. Può essere utilizzato per ottimizzare le immagini per il web. Lo svantaggio è che non è facile da usare come altre soluzioni di questo elenco.

Per prima cosa, è necessario aprire l’immagine in GIMP e selezionare l’opzione File ” Esporta come…. Verrà visualizzata la finestra di dialogo Esporta immagine, dove è possibile assegnare un nuovo nome al file. Successivamente, è necessario fare clic sul pulsante ‘Esporta’.

A questo punto vengono visualizzate le opzioni di esportazione delle immagini. Per i file JPEG, è possibile utilizzare il cursore ‘Qualità’ per selezionare il livello di compressione e ridurre le dimensioni del file.

Infine, fare clic sul pulsante ‘Esporta’ per salvare il file immagine ottimizzato.

TinyPNG

TinyPNG è un’applicazione web gratuita che utilizza una tecnica di compressione lossy intelligente per ridurre le dimensioni dei file PNG e JPEG. Tutto ciò che dovete fare è andare sul suo sito web e caricare le vostre immagini con un semplice drag and drop.

Comprimeranno l’immagine e vi forniranno un link per il download.

Hanno anche un’estensione per Adobe Photoshop, che è quello che usiamo come parte del nostro processo di editing delle immagini, perché consente di accedere a TinyPNG dall’interno di Photoshop.

Per gli sviluppatori, hanno un’API per convertire automaticamente le immagini. Inoltre, per i principianti, è disponibile un plugin per WordPress che lo farà per voi. Ne parleremo più avanti.

JPEGmini

JPEGmini utilizza una tecnologia di compressione senza perdita di dati che riduce significativamente le dimensioni delle immagini senza alterarne la qualità percepita. È inoltre possibile confrontare la qualità dell’immagine originale e di quella compressa.

È possibile utilizzare la versione web gratuitamente o acquistare il programma per il proprio computer. Esiste anche un’API a pagamento per automatizzare il processo per il vostro server.

ImmagineOptim

ImageOptim è un’utility per Mac che consente di comprimere le immagini senza perdere qualità, trovando i migliori parametri di compressione e rimuovendo i profili di colore non necessari.

Un’alternativa a Windows è Trimage.

5. I migliori plugin per l’ottimizzazione delle immagini per WordPress

Riteniamo che il modo migliore per ottimizzare le immagini sia farlo prima di caricarle su WordPress. Tuttavia, se gestite un sito con più autori o avete bisogno di una soluzione automatica, potete provare un plugin per la compressione delle immagini di WordPress.

Ecco il nostro elenco dei migliori plugin per la compressione delle immagini di WordPress:

1. Optimole, un popolare plugin realizzato dal team di ThemeIsle
2. Ottimizzatore di immagini EWWW
3. Compressione di immagini JPEG, PNG e WebP, un plugin del team di TinyPNG citato in precedenza.
4. Imagify, un plugin del famoso team di WP Rocket
5. Ottimizzatore di immagini ShortPixel
6. Smush
7. reSmush.it
8. Envira Gallery è un plugin per gallerie di WordPress con compressione delle immagini integrata.

Questi plugin per l’ottimizzazione delle immagini di WordPress vi aiuteranno a velocizzare il vostro sito web.

6. Riflessioni finali e buone pratiche per l’ottimizzazione delle immagini

Se non salvate le immagini ottimizzate per il web, dovete iniziare a farlo subito. Farà un’enorme differenza nella velocità del vostro sito e i vostri utenti vi ringrazieranno per questo.

Per non parlare del fatto che i siti web più veloci sono ottimi per il SEO e probabilmente vedrete un aumento delle posizioni nei motori di ricerca.

Al di fuori dell’ottimizzazione delle immagini, le due cose che vi aiuteranno in modo significativo a velocizzare il vostro sito web sono l’utilizzo di un plugin di caching per WordPress e l’utilizzo di un CDN per WordPress.

In alternativa, potete utilizzare una società di hosting WordPress gestita, perché spesso offre sia la cache che il CDN come parte della piattaforma.

Guide di esperti su come migliorare le prestazioni di WordPress

Ora che sapete come velocizzare il vostro sito web ottimizzando le immagini, potreste voler vedere altri articoli relativi al miglioramento delle prestazioni di WordPress.

• La guida definitiva per aumentare la velocità e le prestazioni di WordPress
• Come velocizzare le prestazioni di WooCommerce
• I migliori plugin per la cache di WordPress per velocizzare il vostro sito web
• Come ottimizzare Core Web Vitals per WordPress (Guida definitiva)
• Come ridurre il tempo al primo byte (TTFB) in WordPress – Suggerimenti degli esperti
• Come utilizzare il plugin GTmetrix per migliorare le prestazioni del sito WordPress
• L’hosting WordPress più veloce (test delle prestazioni)
• Metriche importanti da misurare sul proprio sito WordPress
• Come eseguire correttamente un test di velocità del sito web
• Come sottoporre a stress test un sito web WordPress

Speriamo che questo articolo vi abbia aiutato a capire come ottimizzare le immagini in WordPress. Potreste anche voler consultare la nostra guida su come migliorare la sicurezza di WordPress o le nostre scelte degli esperti sui migliori plugin WordPress per i siti web aziendali.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.