Pillow: ottimizzare le immagini con Python

Ottimizzare le immagini è fondamentale per rendere più veloce i siti web e migliorare il SEO. Con l'avvento del formato WebP è possibile fornire immagini di qualità ma molto più "leggere". In questo articolo scopriamo come trasformare immagini jpg e/o png nel formato webp mediante poche linee di codice scritte in Python e la libreria Pillow.

Share

Reading time: 4 minutes

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.

Letture consigliate

More To Explore

Python

OpenCV e Streamlit: creare un’app di photo editing

Manipolare le immagini è un task che è molto utile in diversi campi applicativi. OpenCV, una libreria Python, permette facilmente di modificare le immagini a seconda delle nostre esigenze. In questo tutorial scopriamo come costruire una semplice web app mediante Streamlit per applicare alcuni effetti alle nostre foto.

Python

Streamlit: come migliorare l’esperienza utente di una web app

Con Streamlit è possibile creare dashboard interattive in pochissimo tempo. L’interfaccia utente deve però essere intuitiva, semplice da usare ed efficace. In questo tutorial scopriremo come migliorare una web app con poche e semplici trucchi.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Design with MongoDB

Design with MongoDB!!!

Buy the new book that will help you to use MongoDB correctly for your applications. Available now on Amazon!