Come convertire immagini in formato WebP

Cos’è il formato immagine WebP?

In ambiente web si sente spesso parlare di convertire immagini in formato WebP. Ma cosa cambia rispetto ai più noti formati JPEG e PNG? Si tratta di un formato compatibile con il mio sito web? Come posso gestire le immagini del mio sito web utilizzando il formato WebP?

Il formato WebP è ormai entrato a far parte dei formati immagine più comuni nell’utilizzo web e l’intento di Google, fin dalla sua introduzione nel 2010, è stato quello di introdurre questo formato come formato unico per le immagini consultabili online.

Questo perché il formato WebP ha un ottimo rapporto tra qualità dell’immagine e compressione, e rispetto ai formati comunemente utilizzati come JPEG e PNG, il WebP è più leggero di circa il 25-30%.

Il formato WebP vanta ormai una vasta compatibilità per i principali browser e questo in ottica di ottimizzazione del proprio sito web diventa di conseguenza determinante per rendere i contenuti sempre più leggeri e fruibili, soprattutto su dispositivi mobili, per ridurre il consumo di banda.

Quali sono le principali potenzialità del formato WebP?

WebP non è solo un formato immagine leggero e particolarmente adatto all’utilizzo web, ma supporta anche il salvataggio di immagini in trasparenza e le animazioni.

Possiamo quindi facilmente dedurre che le potenzialità delle immagini WebP sono davvero notevoli in quanto, con un solo formato, potremo andare a sostituire e ottimizzare tutti i più comuni formati utilizzati nel web:

• le immagini JPEG: che utilizzavamo per ottenere immagini compresse e allo stesso tempo complesse dal punto di vista grafico (palette colori ricche, formati grandi);
• le immagini PNG: che abbiamo finora utilizzato per mantenere le trasparenze o come formato più ottimizzato per la compressione su immagini graficamente meno complesse (pochi colori, bianco e nero);
• le immagini GIF: che siano animate o meno, sono entrambe convertibili in formato WebP.

Come posso convertire le mie immagini in formato WebP gratuitamente online?

Per convertire le immagini in formato WebP esistono diversi tool online gratuiti, alcuni più efficaci di altri in termini di compressione, e ogni giorno vengono sicuramente rilasciati nuovi strumenti. Al momento della scrittura di questo articolo (Luglio 2021) e secondo il nostro parere, un ottimo strumento per la conversione delle immagini JPEG e PNG in formato WebP è Squoosh, mentre per i formati GIF ti consigliamo ezgif.

Ma andiamo per ordine e diamo un’occhiata alle potenzialità di questi due strumenti:

Squoosh.app è uno strumento molto potente, semplice e versatile per la compressione delle immagini e supporta, tra i tanti formati disponibili, anche il formato WebP.

Questo tool ci permette di gestire diverse opzioni di compressione, come ad esempio ridimensionamento, riduzione della palette colori, dithering e qualità dell’immagine.

Inoltre Squoosh ci consente di visualizzare l’immagine prima e dopo la compressione, oppure di confrontare fino a due tipi di compressione diversi con una visualizzazione affiancata che evidenzia in tempo reale sia la qualità complessiva dell’immagine che il relativo peso:

Se invece hai bisogno di convertire una GIF animata sfruttando i vantaggi del formato WebP, prova a dare un’occhiata a ezgif, un tool online gratuito e molto semplice che consente di comprimere diversi formati immagine.

Nel nostro caso ti sarà sufficiente caricare la GIF animata che desideri comprimere e avrai a disposizione diverse possibilità di modifica della GIF stessa tra cui velocità dell’animazione, ottimizzazione, effetti, overlay e molto altro, il tutto chiaramente mantenendo inalterati i frame di animazione che compongono la tua GIF animata, oltre che ovviamente, poterla successivamente salvare in formato WebP.

Come posso esportare immagini in formato WebP su Photoshop?

Adobe Photoshop, nella sua versione nativa, non offre la possibilità di comprimere e salvare immagini in formato WebP.

Per questo motivo, se si desidera esportare immagini in questo formato, si renderà necessaria l’installazione del plugin dedicato: WebPShop.

WebPShop è un modulo che può essere facilmente installato su Adobe Photoshop e che renderà possibile aprire e salvare immagini e animazioni in formato WebP sul tuo pc.

Questa soluzione è disponibile anche nelle linee guida developers di Google relative alle tecniche di ottimizzazione della velocità di caricamento dei contenuti grafici. Se desideri approfondire questo argomento, ti lascio di seguito il link alla fonte ufficiale: https://developers.google.com/speed/webp/docs/webpshop

I passaggi da seguire per procedere all’installazione per Windows saranno molto semplici:

1) Scarica il file “WebPShop.8bi” nella sua ultima versione rilasciata tramite questo link: https://github.com/webmproject/WebPShop/releases

2) Copia il file WebPShop.8bi nella cartella plugin di Adobe Photoshop, generalmente per le versioni di Windows x64 si trova in C:\Program Files\Adobe\Adobe Photoshop\Plug-ins

3) A questo punto sarà necessario riavviare Adobe Photoshop, semplicemente chiudendo e riaprendo il programma.

Adesso, potrai aprire le immagini in formato WebP come abitualmente fai per i già noti formati immagine, trascinando il file tramite drag&drop sull’area di lavoro di Photoshop oppure selezionandolo dal menù File > Apri.

Ma il vero vantaggio sarà avere la possibilità di comprimere e salvare qualsiasi immagine in formato WebP cliccando su File > Salva o Salva con nome: vedrai infatti, in fondo a tutte le estensioni disponibili, anche la possibilità di salvare le tue immagini in formato WebP.

Una volta scelto il percorso di salvataggio che preferisci comparirà un nuovo pannello di controllo, all’interno del quale potrai gestire diverse opzioni legate al formato immagine:

Una buona base di partenza per ottenere dei buoni risultati di compressione è quella di impostare una compressione più lenta selezionando l’opzione Slowest: questo ci aiuterà a risparmiare qualche byte in più in fase di compressione.

Impostando inoltre il parametro di qualità Lossy-Lossless dell’immagine su “80” raggiungerai il limite di compressione massimo in termini di rapporto qualità/peso del file.

Avremo infatti una perdita di qualità maggiore (Lossy) se impostiamo la compressione con un valore inferiore a 60, viceversa impostando la compressione con un valore maggiore a 80 avremo maggiore qualità ma meno compressione (Lossless).

Potrai inoltre scegliere se mantenere i metadati EXIF e/o XMP contenuti nell’immagine o se includerli nel file che andrai a salvare. Ovviamente queste informazioni faranno aumentare il peso dell’immagine WebP salvata.

Prima di procedere al salvataggio dell’immagine, cliccando su Preview avremo la possibilità non solo di vedere un’anteprima della qualità finale del nostro output, ma anche quali saranno le dimensioni dell’immagine una volta salvata.

Al seguente link puoi trovare le istruzioni di installazione del plugin anche per la versione Mac di Photoshop:
https://github.com/webmproject/WebPShop#installation

Risoluzione dei problemi durante l’installazione del plugin WebPShop in Adobe Photoshop

Se dovessi riscontrare degli errori, ad esempio il plugin non viene rilevato e non riesci a visualizzare il formato nella lista formati, ti lascio di seguito una lista di possibili soluzioni:

• Aggiorna Photoshop all’ultima versione disponibile su Creative Cloud
• Verifica che il plugin sia compatibile con il tuo sistema operativo e la sua architettura tramite le linee guida ufficiali contenute nel file archivio che hai scaricato
• Verifica che il plugin sia presente nel menu Help > About Plug-in
• Se il plugin non viene ancora rilevato da Photoshop, prova a disabilitare eventuali software antivirus che potrebbero impedirne il corretto funzionamento.
• Se anche con questi step non riesci ad installare il plugin, prova a spostare il file “WebPShop.8bi” all’interno di una di queste cartelle di Windows:
  C:\Program Files\Common Files\Adobe\Plug-Ins\CC
  C:\Program Files\Common Files\Adobe\Plug-Ins\CC\File Formats
  C:\Program Files\Adobe\Adobe Photoshop 2021\Plug-insProva inoltre a rimuovere eventuali altri plugin installati dalle cartelle indicate e lascia attivo solo questo plugin per escludere anche eventuali incompatibilità con altri plugin.
• Ricorda in ognuna di queste verifiche di riavviare Photoshop per fare in modo che all’avvio carichi correttamente il plugin.
• Se riscontri ancora problemi, prova a verificare eventuali segnalazioni di bug su questo link (in inglese): https://github.com/webmproject/WebPShop/issues

Quali sono le limitazioni nell’utilizzo del formato WebP?

La prima limitazione è rappresentata dalla lingua, infatti il plugin per Adobe Photoshop è attualmente disponibile solo in inglese. Considerata la semplicità di questo strumento però, non dovrebbe essere un grande problema superare questa limitazione.

Inoltre attualmente viene supportata solo la compressione RGB a 8 bit e le immagini non possono superare il formato 16383 x 16383 pixel, anche in questo caso non un gran problema visto che siamo ampiamente oltre gli scopi di utilizzo web.

Ricorda sempre che l’installazione di questo plugin non consente di salvare immagini WebP tramite il pannello Salva per web, ma solo attraverso il classico Salva con nome.

Per quanto riguarda invece l’utilizzo del formato WebP nel web, bisogna precisare che al momento l’unico browser che non supporta WebP al 100% è Safari, nelle versioni precedenti a macOS 11 Big Sur (fonte: caniuse).
Se vuoi approfondire questo aspetto e scoprire come puoi ovviare a questo problema, leggi il nostro articolo dedicato all’utilizzo di WebP in WordPress dove spieghiamo come gestire l’erogazione dei contenuti in maniera dinamica.