Mengoptimalkan gambar dengan Thumbor

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

Katie Hempenius
Katie Hempenius
X

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.

URL Thumbor memiliki komponen berikut: origin, kunci keamanan, ukuran, filter, dan gambar.
Format URL 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:

  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 dengan 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 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:

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

Gambar hitam putih yang telah diputar 90 derajat
Hitam putih, gambar diputar

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:

  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

Pengubahan ukuran

Untuk mengubah ukuran gambar dengan tetap 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 aslinya: http://34.67.235.246:8888/unsafe/200x0/https://web.dev/backdrop-filter/hero.jpg

    Gambar dengan lebar 200 piksel
    Gambar diubah ukurannya menjadi lebar 200 piksel

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

Gambar dengan tinggi 500 piksel
Gambar diubah ukurannya hingga tinggi 500 piksel

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:

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

    Gambar yang 50% ukuran aslinya
    Ukuran gambar diubah menjadi 50% dari ukuran aslinya

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

Gambar dengan lebar 100 piksel
Gambar diubah ukurannya menjadi 100 piksel

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:

  1. 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
Screenshot DevTools menampilkan jenis konten (WebP) gambar
Header respons content-type yang ditampilkan di DevTools

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.

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

    thumbor-config > ./thumbor.conf

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

  3. Konfigurasikan setelan dengan menghapus tanda komentar pada 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