Ottimizziamo le immagini con Piuma

Naturalmente, sono tante le azioni volte a migliorare la velocità di un sito web, ma il ruolo delle immagini non è trascurabile. L’area Technology di Lotrèk ha sviluppato il tool open source Piuma, un microservizio scritto in Go che ottimizza le immagini “al volo”, ovvero semplicemente passando la url dell’immagine principale con dei parametri che indicano l’ottimizzazione desiderata, come le dimensioni e la qualità. L’utilizzo di un microservizio, invece di una libreria ad hoc per i linguaggi e i framework con i quali sviluppiamo, ci ha permesso di integrare questo sistema in maniera rapida e semplice anche su progetti legacy, in quanto non abbiamo avuto bisogno di installare librerie o tool aggiuntivi ma solo applicare una url diversa a tutte le immagini. 

Come funziona Piuma?

Prima di passare alla parte di installazione, vediamo come funziona Piuma. Il funzionamento di questo microservizio di ottimizzazione di immagini è molto semplice, una volta che avrete l’istanza Piuma deployata su un server, potete tranquillamente passargli la url della vostra immagine usando il seguente schema:

https://<yourpiumahost>/<options>/<image_url>

Dove il parametro options è composto da 3 parametri:

width_height_quality

Il parametro quality è un numero da 0 a 100 mentre i parametri width e height sono misure in pixel.

Ad esempio, per ricevere la tua immagine ridimensionata 100x100 basterà effettuare la seguente chiamata:

https://yourpiumahost/100_100/<image_url>

Ovviamente si può specificare anche soltanto l’altezza e la larghezza in modo da mantenere le proporzioni originali

https://yourpiumahost/100/<image_url>

Per maggiori informazioni su come utilizzare Piuma e per avere tutta la lista possibile di opzioni e formati supportati, potete fare riferimento alla documentazione ufficiale.

Come installare Piuma

Se volete provare Piuma e installarlo su un server o sulla macchina locale è necessario avere una versione di Docker funzionante nella macchina. Potete trovare il codice del microservizio Piuma su Github a questo link.

Una volta installato docker sulla macchina per scaricare e avviare Piuma basterà eseguire il seguente comando da terminale:

docker run -d -p 8080:8080 --name piuma --restart unless-stopped -v $PWD/piumadata:/data piumaio/piuma -mediapath /data

Questo comando avvierà piuma sulla porta 8080 del proprio server e userà la cartella corrente (appunto $PWD) come storage per i file immagine ottimizzati (dentro la cartella “piumadata”). Questo storage sarà utilizzato anche come cache per velocizzare le richieste future della stessa immagine. La directory in cui verrà lanciato il comando visto precedentemente sarà usata dal servizio per salvare le immagini ottimizzate, dunque sarà opportuno prima di avviare il comando creare una directory dedicata al salvataggio di tali immagini e lanciare il comando li dentro.

Dato che il servizio piuma si metterà in ascolto sulla porta 8080 sarà opportuno definire una regola sul web server installato sulla macchina (apache/nginx/...) che redirezioni il traffico di una particolare url a vostra scelta sulla porta 8080.

Se utilizzate NGINX come proxy, potete trovare una configurazione di esempio qui.

Integrare Piuma nel proprio progetto

Come avete letto da questo articolo, configurare e utilizzare Piuma è veramente molto semplice. Per comodità abbiamo comunque scritto alcune librerie che ci vengono in aiuto durante lo sviluppo, come librerie per VueJS (framework che abbiamo già approfondito relativamente alla tecnica del “transparent wrapping”), Django ed un plugin Wordpress. Potete trovare tutti questi software all’interno dell’organizzazione Piuma su GitHub dove potete seguire lo sviluppo e contribuire.