Guida completa all'uso del formato di immagine WebP

WebP, o non ufficialmente pronunciato come weppy, è un formato di immagine introdotto da Google Developers circa 5 anni fa. se sei un web designer o uno sviluppatore che si sforza di ridurre e ottimizzare le dimensioni del tuo file immagine, ciò che WebP è in grado di mettere un sorriso sul tuo viso.

In breve, ecco alcune delle cose importanti che devi sapere su questo non-nuovo-ma-ancora-fresco formato di immagine:

• WebP va dall'estensione di .webp.
• WebP adotta compressione sia lossy che lossless.
• Le immagini lossy WebP sono potenzialmente 25-34% più piccolo di JPEG.
• Le immagini senza perdita di WebP sono potenzialmente 25% più piccolo rispetto al PNG.
• WebP supporta la trasparenza senza perdita di dati, ovvero PNG con canale alfa.
• WebP supporta l'animazione. Ad esempio GIF animate.

In poche parole, WebP è in grado di ridurre significativamente le dimensioni del file immagine JPEG, GIF, PNG. Ecco un aggiornamento su WebP da verificare prima di entrare nel divertimento.

Un esperimento

Le cose migliori delle affermazioni sul Web è che possiamo sempre eseguire esperimenti per verificare la veridicità e l'autenticità. Ecco alcuni esperimenti che ho fatto per scoprirlo quanto è piccola l'immagine che può potenzialmente ottenere dopo essere stati convertiti da vari formati di immagine (JPEG, PNG e GIF) in WebP.

1. JPEG - Immagine perdente

Ecco un'immagine JPEG casuale che ho preso da Pexels. File originale - 165KB. ↓

L'immagine è ottimizzata con JpegMini. Nuovo file - 101kb. ↓

Infine, la stessa immagine viene convertita in formato WebP. File finale - 70KB. ↓

In una nota a margine: Ecco i diversi filesize se la stessa immagine è stata convertita nei seguenti formati:

• GIF - 285KB
• PNG 8 - 241.2kb
• PNG 24 - 657.6kb

2. PNG - Immagine senza perdita di dati

Ora proviamo con PNG con trasparenza. (Fonte). File originale - 587KB. ↓

Ecco l'immagine ottimizzata con tinypng. Nuovo file - 278kb. ↓

E infine, l'immagine convertita in formato WebP. File finale - 112KB. ↓

3. GIF animata

Quando convertiti in WebP, un'immagine JPEG passava da 165kb a 70kb, mentre un'immagine PNG passava da 587kb a 112kb.

Vediamo come vanno le GIF animate:

• Dimensione file originale - 6.8mb
• Dimensione file WebP: 6.3mb

Sommario:

Ecco una tabella per riepilogare l'intero esperimento:

	Lossy (JPG)	Lossless (PNG)	Animated GIF-
Originale	165KB	587KB	6.8MB
Ottimizzato con strumenti	101kb	278kb	-
Formato WebP	70KB	112KB	6.3MB

Senza soffermarsi molto sui calcoli matematici, quelle cifre indicano una sostanziale riduzione delle dimensioni dei file e, a giudicare dalle immagini, non si può veramente capire la differenza in termini di chiarezza e risoluzione. Dimensioni di file più piccole e leggere con lo stesso livello di qualità dell'immagine, WebP è sicuramente la pena di essere esaminata.

Conversione in WebP con strumenti

Se sei già a bordo e vorresti iniziare a pubblicare le immagini in formato WebP, immergiti e guarda come puoi convertire facilmente le tue immagini in questo formato. Tutti i metodi menzionati di seguito variano in termini di controlli, facilità d'uso e convenienza. Scegli il tuo veleno.

WebPonize per Mac

WebPonize è probabilmente il modo più semplice e veloce per convertire le immagini in formato WebP su Mac. Tutto quello che devi fare è semplicemente trascinare e rilasciare le tue immagini in WebPonize e farà la conversione. Riceverai l'uscita, la dimensione precedente, la dimensione successiva e la percentuale di riduzione del file originale. [Scarica WebPonize]

Webpconv per finestre

Se stai usando Windows, Webpconv è l'app che dovresti installare. Inoltre è disponibile in versione portatile in modo da poterlo eseguire in modo indipendente sul tuo flash drive. [Scarica Webconv]

Conversione con righe di comando

Se ti senti geek, probabilmente vorrai escludere la conversione usando le righe di comando. cwebp converte le tue immagini JPEG, PNG o TIFF in formato WebP e dwebp li converte in formato PNG. Vediamo come funziona.

Nota: La seguente guida per Mac OS X. Per utenti Windows e Linux, clicca qui.

Configurazione di MacPorts su Mac OSX

Per prima cosa, assicurati di aver installato Xcode, quindi segui questi passaggi:

1. Scarica e installa MacPorts. Se MacPorts è già installato sul tuo Mac, vai al passaggio 2.
2. Lanciare terminale.
3. Genere "sudo port selfupdate"e premi invio. Questo aggiornerà i tuoi MacPort all'ultima versione.

   

4. Quindi, digita "sudo port installa webp"e premi invio. Questo verrà installato libwebp (Libreria WebP).

   

Questo è tutto. Ora diamo un'occhiata a come convertire le immagini in WebP utilizzando la riga di comando.

Comandi per convertire / ripristinare

Ecco i comandi per:

I - Convertire i file di immagine JPEG / PNG nel formato WebP

Formato: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

Esempio:

cwebp -q 80 esempio.png -o esempio.webp 

II - I file di immagine WebP nascosti tornano in PNG

Formato: dwebp [WebP_filename] -o [PNG_filename]

Esempio:

dwebp image.webp -o image.png 

Di Più: Se si effettua la conversione di conversioni con altri mezzi, ecco le istruzioni per l'uso delle attività di Grunt e Gulp per convertire i file JPG / PNG in WebP.

Converti con strumenti online

Se non stai cercando di installare alcuna applicazione sul tuo sistema operativo per svolgere questa attività, opta per questi strumenti online. Ecco alcuni che ho imparato a conoscere:

• Online-converter.com
• Webp-convertor.com
• Zamzar

Mancia: Se tu google convertire webp online , probabilmente troverai più opzioni.

Photoshop Plugin

Potresti essere contento di sapere che esiste anche un plug-in Photoshop che ti consente di salvare le immagini in formato WebP tramite Photoshop. Questo plugin supporta Mac OS X (CS 2- CS 6) e Windows (32 bit e 64 bit). [Scarica il plugin qui.]

Nota: Ho pensato che dovresti sapere che l'ho provato su Photoshop CC. Non ha funzionato lì.

Supporto per browser WebP

Infine, parliamo di compatibilità. Attualmente, è possibile visualizzare le immagini in formato WebP sui seguenti browser (ref):

• Chrome / Chrome per iOS
• Opera / Opera Mini

Non tanto fortuna per FireFox e Safari, che ancora non supporta il formato WebP in modo nativo. Tuttavia, è possibile utilizzare la libreria Javascript di WebPJS su convertire le immagini WebP nella stringa dataURI sul sito del cliente.

Tornare ad altri formati di immagine

È sempre consigliabile utilizzare un fallback per evitare di mostrare errori di immagine dovuti a browser non supportati. In questo caso, il fallback sarà sull'immagine in formato JPG o PNG. Ecco come lo fai.

  source srcset = "example.webp 1x" type = "image / webp">   

Per questo codice, images / completo-guide-to-con-WebP-image-format_13.jpg verrà caricato se l'utente ha utilizzato Firefox o Safari.

Anteprima delle immagini WebP

Puoi vedere in anteprima le immagini WebP su brower Chrome e Opera. Ma se vuoi farlo localmente sulla tua macchina, avrai bisogno di alcuni strumenti.

Gli utenti Mac possono utilizzare WebPQuickLook per visualizzare in anteprima le immagini in formato WebP utilizzando la funzione Quick Look (con l'immagine selezionata o evidenziata, premere la barra spaziatrice).

Per gli utenti Windows, WebPCodec visualizzerà un'anteprima in miniatura delle immagini WebP in Esplora file. Verranno visualizzati sia gli equivalenti WebP che JPEG. Su alcuni Window OS supportati (Vista, 7, 8), l'immagine WebP può essere visualizzata anche sul Visualizzatore foto di Windows.

Di Più: ReSCR.it consegna automaticamente le immagini in formato WeBP ed è disponibile se archivi le tue immagini con MaxCDN. (Leggi di più)

Ulteriori riferimenti

• Conversione di GIF animate in WebP
• Come funziona WebP
• Distribuzione di WebP tramite Accept Content Negotiation
• Web più veloce, più piccolo e più bello con WebP
• Distribuzione di nuovi formati di immagine sul Web
• Documentazione API WebP