WebP è un formato di immagini sviluppato da Google circa 5 anni fa. Comunemente noto come weppy , questo formato è una vera e propria manna per web designer e sviluppatori che desiderano ridurre al minimo e ottimizzare le dimensioni delle immagini.
In questa guida spiegherò perché WebP potrebbe essere la soluzione che stavi cercando.
Caratteristiche principali delle immagini WebP
Ma prima, passiamo brevemente in rassegna alcune delle caratteristiche principali di WebP:
- Ha l'estensione .webp .
- Supporta sia tecniche di compressione con perdita di dati che senza perdita di dati.
- Le immagini in WebP con compressione con perdita di dati sono in genere più piccole del 25-34% rispetto alle loro controparti JPEG .
- Per una compressione senza perdita di dati, le immagini WebP possono essere più piccole del 25% rispetto alle immagini PNG .
- Supporta completamente la trasparenza senza perdita di dati, simile al PNG con un canale alfa.
- WebP supporta anche l'animazione, il che lo rende un potenziale sostituto delle GIF animate.
In sintesi, WebP offre una soluzione affidabile per ridurre le dimensioni delle immagini JPEG, GIF e PNG. Ora, approfondiamo come sfruttare al meglio questo formato.
WebP è più piccolo? Un esperimento con le immagini
Uno degli aspetti migliori delle affermazioni sul web è la loro verificabilità. Possiamo sempre effettuare esperimenti per valutarne la veridicità e l'autenticità. Ho condotto diversi test per determinare di quanto si potesse ridurre la dimensione di un'immagine convertendola da vari formati (JPEG, PNG e GIF) a WebP.
JPEG contro WebP
Ecco un'immagine JPEG presa da Pexels .
Dimensione file: 165 kb.
Questa è la stessa immagine dopo essere stata ottimizzata utilizzando JpegMini .
Dimensione file: 101 kb.
Ed ecco la stessa immagine, ottimizzata e poi convertita nel formato WebP.
Dimensione file: 70 kb.
Per riferimento, ecco le dimensioni dei file della stessa immagine convertita in altri formati:
- GIF: 285 kb
- PNG 8: 241,2 kb
- PNG 24: 657,6 kb
PNG contro WebP
Ecco un'immagine PNG con trasparenza. Fonte .
Dimensione file: 587 kb.
Ecco la stessa immagine PNG dopo essere stata ottimizzata con tinypng .
Dimensione file: 278 kb.
Ed ecco la stessa immagine dopo essere stata convertita nel formato WebP.
Dimensione file: 112 kb.
GIF contro WebP
Dopo la conversione in formato WebP, un'immagine JPEG si è ridotta da 165 kb a 70 kb, mentre un'immagine PNG è scesa da 587 kb a 112 kb. Per testare ulteriormente l'efficienza di WebP sulle GIF animate, si considerino i seguenti risultati:
Riepilogo
Di seguito è riportata una tabella riassuntiva dei risultati dell'esperimento:
Formato JPEG
PNG
GIF (Animato)
Originale
165 kb
587 kb
6,8 MB
Ottimizzato tramite strumenti
101 kb
278 kb
–
Convertito in WebP
70 kb
112 kb
6,3 MB
Senza addentrarci nei calcoli, i risultati mostrano una significativa riduzione delle dimensioni dei file.
Inoltre, la differenza in termini di nitidezza e risoluzione dell'immagine è pressoché nulla. Considerando le dimensioni ridotte dei file senza sacrificare la qualità, è evidente che WebP è un formato da prendere in considerazione.
Strumenti per convertire le immagini in WebP
Se sei convinto dei vantaggi di WebP e non vedi l'ora di adottare questo formato, esploriamo diversi strumenti per convertire le tue immagini. I metodi discussi variano in termini di controlli, facilità d'uso e praticità. Scegli quello più adatto alle tue esigenze.
WebPonize per Mac
WebPonize è probabilmente il metodo più semplice e veloce per convertire le immagini in formato WebP su Mac. Basta trascinare e rilasciare le immagini in WebPonize e la conversione verrà gestita automaticamente. L'applicazione fornisce dettagli come le dimensioni originali, le dimensioni convertite e la percentuale di riduzione.
Scarica WebPonize
Webpconv per Windows
Per gli utenti Windows, Webpconv è uno strumento indispensabile. È disponibile anche in versione portatile, che consente di eseguirlo direttamente da un'unità flash.
Scarica Webpconv
Conversione con righe di comando
Se hai una predilezione per la riga di comando e desideri un approccio più pratico, gli strumenti cwebp e dwebp potrebbero fare al caso tuo. Mentre cwebp converte le tue immagini JPEG, PNG o TIFF in formato WebP, dwebp le riconverte in PNG. Approfondiamo questo processo.
La seguente guida è per gli utenti Mac. Per gli utenti Windows e Linux, cliccare qui .
Leggi anche: Come salvare le immagini .WEBP come JPG e PNG
Passaggio 1: configurazione di MacPorts
Per prima cosa, assicurati che Xcode sia installato sul tuo computer. Una volta verificato, segui i passaggi seguenti:
- Per prima cosa, scarica e installa MacPorts . Se MacPorts è già installato sul tuo Mac, vai al passaggio successivo.
- Apri Terminale .
- Inserisci
sudo port selfupdatee premi Invio . Questa azione aggiornerà MacPorts alla sua versione più recente.
- Quindi, inserisci il comando
sudo port install webpe premi Invio . Questo passaggio installa libwebp , ovvero la libreria WebP .
Una volta completati questi passaggi, sei pronto per convertire le immagini in WebP utilizzando le istruzioni della riga di comando.
Passaggio 2: conversione e ripristino con righe di comando
Per convertire le immagini tramite riga di comando, segui i comandi seguenti:
Formato :
cwebp -q [image_quality] [JPEG/PNG_filename] -o [WebP_filename]
Esempio :
cwebp - q 80 esempio .png -o esempio .webp
Per ripristinare il formato originale delle immagini WebP, utilizzare il seguente comando:
Formato :
dwebp [WebP_filename] -o [PNG_filename]
Esempio :
dwebp immagine .webp -o immagine .png
Informazioni aggiuntive: se desideri metodi di conversione alternativi, ecco le istruzioni per utilizzare le attività Grunt e Gulp per convertire i file JPG/PNG nel formato WebP.
Conversione con strumenti online
Se preferisci non installare alcun software sul tuo computer, sono disponibili strumenti online per convertire le immagini in WebP. Ecco alcune opzioni popolari:
Nota: una rapida ricerca su Google per "convertire in WebP online" fornirà ancora più strumenti.
Convertire utilizzando un plugin di Photoshop
Per chi usa Photoshop, esiste un pratico plugin che semplifica il salvataggio delle immagini direttamente in formato WebP. Il plugin è compatibile con Mac e con le versioni di Windows a 32 e 64 bit.
Scarica il plugin
Supporto del browser di immagini WebP
Parlando di compatibilità, è importante sottolineare che le immagini in formato WebP possono essere visualizzate su alcuni browser. Ecco l'elenco attuale dei browser che supportano WebP ( fonte ):
- Chrome e Chrome per iOS
- Opera e Opera Mini
Purtroppo, browser come Firefox e Safari non supportano completamente il formato WebP in modo nativo. Tuttavia, è disponibile una soluzione alternativa tramite la libreria JavaScript WebPJS . Questa consente di convertire le immagini WebP in stringhe dataURI lato client.
Ripiego su altri formati (se WebP non è supportato)
Quando si forniscono immagini a una vasta gamma di utenti, è fondamentale fornire opzioni di fallback per i browser che potrebbero non supportare il formato WebP. L'approccio migliore è tornare ai formati tradizionali come JPG o PNG.
Ecco un metodo per implementarlo:
< picture >
< source srcset = "example.webp 1x" type = "image/webp" >
< img src = "example.jpg" alt = "Descrizione dell'immagine" >
</ picture >
Spiegazione:
Nel codice sopra, i browser come Firefox o Safari, che non supportano WebP, visualizzeranno invece l' immagine example.jpg .
Come visualizzare in anteprima le immagini WebP
Sebbene le immagini WebP siano facilmente visualizzabili sui browser Chrome e Opera, le anteprime locali potrebbero richiedere strumenti specializzati a seconda del sistema operativo in uso.
Per gli utenti Mac, WebPQuickLook offre la possibilità di visualizzare in anteprima le immagini WebP utilizzando la funzione Quick Look. È sufficiente selezionare o evidenziare l'immagine e premere la barra spaziatrice.
Gli utenti Windows possono utilizzare WebPCodec , che fornisce anteprime in miniatura delle immagini WebP all'interno di Esplora file. Lo strumento visualizza sia il formato WebP che la sua controparte JPEG.
Letture consigliate
Per chi volesse approfondire l'argomento WebP e le tecnologie ad esso associate, ecco una raccolta di risorse complete:
