Il pollice può essere utilizzato senza costi per ridimensionare, comprimere e trasformare le immagini on demand.
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.
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:
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
Ridimensiona l'immagine a 100x100 pixel: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
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:
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
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
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:
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
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
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:
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
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
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:
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
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
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:
- 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
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.
Esegui il comando
thumbor-config
per creare un nuovo filethumbor.conf
.thumbor-config > ./thumbor.conf
Apri il nuovo file
thumbor.conf
. Il comandothumbor-config
ha generato un file che elenca e spiega tutte le opzioni di configurazione del pollice.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
eMAX_HEIGHT
ALLOW_ANIMATED_GIFS
Esegui il pollice con il flag
--conf
per utilizzare le impostazioni dithumbor.conf
.thumbor --conf /path/to/thumbor.conf