Thumbor dapat digunakan secara bebas untuk mengubah ukuran, mengompresi, dan mentransformasi gambar sesuai permintaan.
Thumbor adalah CDN gambar open source gratis yang memudahkan kompresi, ukuran, dan transformasi gambar. Postingan ini memungkinkan Anda mencoba Thumbor secara langsung tanpa perlu menginstal apa pun. Kami telah menyiapkan server Thumbor sandbox untuk Anda coba di http://34.67.235.246:8888
. Gambar yang akan Anda coba tersedia di http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.
Prasyarat
Postingan ini mengasumsikan bahwa Anda memahami bagaimana CDN gambar dapat meningkatkan performa pemuatan. Jika tidak, lihat Menggunakan CDN gambar untuk mengoptimalkan gambar. Tutorial ini juga mengasumsikan bahwa Anda telah membuat {i>website<i} dasar sebelumnya.
Format URL Thumbor
Seperti yang disebutkan dalam Menggunakan CDN Gambar untuk Mengoptimalkan Gambar, setiap CDN gambar menggunakan format URL yang sedikit berbeda untuk gambar. Gambar 1 merepresentasikan format Thumbor.
Origin
Seperti semua origin, origin URL Thumbor terdiri dari tiga bagian: skema (yang hampir selalu http
atau https
), host, dan port. Dalam contoh ini, host diidentifikasi menggunakan alamat IP, tetapi jika Anda menggunakan server DNS, host mungkin terlihat seperti thumbor-server.my-site.com
. Secara default, Thumbor menggunakan port 8888
untuk menampilkan gambar.
Kunci Keamanan
Bagian unsafe
dari URL menunjukkan bahwa Anda menggunakan Thumbor tanpa kunci keamanan. Kunci keamanan mencegah pengguna membuat perubahan tanpa izin ke URL gambar Anda. Dengan mengubah URL gambar, pengguna dapat menggunakan server Anda (dan tagihan hosting Anda) untuk mengubah ukuran gambarnya, atau, yang lebih berbahaya, untuk membebani server Anda. Panduan ini tidak akan membahas penyiapan fitur kunci keamanan Thumbor.
Ukuran
Bagian URL ini menentukan ukuran gambar output yang diinginkan. Bagian ini dapat dihilangkan jika Anda tidak ingin mengubah ukuran gambar. Thumbor akan menggunakan pendekatan yang berbeda seperti pemangkasan atau penskalaan untuk mencapai ukuran yang diinginkan, bergantung pada parameter URL lainnya. Bagian selanjutnya dari postingan ini akan menjelaskan cara mengubah ukuran gambar secara lebih mendetail.
Coba sekarang:
Klik URL berikut untuk melihat gambar yang ditampilkan dengan ukuran aslinya di tab baru: http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg
Ubah ukuran gambar menjadi 100x100 piksel: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg
Filter
Filter mengubah gambar. Bagian filter dari segmen URL dimulai dengan filters:
, diikuti dengan daftar filter yang dipisahkan titik dua; ini dapat dihilangkan jika Anda tidak menggunakan filter apa pun. Sintaksis untuk filter individual menyerupai panggilan fungsi (misalnya grayscale()
) yang berisi nol argumen atau lebih.
Coba sekarang:
Terapkan satu filter: efek blur Gaussian dengan radius 25 piksel: http://34.67.235.246:8888/unsafe/filters:blur(25)/https://web.dev/backdrop-filter/hero.jpg
Terapkan beberapa filter. Konversikan ke grayscale dan putar gambar 90 derajat: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg
Mentransformasi Gambar
Bagian ini berfokus pada fungsi Thumbor yang paling relevan dengan performa: kompresi, pengubahan ukuran, dan konversi antarformat file.
Kompresi
Filter kualitas mengompresi gambar JPEG ke tingkat kualitas gambar yang diinginkan (1-100). Jika tidak ada tingkat kualitas yang diberikan, Thumbor mengompresi gambar ke tingkat kualitas 80. Ini adalah setelan default yang baik: tingkat kualitas 80-85 biasanya memiliki sedikit pengaruh yang signifikan terhadap kualitas gambar, tetapi biasanya mengurangi ukuran gambar sebesar 30-40%.
Coba sekarang:
Kompresi gambar ke kualitas 1 (sangat buruk): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg
Kompresi gambar menggunakan setelan kompresi default Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg
Pengubahan ukuran
Untuk mengubah ukuran gambar dengan tetap mempertahankan proporsi aslinya, gunakan format $WIDTHx0
atau 0x$HEIGHT
dalam bagian size
string URL.
Coba sekarang:
Ubah ukuran gambar menjadi lebar 200 piksel dengan tetap mempertahankan proporsi aslinya: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg
Ubah ukuran gambar ke tinggi 500 piksel dengan tetap mempertahankan proporsi aslinya: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg
Anda juga dapat mengubah ukuran gambar menjadi persentase dari aslinya menggunakan filter proporsi. Jika ukuran ditentukan bersama dengan filter proporsi, gambar akan diubah ukurannya, lalu filter proporsi akan diterapkan.
Coba sekarang:
Ubah ukuran gambar menjadi 50% ukuran asli: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg
Ubah ukuran gambar menjadi lebar 1000 piksel, lalu ubah ukuran gambar menjadi 10% dari ukurannya saat ini: http://34.67.235.246:8888/unsafe/1000x/filters:proportion(.1)/https://web.dev/backdrop-filter/hero.jpg
Metode ini hanyalah beberapa dari banyak opsi pemangkasan dan pengubahan ukuran yang dilakukan Thumbor. Untuk membaca opsi lainnya, lihat Penggunaan.
Format File
Filter format mengonversi gambar ke jpeg
, webp
, gif
, atau png
. Perlu diingat bahwa jika Anda mengoptimalkan performa, sebaiknya gunakan JPEG atau WebP karena file PNG dan GIF cenderung secara signifikan berukuran lebih besar dan juga tidak dikompresi.
Coba sekarang:
- Konversi gambar ke WebP. Jika Anda membuka panel Network di DevTools, header respons Content-Type pada dokumen menunjukkan bahwa server menampilkan gambar WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
Langkah Berikutnya
Coba filter dan transformasi lain pada gambar hero.jpg
.
Jika Anda telah mengikuti langkah menggunakan penginstalan Thumbor Anda sendiri, lihat lampiran di bawah yang menjelaskan cara dan alasan menggunakan file thumbor.conf
.
Lampiran: thumbor.conf
Banyak opsi konfigurasi yang dibahas dalam postingan ini, dan banyak opsi lainnya, dapat ditetapkan sebagai default dengan menyiapkan dan menggunakan file konfigurasi thumbor.conf
. Setelan dalam file thumbor.conf
akan diterapkan ke semua gambar kecuali jika diganti oleh parameter string URL.
Jalankan perintah
thumbor-config
untuk membuat filethumbor.conf
baru.thumbor-config > ./thumbor.conf
Buka file
thumbor.conf
baru. Perintahthumbor-config
menghasilkan file yang mencantumkan dan menjelaskan semua opsi konfigurasi Thumbor.Konfigurasikan setelan dengan menghapus tanda komentar pada baris dan mengubah nilai default. Sebaiknya tetapkan setelan berikut:
QUALITY
AUTO_WEBP
MAX_WIDTH
danMAX_HEIGHT
ALLOW_ANIMATED_GIFS
Jalankan Thumbor dengan flag
--conf
untuk menggunakan setelanthumbor.conf
.thumbor --conf /path/to/thumbor.conf