Ad oggi la velocità di caricamento di un sito web sui dispositivi mobili è diventata un importante fattore di ranking su Google che adotta l’approccio mobile-first per il SEO. Dal momento che i dispositivi mobili non hanno la stessa potenza di elaborazione dei computer, diventa molto importante ottimizzare tutti gli elementi “pesanti” in termini di banda, quali le immagini, per aumentare la velocità di caricamento delle pagine. Una maggiore velocità di caricamento sui dispositivi mobili implica un migliore posizionamento del sito web nelle ricerche di Google. Ovviamente non è l’unico fattore che influisce sul SEO, ma è un aspetto da considerare quando si progetta e sviluppa un sito web.
Alcuni studi dimostrano che un sito molto lento nel caricamento delle pagine implica un minor coinvolgimento degli utenti. Ciò significa che l’utente medio sarà demotivato nel navigare il sito e, nel caso di e-commerce, comprare i prodotti e/o i servizi offerti. Le immagini di solito sono una delle fonti principali del rallentamento del caricamento delle pagine.
Grazie ai progressi nella compressione delle immagini, oggi è possibile usare diversi formati che riducono la “pesantezza” del file mantenendo una qualità elevata. Tra questi il formato più diffuso negli ultimi anni è il WebP.
WebP è un formato immagine moderno che fornisce una compressione lossless e lossy superiore per le immagini sul web. Usando WebP, si possono creare immagini più piccole e più ricche che rendono il sito che le ingloba più veloce.
Mediamente, le immagini lossless in formato WebP sono circa il 26% più piccole in termini di dimensioni rispetto al formato PNG. Le immagini WebP lossy sono, invece, più piccole in media del 25-34% rispetto alle immagini JPEG comparabili con un indice di qualità SSIM equivalente.
WebP lossless supporta la trasparenza (conosciuta anche come canale alfa) al costo di solo il 22% di byte in più. Per i casi in cui la compressione RGB lossy è accettabile, anche WebP lossy supporta la trasparenza, fornendo tipicamente dimensioni di file 3× più piccole rispetto a PNG.
In questo articolo vedremo come convertire delle immagini in formato PNG o JPG nel formato WEBP mediante la libreria Pillow di Python.
Compressione mediante Pillow
Prima di procedere con il ridimensionamento delle immagini, è necessario installare la libreria Pillow nel vostro ambiente di sviluppo. Il metodo più veloce è usare il seguente comando:
pip install pillow Una volta che la libreria è installata potete includerla nel vostro codice mediante la riga di codice
import PIL Nel codice seguente è riportato un esempio di funzione che permette di comprimere tutte le immagini contenute in una directory e salvarle nel formato WEBP in un path specifico. Potete utilizzare questo esempio come base di partenza da includere nelle vostre applicazioni e/o siti web che necessitano di un’ottimizzazione delle immagini.
Le variabili da cambiare sono sicuramente path, export_path, mentre potete usare la stessa struttura di codice per convertire le vostre immagini in differenti formati.
import PIL
from PIL import Image
import os
path= '/source/'
export_path = '/dest/'
images = os.listdir(path)
def resize():
for image in images:
image_name = image.split('.', 1)[0]
fixed_height = 250
image = Image.open(path+image)
height_percent = (fixed_height / float(image.size[1]))
width_size = int( float(image.size[0]) * float(height_percent) )
image = image.resize((width_size, fixed_height), PIL.Image.NEAREST)
image.save(export_path+image_name+ '.webp', 'webp', optimize=True, quality=90)
resize() In questo esempio la compressione implica un ridimensionamento con un’altezza prefissata a 250 pixels dell’immagine finale mantenendo inalterate le proporzioni. Potete cambiare l’altezza vostro piacimento. Se avete bisogno che le immagini in uscita abbiano altezza e larghezza fisse, potete sostituire la seguente linea nel codice.
image = image.resize((width_size , fixed_height), PIL.Image.NEAREST) con il seguente codice:
width = 205
height = 250
image = image.resize((width , height)) Oppure se volete mantenere inalterate le dimensioni originali delle immagini è sufficiente rimuovere il comando resize.
Per darvi un’idea delle potenzialità della compressione ho eseguito degli esperimenti su una cartella contenente immagini in formato JPG e PNG. La dimensione originale era di 906 MB.
Applicando una compressione con un resize ad altezza fissa pari a 250 pixels e una qualità pari al 90% la dimensione della cartella in uscita è stata pari a 174 MB, ossia una riduzione di circa 80%.
Diversamente, applicando una dimensione fissa sia per altezza e larghezza si è ottenuta una riduzione di quasi l’86%. Diversamente, mantenendo le dimensioni originali di ciascuna immagini la riduzione è stata solo del 3%. Potete comprendere, quindi, come le dimensioni delle immagini e la qualità influiscano sul fattore di compressione.
Studi
Uno studio presentato da Google ha comparato la compressione delle immagini WebP e JPEG basata sul nuovo encoder rilasciato in libwebp. Lo studio ha osservato che la dimensione media dei file WebP è inferiore del 25%-34% rispetto alla dimensione dei file JPEG a un indice SSIM equivalente. I grafici SSIM vs bpp hanno mostrato che WebP richiede costantemente meno bit per pixel rispetto a JPEG per lo stesso indice SSIM. Queste osservazioni indicano che WebP può fornire significativi miglioramenti di compressione rispetto a JPEG.
Un altro studio condotto molti anni prima aveva già evidenziato il potenziale del formato webp. Lo studio otteneva delle riduzioni che oscillavano da circa il 10% ad un massimo del 40%. I risultati, come mostrato nelle figura qui sotto riportata, mostravano che WebP raggiungeva una compressione migliore degli altri formati specialmente per le immagini più piccole.
