4 Luglio 2019

Diminuire il peso di un sito Web con l’utilizzo di immagini WebP

Quale formato di immagini utilizzare per un sito web ? Ecco la scelta migliore.

Webp WordPress Banner

Si dice che un’immagine vale mille parole, ma online, un’immagine può valere mille kilobyte o più!

L’archivio HTTP mostra che le immagini rappresentano in media il 64% della dimensione totale di una pagina Web. Con questo in mente, l’ottimizzazione delle immagini è fondamentale, soprattutto se si considera che fino al 40% degli utenti abbandona una richiesta se non viene caricata entro 3 secondi. Il problema dell’ottimizzazione delle immagini si pone quando i progettisti vogliono mantenere piccole dimensioni dei file immagine senza sacrificare la qualità dell’immagine. I tentativi del passato di creare nuovi tipi di file immagine ottimizzati meglio dei formati JPEG, PNG e GIF standard non hanno avuto successo.

WebP è un tipo di file immagine che è stato creato nel 2010 ed è attualmente in fase di sviluppo da parte di Google. Questo formato di immagine fornisce una compressione senza perdita e lossless alle immagini su Internet. Diversi grandi nomi stanno conducendo campagne per l’uso di WebP, in particolare Google, Facebook ed Ebay.

In Managedserver.it, stiamo sempre sperimentando tecniche che migliorano le prestazioni del sito web per i nostri clienti, quindi abbiamo fatto dei test A/B per capire l’impatto di WebP sulla qualità dell’immagine e come implementarla al meglio nei progetti dei nostri clienti.

Uno dei motivi principali per cui abbiamo preso in considerazione l’utilizzo di WebP è la dimensione ridotta dei file.

Secondo Google infatti :

  • I file immagine senza perdita di WebP sono il 26% più piccoli dei PNG.
  • I file di immagini lossy WebP sono più piccoli del 25-34% rispetto alle immagini JPEG con un indice SSIM equivalente.
  • WebP supporta la trasparenza lossless (nota anche come canale alfa) con appena il 22% di byte in più.

Attualmente insomma la più performante soluzione per le immagini sul Web come mostrato da questo grafico.

 

Supporto dei browser

L’attuale supporto del browser per WebP ha ancora una strada da percorrere. Caniuse.com mostra il supporto per Chrome e Opera con Firefox che annuncia che in futuro lavoreranno al supporto WebP, ma questa è una discussione in corso da tempo.

Proprio a rigor di ciò, fornire correttamente il giusto formato richiede competenza dal punto di vista dell’hosting in quanto deve essere in grado di determinare il browser del visitatore che sta navigando il sito e fornire condizionalmente il giusto formato immagine.

Qualora questo step non venisse eseguito correttamente infatti, il browser non riuscirebbe a caricare correttamente le immagini producendo un risultato di caricamento immagine e non mostrando l’immagine al visitatore finale.

Utilizzo di immagini WebP in WordPress

Per lavorare bene con le immagini WebP in WordPress la soluzione migliore e più facile è quella di lavorare utilizzando il plugin WebP Express.

WebP Express è un plugin gratuito che produce immagini di dimensioni inferiori alla metà di quelle JPEG. Indirizza JPEG e PNG a un convertitore di immagini da convertire o all’immagine già convertita. Funziona indipendentemente da come le immagini sono arrivate al server. Funziona con la mediateca, le gallerie e per le immagini tematiche a cui fanno riferimento i CSS.

Non funziona con il server Microsoft IIS, e non è stato testato con installazione multi-site ma funziona egregiamente con WebServer come Apache, LiteSpeed, NGINX aggiungendo le dovute regole di rewrite o a livello di .htaccess per Apache e LiteSpeed o nel file di configurazione di NGINX.

Richiede alcune impostazioni per i metodi di conversione, ma ne avete diverse tra cui scegliere. Le immagini utilizzeranno il metodo di conversione in cima per primo e, se questo non riesce, si muoverà lungo la lista fino a trovare un metodo che funziona con l’immagine. È possibile trascinarli nell’ordine in cui si desidera che vengano utilizzati.

Il plugin utilizza la libreria WebP Convert per convertire le immagini in webp.

WebP Convert è in grado di convertire le immagini utilizzando metodi multipli. Ci sono i metodi di conversione “locali”: cwebp, gd, imagick. Se nessuno di questi metodi funziona sul vostro host, ci sono le alternative cloud: ewwww (a pagamento) o la connessione a un sito WordPress dove avete installato WebP Express e avete abilitato la funzionalità “web service”.

Il plugin supporta diversi modi di consegnare i webp ai browser che lo supportano:

  • Instradando le immagini jpeg/png al corrispondente webp – o al convertitore di immagini se l’immagine non è stata ancora convertita.
  • Modificando l’HTML, sostituendo i tag immagine con tag immagine. Le pagine web mancanti sono generate automaticamente alla visita.
  • Modificando l’HTML, sostituendo gli URL delle immagini in modo che tutti i punti a webp. Le sostituzioni vengono fatte solo per i browser che supportano il webp. Ancora una volta, i webp mancanti sono generati automaticamente alla visita.
  • In combinazione con Cache Enabler, si può ottenere lo stesso risultato di cui sopra, ma con la cache delle pagine.
  • Si può anche fornire webp a tutti i browser e aggiungere il webpjs javascript, che fornisce supporto webp per i browser che non supportano il webp in modo nativo.

Alcuni limiti di WebP Express

 

Mass Bulk delle immagini

Uno dei “limiti” di WebP Express è quello di esser difficile da usare quando si ha a che fare con blog già avviati da molti anni che contengono centinaia di migliaia o milioni di immagini. Il processo di generazione Batch delle immagini non è infatti efficiente e essendo gestito lato browser non permette spesso una gestione efficiente della ricompressione di tutte le risorse senza un continuo riavvio manuale dell’operazione di ricompressione.

Questo processo viene chiamato in genere mass bulk e seppur presente attualmente sulla roadmap, attualmente non è presente nativamente.

Lazy Load non funzionante con alcuni plugin

Il modo più comune di lazy-loading è quello di impostare un attributo data-src sull’immagine e lasciare che javascript usi quel valore per impostare l’attributo src. Questo metodo funziona, poiché la richiesta di immagine, vista dal lato server, è indistinguibile da qualsiasi altra richiesta di immagine. Potrebbe comunque essere che qualche oscura implementazione di lazy load carichi l’immagine con una richiesta XHR. In questo caso, l’intestazione Accept non conterrà ‘image/webp’, ma ‘/’, e verrà servito un jpeg, anche se il browser supporta il webp.

I seguenti plugin e framework per il lazy load sono stati testati e funzionano con WebP Express:

Un caso reale di un sito di un’agenzia di fotografi

Per far comprendere meglio le possibilità e l’importanza del formato grafico webp abbiamo voluto dimostrarlo sul campo con l’ottimizzazione di un sito web di un’agenzia fotografica specializzata in matrimoni con un portfolio di oltre 70 Gigabyte di foto e immagini jpeg.

Essendo il loro lavoro fotografico eccezionale, la sola homepage aveva un peso di ben 90 MEGABYTE, e tramite l’utilizzo di webp siamo arrivati a “soli” 25 MEGABYTE con un risparmio di dati di oltre 3/4 del peso originale e una velocità di caricamento di circa il triplo.

Metti pure a tutto schermo il video di seguito per capire come si può risparmiare il 75% di peso delle immagini senza compromettere la qualità delle stesse.

Conclusione

Sembra non esserci dunque alcun motivo per non utilizzare WebP al giorno d’oggi, consci che avere un peso notevolmente ridotto di una pagina web e delle sue risorse multimediali possa solo portar giovamento su connessioni lente e dispositivi mobili.

 

Hai dei dubbi? Non sai da dove iniziare? Contattaci !

Abbiamo tutte le risposte alle tue domande per aiutarti nella giusta scelta.

Chatta con noi

Chatta direttamente con il nostro supporto prevendita.

0256569681

Contattaci telefonicamente negli orari d’ufficio 9:30 – 19:30

Contattaci online

Apri una richiesta direttamente nell’area dei contatti.

INFORMAZIONI

Managed Server S.r.l. è un player italiano di riferimento nel fornire soluzioni avanzate di sistemistica GNU/Linux orientate all’alta performance. Con un modello di sottoscrizione dai costi contenuti e prevedibili, ci assicuriamo che i nostri clienti abbiano accesso a tecnologie avanzate nel campo dell’hosting, server dedicati e servizi cloud. Oltre a questo, offriamo consulenza sistemistica su sistemi Linux e manutenzione specializzata in DBMS, IT Security, Cloud e molto altro. Ci distinguiamo per l’expertise in hosting di primari CMS Open Source come WordPress, WooCommerce, Drupal, Prestashop, Joomla, OpenCart e Magento, affiancato da un servizio di supporto e consulenza di alto livello adatto per la Pubblica Amministrazione, PMI, ed aziende di qualsiasi dimensione.

Red Hat, Inc. detiene i diritti su Red Hat®, RHEL®, RedHat Linux®, e CentOS®; AlmaLinux™ è un marchio di AlmaLinux OS Foundation; Rocky Linux® è un marchio registrato di Rocky Linux Foundation; SUSE® è un marchio registrato di SUSE LLC; Canonical Ltd. detiene i diritti su Ubuntu®; Software in the Public Interest, Inc. detiene i diritti su Debian®; Linus Torvalds detiene i diritti su Linux®; FreeBSD® è un marchio registrato di The FreeBSD Foundation; NetBSD® è un marchio registrato di The NetBSD Foundation; OpenBSD® è un marchio registrato di Theo de Raadt. Oracle Corporation detiene i diritti su Oracle®, MySQL®, e MyRocks®; Percona® è un marchio registrato di Percona LLC; MariaDB® è un marchio registrato di MariaDB Corporation Ab; REDIS® è un marchio registrato di Redis Labs Ltd. F5 Networks, Inc. detiene i diritti su NGINX® e NGINX Plus®; Varnish® è un marchio registrato di Varnish Software AB. Adobe Inc. detiene i diritti su Magento®; PrestaShop® è un marchio registrato di PrestaShop SA; OpenCart® è un marchio registrato di OpenCart Limited. Automattic Inc. detiene i diritti su WordPress®, WooCommerce®, e JetPack®; Open Source Matters, Inc. detiene i diritti su Joomla®; Dries Buytaert detiene i diritti su Drupal®. Amazon Web Services, Inc. detiene i diritti su AWS®; Google LLC detiene i diritti su Google Cloud™ e Chrome™; Microsoft Corporation detiene i diritti su Microsoft®, Azure®, e Internet Explorer®; Mozilla Foundation detiene i diritti su Firefox®. Apache® è un marchio registrato di The Apache Software Foundation; PHP® è un marchio registrato del PHP Group. CloudFlare® è un marchio registrato di Cloudflare, Inc.; NETSCOUT® è un marchio registrato di NETSCOUT Systems Inc.; ElasticSearch®, LogStash®, e Kibana® sono marchi registrati di Elastic N.V. Hetzner Online GmbH detiene i diritti su Hetzner®; OVHcloud è un marchio registrato di OVH Groupe SAS; cPanel®, L.L.C. detiene i diritti su cPanel®; Plesk® è un marchio registrato di Plesk International GmbH; Facebook, Inc. detiene i diritti su Facebook®. Questo sito non è affiliato, sponsorizzato o altrimenti associato a nessuna delle entità sopra menzionate e non rappresenta nessuna di queste entità in alcun modo. Tutti i diritti sui marchi e sui nomi di prodotto menzionati sono di proprietà dei rispettivi detentori di copyright. Ogni altro marchio citato appartiene ai propri registranti. MANAGED SERVER® è un marchio registrato a livello europeo da MANAGED SERVER SRL, Via Enzo Ferrari, 9, 62012 Civitanova Marche (MC), Italia.

SOLO UN ATTIMO !

Vorresti vedere come gira il tuo WooCommerce sui nostri sistemi senza dover migrare nulla ? 

Inserisci l'indirizzo del tuo sito WooCommerce e otterrai una dimostrazione navigabile, senza dover fare assolutamente nulla e completamente gratis.

No grazie, i miei clienti preferiscono il sito lento.
Torna in alto