Ottimizza le immagini con Thumbor

Il pollice può essere utilizzato senza costi per ridimensionare, comprimere e trasformare le immagini on demand.

Katie Hempenius
Katie Hempenius
X

Thumbor è una rete CDN di immagini open source senza costi che semplifica la compressione, il ridimensionamento e la trasformazione delle immagini. Questo post ti consente di provare in prima persona Thumbor senza dover installare nulla. Abbiamo configurato un server Thumbor sandbox che potrai provare su http://34.67.235.246:8888. L'immagine che stai per sperimentare è disponibile all'indirizzo http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

Prerequisiti

Questo post presuppone che tu comprenda come le reti CDN di immagini possono migliorare le prestazioni di caricamento. In caso contrario, consulta Utilizzare reti CDN immagine per ottimizzare le immagini. Inoltre, si presume che tu abbia già creato siti web di base.

Formato URL miniatura

Come menzionato in Utilizza CDN di immagini per ottimizzare le immagini, ogni CDN immagine utilizza un formato URL leggermente diverso per le immagini. La figura 1 rappresenta il formato di Mi piace.

Un URL dell'icona a forma di pollice contiene i seguenti componenti: origine, token di sicurezza, dimensioni, filtri e immagine.
Formato URL del pollice

Origin

Come tutte le origini, l'origine di un URL Thumbor è composta da tre parti: uno schema (che è quasi sempre http o https), un host e una porta. In questo esempio, l'host viene identificato mediante un indirizzo IP, ma se utilizzi un server DNS potrebbe essere simile a thumbor-server.my-site.com. Per impostazione predefinita, Thumbor utilizza la porta 8888 per pubblicare le immagini.

Token di sicurezza

La parte unsafe dell'URL indica che stai utilizzando il pollice senza un token di sicurezza. Un token di sicurezza impedisce a un utente di apportare modifiche non autorizzate agli URL delle immagini. Modificando l'URL dell'immagine, l'utente potrebbe utilizzare il tuo server (e la fattura dell'hosting) per ridimensionare le immagini o, più malevolmente, sovraccaricare il server. In questa guida non parleremo della configurazione della funzionalità del token di sicurezza del pollice.

Dimensioni

Questa parte dell'URL specifica la dimensione desiderata dell'immagine di output. Questo attributo può essere omesso se non vuoi modificare le dimensioni dell'immagine. Thumbor utilizzerà diversi approcci, come il ritaglio o il ridimensionamento, per ottenere le dimensioni desiderate in base agli altri parametri URL. La prossima sezione di questo post spiega come ridimensionare le immagini in modo più dettagliato.

Prova subito:

  1. Fai clic sul seguente URL per visualizzare l'immagine pubblicata nelle sue dimensioni originali in una nuova scheda: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg

    Immagine nelle dimensioni originali
    Immagine originale

  2. Ridimensiona l'immagine a 100x100 pixel: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

Immagine a 100 x 100 pixel
Immagine ridimensionata a 100 x 100 pixel

Filtri

I filtri trasformano un'immagine. La parte relativa ai filtri nel segmento dell'URL inizia con filters:, seguito da un elenco di filtri separati da due punti. Questa opzione può essere omessa se non utilizzi alcun filtro. La sintassi per i singoli filtri è simile a una chiamata di funzione (ad esempio grayscale()) contenente zero o più argomenti.

Prova subito:

  1. Applica un singolo filtro: un effetto sfocatura gaussiana con un raggio di 25 pixel: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg

    Immagine sfocata
    Immagine sfocata

  2. Applica più filtri. Converti in scala di grigi e ruota l'immagine di 90 gradi: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

Immagine in scala di grigi ruotata di 90 gradi
Immagine ruotata in scala di grigi

Trasformazione delle immagini

Questa sezione si concentra sulle funzionalità Thumbor più pertinenti per il rendimento: compressione, ridimensionamento e conversione tra formati file.

Compressione

Il filtro Qualità comprime le immagini JPEG al livello di qualità desiderato (da 1 a 100). Se non viene fornito alcun livello qualitativo, il pollice comprime l'immagine a un livello qualitativo pari a 80. Questo è un buon valore predefinito: i livelli di qualità 80-85 in genere hanno un effetto scarso sulla qualità dell'immagine, ma in genere riducono la dimensione dell'immagine del 30-40%.

Prova subito:

  1. Comprimi l'immagine in modo che abbia una qualità pari a 1 (pessima): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

    Immagine di bassa qualità
    Immagini di bassa qualità

  2. Comprimi l'immagine utilizzando le impostazioni di compressione predefinite di Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

Immagine compressa senza problemi di qualità evidenti
Immagine compressa

Ridimensionamento

Per ridimensionare un'immagine mantenendo le proporzioni originali, utilizza il formato $WIDTHx0 o 0x$HEIGHT all'interno della porzione size della stringa URL.

Prova subito:

  1. Ridimensiona l'immagine a una larghezza di 200 pixel mantenendo le proporzioni originali: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

    Immagine larga 200 pixel
    Immagine ridimensionata a 200 pixel di larghezza

  2. Ridimensiona l'immagine a un'altezza di 500 pixel mantenendo le proporzioni originali: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

Immagine di 500 pixel di altezza
Immagine ridimensionata a un'altezza di 500 pixel

Puoi anche ridimensionare le immagini su una percentuale dell'originale utilizzando il filtro proporzione. Se viene specificata la dimensione insieme al filtro di proporzione, l'immagine verrà ridimensionata e verrà applicato il filtro di proporzione.

Prova subito:

  1. Ridimensiona l'immagine con il 50% dell'immagine originale: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    Le dimensioni dell'immagine corrispondono al 50% dell'originale
    Immagine ridimensionata al 50% delle dimensioni dell'originale

  2. Ridimensiona l'immagine a una larghezza di 1000 pixel, quindi ridimensiona l'immagine al 10% delle dimensioni attuali: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg

Immagine di 100 pixel di larghezza
Immagine ridimensionata a 100 pixel di larghezza

Questi metodi sono solo alcune delle tante opzioni di ritaglio e ridimensionamento di Thumbor. Per scoprire di più sulle altre opzioni, dai un'occhiata all'articolo Utilizzo.

Formati file

Il filtro Formato converte le immagini in jpeg, webp, gif o png. Tieni presente che se ottimizzi le prestazioni, devi utilizzare JPEG o WebP poiché i file PNG e GIF tendono a essere molto più grandi e non si comprimono.

Prova subito:

  1. Converti l'immagine in WebP. Se apri il riquadro Network di DevTools, l'intestazione della risposta Content-Type del documento mostra che il server ha restituito un'immagine WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
Screenshot DevTools che mostra il tipo di contenuto (WebP) di un'immagine
L'intestazione della risposta content-type mostrata in DevTools

Passaggi successivi

Prova altri filtri e trasformazioni nell'immagine hero.jpg.

Se stai seguendo utilizzando la tua installazione di Thumbor, consulta l'appendice di seguito che spiega come e perché utilizzare il file thumbor.conf.

Appendice: thumbor.conf

Molte delle opzioni di configurazione descritte in questo post, insieme a molte altre, possono essere impostate come predefinite impostando e utilizzando un file di configurazione thumbor.conf. Le impostazioni nel file thumbor.conf verranno applicate a tutte le immagini, a meno che non vengano sostituite dai parametri della stringa URL.

  1. Esegui il comando thumbor-config per creare un nuovo file thumbor.conf.

    thumbor-config > ./thumbor.conf

  2. Apri il nuovo file thumbor.conf. Il comando thumbor-config ha generato un file che elenca e spiega tutte le opzioni di configurazione del pollice.

  3. Configura le impostazioni rimuovendo il commento dalle righe e modificando i valori predefiniti. Potrebbe essere utile configurare le seguenti impostazioni:

    • QUALITY
    • AUTO_WEBP
    • MAX_WIDTH e MAX_HEIGHT
    • ALLOW_ANIMATED_GIFS

  4. Esegui il pollice con il flag --conf per utilizzare le impostazioni di thumbor.conf.

    thumbor --conf /path/to/thumbor.conf