Mengoptimalkan gambar dengan Thumbor

Thumbor dapat digunakan secara gratis untuk mengubah ukuran, mengompresi, dan mengubah gambar sesuai permintaan.

Katie Hempenius
Katie Hempenius
X

Thumbor adalah CDN gambar open source gratis yang memudahkan untuk mengompresi, mengubah ukuran, dan mengubah gambar. Postingan ini memungkinkan Anda mencoba Thumbor secara langsung tanpa perlu menginstal apa pun. Kami telah menyiapkan server Thumbor sandbox yang dapat Anda coba di http://34.67.235.246:8888. Gambar yang akan Anda gunakan untuk eksperimen tersedia di http://34.67.235.246:8888/unsafe/https://web.dev/backdrop-filter/hero.jpg.

Prasyarat

Postingan ini mengasumsikan bahwa Anda memahami cara CDN gambar dapat meningkatkan performa pemuatan. Jika tidak, baca artikel Menggunakan CDN gambar untuk mengoptimalkan gambar. Anda juga dianggap telah membuat situs 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.

URL Thumbor memiliki komponen berikut: origin, kunci keamanan, ukuran, filter, dan gambar.
Format URL Thumbor

Asal

Seperti semua origin, asal URL Thumbor terdiri dari tiga bagian: skema (yang hampir selalu berupa http atau https), host, dan port. Dalam contoh ini, host diidentifikasi menggunakan alamat IP, tetapi jika Anda menggunakan server DNS, host tersebut mungkin terlihat seperti thumbor-server.my-site.com. Secara default, Thumbor menggunakan port 8888 untuk menayangkan gambar.

Kunci Keamanan

Bagian unsafe URL menunjukkan bahwa Anda menggunakan Thumbor tanpa kunci keamanan. Kunci keamanan mencegah pengguna melakukan perubahan tidak sah pada URL gambar Anda. Dengan mengubah URL gambar, pengguna dapat menggunakan server Anda (dan tagihan hosting Anda) untuk mengubah ukuran gambar mereka, 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. Kolom 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 berikutnya dari postingan ini menjelaskan cara mengubah ukuran gambar secara lebih mendetail.

Coba sekarang:

  1. 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

    Gambar dalam ukuran asli
    Gambar asli

  2. Ubah ukuran gambar menjadi 100x100 piksel: http://34.67.235.246:8888/unsafe/100x100/https://web.dev/backdrop-filter/hero.jpg

Gambar dengan ukuran 100x100 piksel
Gambar diubah ukurannya menjadi 100x100 piksel

Filter

Filter mengubah gambar. Bagian filter 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 masing-masing filter menyerupai panggilan fungsi (misalnya, grayscale()) yang berisi nol atau beberapa argumen.

Coba sekarang:

  1. 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

    Gambar yang diburamkan
    Gambar buram

  2. Menerapkan beberapa filter. Konversikan ke grayscale dan rotate gambar 90 derajat: http://34.67.235.246:8888/unsafe/filters:grayscale():blur(90)/https://web.dev/backdrop-filter/hero.jpg

Gambar hitam putih yang telah diputar 90 derajat
Gambar hitam putih yang diputar

Mentransformasi Gambar

Bagian ini berfokus pada fungsi Thumbor yang paling relevan dengan performa: kompresi, pengubahan ukuran, dan konversi antar-format file.

Kompresi

Filter kualitas mengompresi gambar JPEG ke tingkat kualitas gambar yang diinginkan (1-100). Jika tidak ada tingkat kualitas yang diberikan, Thumbor akan mengompresi gambar ke tingkat kualitas 80. Ini adalah setelan default yang baik: tingkat kualitas 80-85 biasanya memiliki sedikit efek nyata terhadap kualitas gambar, tetapi biasanya mengurangi ukuran gambar hingga 30-40%.

Coba sekarang:

  1. Kompresi gambar ke kualitas 1 (sangat buruk): http://34.67.235.246:8888/unsafe/filters:quality(1)/https://web.dev/backdrop-filter/hero.jpg

    Gambar berkualitas rendah
    Gambar berkualitas rendah

  2. Kompresi gambar menggunakan setelan kompresi default Thumbor: http://34.67.235.246:8888/unsafe/filters:quality()/https://web.dev/backdrop-filter/hero.jpg

Gambar terkompresi tanpa masalah kualitas yang terlihat
Gambar terkompresi

Mengubah ukuran

Untuk mengubah ukuran gambar sambil mempertahankan proporsi aslinya, gunakan format $WIDTHx0 atau 0x$HEIGHT dalam bagian size string URL.

Coba sekarang:

  1. Ubah ukuran gambar menjadi lebar 200 piksel dengan tetap mempertahankan proporsi asli: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

    Gambar berukuran lebar 200 piksel
    Gambar diubah ukurannya ke lebar 200 piksel

  2. Ubah ukuran gambar ke tinggi 500 piksel dengan tetap mempertahankan proporsi asli: http://34.67.235.246:8888/unsafe/0x500/https://web.dev/backdrop-filter/hero.jpg

Gambar setinggi 500 piksel
Gambar diubah ukurannya ke tinggi 500 piksel

Anda juga dapat mengubah ukuran gambar ke persentase asli menggunakan filter proporsi. Jika ukuran ditetapkan bersama filter proporsi, gambar akan diubah ukurannya, lalu filter proporsi akan diterapkan.

Coba sekarang:

  1. Ubah ukuran gambar menjadi 50% dari aslinya: http://34.67.235.246:8888/unsafe/filters:proportion(.5)/https://web.dev/backdrop-filter/hero.jpg

    Ukuran gambar 50% dari aslinya
    Gambar diubah ukurannya menjadi 50% dari ukuran asli

  2. Ubah ukuran gambar menjadi lebar 1.000 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

Gambar dengan lebar 100 piksel
Gambar diubah ukurannya ke lebar 100 piksel

Metode ini hanyalah beberapa dari banyak opsi pemangkasan dan pengubahan ukuran yang dimiliki Thumbor. Untuk membaca opsi lainnya, lihat Penggunaan.

Format File

Filter format mengonversi gambar menjadi jpeg, webp, gif, atau png. Perlu diingat bahwa jika Anda mengoptimalkan performa, sebaiknya gunakan JPEG atau WebP karena file PNG dan GIF cenderung lebih besar secara signifikan dan juga tidak dikompresi.

Coba sekarang:

  1. Konversikan gambar ke WebP. Jika Anda membuka panel Network di DevTools, header respons Content-Type dokumen akan menunjukkan bahwa server menampilkan gambar WebP: http://34.67.235.246:8888/unsafe/filters:format(webp)/https://web.dev/backdrop-filter/hero.jpg
Screenshot DevTools yang menampilkan jenis konten (WebP) gambar
Header respons content-type yang ditampilkan di DevTools

Langkah Berikutnya

Coba filter dan transformasi lainnya pada gambar hero.jpg.

Jika Anda mengikuti petunjuk dari penginstalan Thumbor sendiri, lihat lampiran di bawah ini yang menjelaskan cara dan alasan Anda menggunakan file thumbor.conf.

Lampiran: thumbor.conf

Banyak opsi konfigurasi yang dibahas dalam postingan ini, serta banyak opsi lainnya, dapat ditetapkan sebagai default dengan menyiapkan dan menggunakan file konfigurasi thumbor.conf. Setelan di file thumbor.conf akan diterapkan ke semua gambar kecuali jika diganti oleh parameter string URL.

  1. Jalankan perintah thumbor-config untuk membuat file thumbor.conf baru.

    thumbor-config > ./thumbor.conf

  2. Buka file thumbor.conf baru Anda. Perintah thumbor-config menghasilkan file yang mencantumkan dan menjelaskan semua opsi konfigurasi Thumbor.

  3. Konfigurasi setelan dengan menghapus tanda komentar baris dan mengubah nilai default. Sebaiknya tetapkan setelan berikut:

    • QUALITY
    • AUTO_WEBP
    • MAX_WIDTH dan MAX_HEIGHT
    • ALLOW_ANIMATED_GIFS

  4. Jalankan Thumbor dengan flag --conf untuk menggunakan setelan thumbor.conf.

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