Velocizza il tuo sito web con WebP

(Questo è un post sponsorizzato.) Trascorri abbastanza tempo a gestire siti Web tramite PageSpeed ​​Insights e noterai che Google ha un grosso problema con i formati di immagine tradizionali come JPG, PNG e persino GIF. Come dovrebbe.

Anche se ridimensioni le tue immagini in base alle specifiche esatte del tuo sito Web e le esegui tramite un compressore, possono comunque mettere a dura prova le prestazioni e aumentare l'utilizzo della larghezza di banda. Peggio ancora, tutta quella manipolazione dell'immagine può compromettere la qualità risultante.

Considerando quanto siano importanti le immagini per il web design, questo non è un elemento di cui possiamo disporre così facilmente né possiamo permetterci di tagliare gli angoli quando si tratta di ottimizzarle. Allora, qual è la soluzione?

Ecco cosa suggerisce Google:

Anni fa, Google mirava a porre fine a questo problema creando un formato immagine di nuova generazione chiamato WebP. In questo screenshot di PageSpeed ​​Insights puoi vedere che Google consiglia di utilizzare WebP e altri formati di nuova generazione per ridurre significativamente le dimensioni delle tue immagini preservandone la qualità.

E se 0,75 secondi non ti sembrano molto (almeno in questo esempio), potrebbero fare una grande differenza nella vita dei tuoi visitatori, le persone che stanno lì sedute a chiedersi quanto tempo sia troppo lungo per aspettare. Solo un secondo in meno di caricamento potrebbe fare una grande differenza per il tuo tasso di conversione.

Ma WebP è la soluzione migliore per questo problema? Oggi esamineremo:

• Che cos'è WebP,
• Quali sono i vantaggi di usarlo,
• Come funziona con browser e dispositivi,
• Quali sono le sfide della conversione e della fornitura di WebP e
• Come semplificare la conversione e la consegna con KeyCDN.

Che cos'è WebP?

Google ha sviluppato WebP nel 2010 dopo aver acquisito una società chiamata On2 Technologies. On2 aveva lavorato su una serie di tecnologie di compressione video, che hanno finito per servire come base per il nuovo formato audiovisivo di Google WebM e il formato di immagine di nuova generazione WebP.

In origine, WebP utilizzava la compressione con perdita di dati nel tentativo di creare immagini più piccole ma comunque di alta qualità per il Web.

Se 0,75 secondi non ti sembrano molto, potrebbero fare una grande differenza nella vita dei tuoi visitatori, le persone che siedono lì a chiedersi quanto tempo sia troppo lungo per aspettare.

“

Compressione con perdita per WebP

La compressione con perdita è una forma di compressione utilizzata per ridurre notevolmente le dimensioni dei file di JPG e GIF. Affinché ciò accada, tuttavia, alcuni dati (pixel) del file devono essere eliminati o "persi". Questo, a sua volta, porta a un degrado della qualità dell'immagine, sebbene non sia sempre evidente.

WebP è entrato in scena con un uso molto più efficiente della compressione con perdita (che spiegherò di seguito) ed è diventato il tanto necessario successore di JPG.

Puoi vedere una grande dimostrazione di questa differenza poiché KeyCDN confronta la differenza nelle dimensioni dei file di un JPG compresso rispetto a WebP:

Nota quanto sia significativa questa differenza in termini di dimensioni del file, anche dopo che il JPG è stato compresso a una qualità comparabile. Come spiega qui Adrian James, però, devi stare attento con la compressione WebP.

“Le impostazioni di compressione non corrispondono uno a uno con JPEG. Non aspettarti che un JPEG di qualità del 50% corrisponda a un WebP di qualità del 50%. La qualità scende in modo piuttosto netto sulla scala WebP, quindi inizia con una qualità elevata e scendi.

Considerando quante più dimensioni dei file si riducono con WebP rispetto a JPG, tuttavia, non dovrebbe essere un punto critico. È solo qualcosa a cui pensare se stai pensando di spingere ulteriormente i limiti di ciò che WebP può fare.

Ora, con il passare del tempo, Google ha continuato a sviluppare la tecnologia WebP, arrivando infine al punto in cui avrebbe supportato non solo la grafica Web a colori reali, ma anche metadati XMP, profili colore, affiancamento, animazione e trasparenza.

Alla fine, Google ha portato la compressione senza perdita di dati in WebP, trasformandolo in un valido contendente anche per PNG .

Compressione senza perdita di dati per WebP

La compressione senza perdita di dati non degrada la qualità dell'immagine come fa con perdita di dati. Al contrario, ottiene file di dimensioni inferiori rimuovendo i metadati in eccesso dal back-end del file. In questo modo, la qualità dell'immagine rimane intatta riducendone le dimensioni. Detto questo, la compressione senza perdita di dati non può raggiungere i tipi di dimensioni dei file che la compressione con perdita può fare.

Questo è stato fino a quando non è arrivata la compressione senza perdita di WebP.

Puoi vedere alcuni bellissimi esempi di come la compressione lossy e lossless di WebP si oppone a PNG nelle gallerie WebP di Google:

Se c'è un degrado nella qualità delle immagini WebP, sarà appena percettibile per i tuoi visitatori. L'unica cosa che noteranno davvero è la velocità di caricamento del tuo sito.

Quali sono i vantaggi dell'utilizzo di WebP?

Non basta dire che WebP è "migliore" di JPG e PNG. È importante comprendere i meccanismi di funzionamento di WebP e perché di conseguenza è così vantaggioso utilizzarlo su altri formati di file.

Con i formati immagine tradizionali, la compressione si traduce sempre in un compromesso.

La compressione con perdita di JPG porta al degrado della nitidezza e della finezza di un'immagine. Una volta applicato, non può essere annullato.

La compressione con perdita di dati WebP, d'altra parte, utilizza ciò che è noto come codifica di previsione per regolare in modo più accurato i pixel in un'immagine. Come spiega Google, ci sono anche altri fattori all'opera:

“Anche la quantizzazione adattiva a blocchi fa una grande differenza. Il filtraggio aiuta a bitrate medio/bassi. La codifica aritmetica booleana fornisce guadagni di compressione del 5%-10% rispetto alla codifica di Huffman.

In media, Google stima che la compressione con perdita di dati WebP si traduca in file tra il 25% e il 34% più piccoli dei JPG della stessa qualità.

Per quanto riguarda la compressione senza perdita di PNG, funziona bene nel mantenere la qualità di un'immagine, ma non ha un impatto così significativo sulle dimensioni dell'immagine come la sua controparte JPG. E certamente non rispetto a WebP.

WebP gestisce questo tipo di compressione in modo più efficiente ed efficace. Ciò è dovuto alla varietà di tecniche di compressione utilizzate e alla codifica entropica applicata alle immagini. Ancora una volta, Google spiega come funziona:

"Le trasformazioni applicate all'immagine includono la previsione spaziale dei pixel, la trasformazione dello spazio colore, l'utilizzo di tavolozze emergenti localmente, il confezionamento di più pixel in un pixel e la sostituzione dell'alfa".

In media, Google stima che la compressione senza perdita di dati WebP si traduca in file che sono circa il 26% più piccoli dei PNG della stessa qualità.

Non è tutto. WebP ha la capacità di fare qualcosa che nessun altro formato di file può fare. I progettisti possono utilizzare la codifica con perdita di dati WebP sui colori RGB e la codifica senza perdita di dati su immagini con sfondi trasparenti (canale alfa).

Anche le immagini animate, altrimenti servite in formato GIF, beneficiano dei sistemi di compressione WebP. Ci sono una serie di ragioni per questo:

Come risultato di questa potente combinazione di compressione lossless e lossy, i video animati possono scendere a dimensioni molto più piccole rispetto alle loro controparti GIF.

Google stima che la riduzione media sia circa il 64% della dimensione originale di una GIF quando si utilizza la compressione con perdita di dati e il 19% quando si utilizza la compressione senza perdita.

Inutile dire che non c'è niente che possa battere WebP quando si tratta di velocità mantenendo l'integrità dell'immagine.

“

Accettazione di WebP tra browser, dispositivi e CMS

Come puoi immaginare, quando WebP è stato rilasciato per la prima volta, era supportato solo dai browser e dai dispositivi di Google. Nel tempo, tuttavia, altre piattaforme hanno iniziato a fornire supporto per le immagini WebP.

Detto questo, WebP non ha ancora il supporto universale, il che può causare problemi ai web designer che utilizzano questo formato di immagine per impostazione predefinita.

Diamo un'occhiata a dove puoi aspettarti la piena accettazione delle tue immagini WebP, dove non lo farai e poi discuteremo cosa puoi fare per aggirare questo singhiozzo.

Al momento della stesura di questo articolo nel 2019, Posso usare... ha tenuto conto delle seguenti piattaforme che supportano WebP:

Sono supportate le ultime versioni delle seguenti piattaforme:

• Bordo
• Firefox
• Cromo
• musica lirica
• Opera Mini
• Browser Android
• Opera Mobile
• Chrome per Android
• Firefox per Android
• Browser UC per Android
• Samsung Internet
• Browser QQ
• Browser Baidu

Le piattaforme che continuano a frenare il supporto sono:

• Internet Explorer
• Safari
• iOS Safari
• Browser KaiOS

Non sono solo i browser ad essere indecisi riguardo a WebP. Lo sono anche i software di editing delle immagini e i sistemi di gestione dei contenuti.

ImageMagick, Pixelmator e GIMP supportano tutti WebP, ad esempio. Sketch consente agli utenti di esportare file come WebP. E per i software che non supportano nativamente WebP, come Photoshop, gli utenti di solito possono installare un plug-in che consentirà loro di aprire e salvare file come WebP.

I sistemi di gestione dei contenuti si trovano in una posizione simile. Alcuni hanno preso l'iniziativa nel trasferire i loro utenti su WebP, indipendentemente dal fatto che abbiano caricato i loro file in quel formato o meno. Shopify e Wix sono due costruttori di siti che convertono e pubblicano automaticamente immagini in formato WebP.

Sebbene esistano altre piattaforme che non supportano nativamente WebP, di solito ci sono estensioni o plug-in che puoi utilizzare per caricare immagini WebP o convertire quelle caricate in questo formato di nuova generazione.

WordPress è una di quelle piattaforme. Drupal è un altro popolare CMS che fornisce agli utenti moduli WebP che aggiungono il supporto WebP. Magento è ancora un altro.

È piuttosto raro non trovare una sorta di supporto aggiuntivo per WebP. L'unico esempio di cui sono a conoscenza che non lo accetta è Squarespace.

Sfide di conversione e fornitura di WebP

Ok, quindi WebP non ha il supporto al 100% sul Web. Non ancora comunque. Va bene. Per la maggior parte, abbiamo una sorta di soluzione alternativa in termini di aggiunta del supporto agli strumenti che utilizziamo per progettare e creare siti Web.

Ma cosa facciamo con il pezzo del browser? Se i nostri visitatori si presentano su un dispositivo iOS, come possiamo assicurarci che riceva ancora un'immagine se la nostra immagine predefinita è WebP?

Innanzitutto, devi sapere come convertire le immagini in WebP.

L'anno scorso, lo sviluppatore front-end Jeremy Wagner ha scritto una guida per Smashing Magazine proprio su questo argomento. In esso, spiega come convertire in WebP usando:

• Schizzo,
• Photoshop,
• La riga di comando,
• Bash,
• Node.js,
• sorso,
• Grugnito,
• pacchetto web.

Ognuna di queste opzioni ti aiuterà a convertire i tuoi PNG e JPG in WebP. Tuttavia, il tuo software di editing delle immagini ti porterà solo a metà strada verso la tua destinazione.

Gestirà la conversione, ma non ti aiuterà a modificare il tuo server di origine in modo che sappia quando fornire WebP e quando fornire un formato immagine tradizionale ai visitatori.

Alcuni di questi metodi ti consentono di determinare il modo in cui il tuo server fornisce le immagini in base alle restrizioni dei browser dei tuoi visitatori. Tuttavia, ci vuole un po' di lavoro per modificare i server di origine affinché ciò avvenga. Se non ti senti a tuo agio nel farlo o non vuoi affrontarlo, KeyCDN ha una soluzione.

La soluzione: semplificare la consegna WebP con KeyCDN

KeyCDN comprende quanto sia importante avere un sito Web che si carica a velocità fulminea. È ciò che KeyCDN è nel business da fare. Ecco perché non sorprende che abbia sviluppato una soluzione di memorizzazione nella cache WebP e di elaborazione delle immagini integrata che aiuta gli sviluppatori a fornire più facilmente i formati di file corretti ai visitatori.

Che cos'è la memorizzazione nella cache WebP?

La memorizzazione nella cache è parte integrante del funzionamento veloce di qualsiasi sito Web. E la memorizzazione nella cache WebP non farà che migliorare. In sostanza, è una forma di negoziazione del contenuto che avviene nell'intestazione HTTP.

Funziona così:

Qualcuno visita un sito Web in cui è abilitata la memorizzazione nella cache WebP di KeyCDN. Il browser del visitatore invia un'intestazione HTTP di accept come parte della richiesta al server con un elenco di tipi di risorse che preferisce. Ma invece di andare al server di origine (sull'host web), la richiesta viene elaborata dal server perimetrale (su KeyCDN). Il server perimetrale esamina l'elenco dei tipi di file accettabili e invia in risposta un'intestazione content-type .

Ecco un esempio di come potrebbe apparire:

 curl -I 'https://ip.keycdn.com/example.jpg' -H 'accept: image/webp' HTTP/2 200 server: keycdn-engine date: Thu, 06 Jun 2019 08:29:50 GMT content-type: image/webp content-length: 56734 last-modified: Tue, 14 May 2019 23:36:28 GMT etag: "5cdb50fc-1040a" expires: Thu, 13 Jun 2019 08:29:50 GMT cache-control: max-age=604800 x-ip: 1 x-ip-info: osz=56734 odim=700x467 ofmt=webp x-cache: HIT x-shield: active x-edge-location: chzh access-control-allow-origin: * accept-ranges: bytes

Un esempio di una richiesta di tipo di contenuto che KeyCDN invia ai browser che accettano WebP. (Fonte: KeyCDN)

Quindi, per i visitatori di Google Chrome, il content-type: image/webp verrebbe automaticamente accettato e le risorse WebP memorizzate nella cache verrebbero consegnate al browser.

Per gli utenti di Safari, invece, la richiesta non sarebbe accolta. Ma va bene. La tua CDN saprà invece quale formato di file inviare. Nella prima riga dell'esempio sopra, puoi vedere che il formato dell'immagine originale è JPG, quindi questa è la versione del file che verrebbe consegnata.

Come puoi vedere, non è necessario modificare il server di origine o preparare più versioni dei tuoi file per tenere conto della compatibilità WebP. La memorizzazione nella cache WebP di KeyCDN gestisce tutto.

Come si utilizza la memorizzazione nella cache WebP di KeyCDN?

Esistono due modi in cui gli utenti di KeyCDN possono sfruttare la funzione di memorizzazione nella cache WebP.

Elaborazione delle immagini tramite KeyCDN

Il primo non richiede altro che premere un interruttore e attivare l'elaborazione delle immagini di KeyCDN. Una volta abilitato, l'intestazione della richiesta di accept verrà caricata automaticamente.

Ovviamente puoi utilizzare il servizio di elaborazione delle immagini per qualcosa di più della semplice memorizzazione nella cache WebP. Puoi usarlo per regolare le dimensioni, il ritaglio, la rotazione, la sfocatura e altri attributi fisici delle immagini consegnate. Ma se stai cercando di semplificare il tuo sistema di consegna delle immagini e vuoi semplicemente velocizzare le cose con WebP, abilita la funzione e lascia che KeyCDN faccia il lavoro.

Memorizzazione nella cache WebP tramite il tuo server di origine

Supponiamo che tu abbia generato le tue risorse immagine WebP. Puoi ancora sfruttare i vantaggi della soluzione di memorizzazione nella cache WebP di KeyCDN.

Per fare ciò, dovrai generare correttamente i tuoi WebP. Ancora una volta, ecco un link alla guida che ti mostra come farlo.

Sta quindi a te configurare il tuo server di origine in modo che fornisca WebP solo quando accept: image/webp è presente. KeyCDN fornisce alcuni esempi di come lo farai con Nginx:

 # http config block map $http_accept $webp_ext { default ""; "~*webp" ".webp"; } # server config block location ~* ^(/path/to/your/images/.+)\.(png|jpg)$ { set $img_path $1; add_header Vary Accept; try_files $img_path$webp_ext $uri =404; }

KeyCDN mostra come modificare il server di origine con Nginx per fornire le proprie risorse WebP memorizzate nella cache. (Fonte: KeyCDN)

E con Apache:

 <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{DOCUMENT_ROOT}/$1.webp -f RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp

KeyCDN mostra come modificare il server di origine con Apache per fornire le proprie risorse WebP memorizzate nella cache. (Fonte: KeyCDN)

Ovviamente, questa opzione ti dà un maggiore controllo sulla gestione dei formati delle immagini e su come vengono serviti ai visitatori. Detto questo, se sei nuovo nell'utilizzo di WebP, la memorizzazione nella cache WebP automatizzata e l'elaborazione delle immagini di KeyCDN sono probabilmente la soluzione migliore.

Un'alternativa per i designer di WordPress e Magento

Se progetti siti Web in WordPress o Magento, KeyCDN ha plug-in che puoi utilizzare per aggiungere il supporto WebP e la memorizzazione nella cache.

Per WordPress, utilizzerai l'Enabler cache personalizzato di KeyCDN insieme a Optimus.

Cache Enabler controlla se le tue immagini hanno una versione WebP. Se esiste e il browser del visitatore lo supporta, è ciò che consegnerà nel file memorizzato nella cache. Se non esiste, passerà semplicemente al JPG, PNG o GIF che è lì.

Gli sviluppatori Magento hanno anche una soluzione semplificata per la conversione e la distribuzione di WebP. Innanzitutto, dovrai installare l'estensione Webp. Quindi, dovrai configurare i binari WebP sul tuo server.

Avvolgendo

C'è un motivo per cui Google si è preso la briga di sviluppare un nuovo formato di immagine e perché sempre più browser, sistemi di progettazione e sistemi di gestione dei contenuti lo supportano.

Le immagini possono causare molti problemi ai siti Web che altrimenti sarebbero stati costruiti per essere snelli e meschini. Se non sono caricate della giusta dimensione, se non sono compresse e se la memorizzazione nella cache non è abilitata, le tue immagini potrebbero essere la ragione per cui la velocità del tuo sito web sta allontanando i visitatori.

Ma con WebP, il tuo sito Web si caricherà sicuramente più rapidamente. Inoltre, non è necessario un compromesso tra la qualità dell'immagine (o la quantità!) Per ottenere quella velocità. WebP comprime in modo efficiente i file preservando l'integrità del contenuto dell'immagine.

Se stai davvero lottando per aumentare la velocità del tuo sito Web, WebP dovrebbe essere il prossimo strumento a cui ti rivolgi per chiedere aiuto.