Configure ESA Image Transformations for Faster Delivery - Edge Security Acceleration

Edge Security Acceleration (ESA) menyediakan fitur transformasi gambar yang mengubah format atau kualitas gambar origin, memotong dan menskalakan gambar tersebut, serta menyimpan hasilnya dalam cache. Fitur ini meningkatkan kecepatan pengiriman gambar dan mengurangi back-to-origin traffic.

Batasan

Batasan berikut berlaku saat menggunakan fitur pemrosesan gambar.

Batasan gambar asli:

Format gambar yang didukung meliputi JPEG, JPG, PNG, WebP, BMP, GIF, TIFF, dan JPEG 2000.
Ukuran gambar asli tidak boleh melebihi 10 MB.
Hasil perkalian lebar × tinggi tidak boleh melebihi 16.777.216 piksel.

Catatan
Untuk gambar GIF, total lebar × tinggi dihitung sebagai jumlah dari seluruh frame. Anda dapat menggunakan alat seperti ImageMagick untuk melihat detail frame pada gambar GIF.

Batasan gambar hasil transformasi:

Hasil perkalian lebar × tinggi tidak boleh melebihi 16.777.216 piksel.
Saat mengonversi ke format WebP, hasil perkalian lebar × tinggi tidak boleh melebihi 16.777.216 piksel, dan baik lebar maupun tinggi secara individual tidak boleh melebihi 16.384 piksel. Jika gambar sumber merupakan gambar animasi, gambar tersebut akan menjadi gambar statis setelah dikonversi ke WebP.

Batasan pra-ambil cache:

Fitur transformasi gambar tidak berlaku untuk konten yang telah dipra-ambil ke dalam cache. Selama proses pra-ambil cache, node ESA hanya melakukan origin fetch terhadap file gambar asli dan tidak menjalankan transformasi gambar.

Aktifkan transformasi gambar

Di Konsol ESA, buka Site Management. Pada kolom Website, klik situs target Anda.
Di panel navigasi sebelah kiri, pilih Speed and Network > Optimize.
Buka tab Speed Optimization. Aktifkan toggle Image Transformations. Kemudian, tambahkan parameter pemrosesan gambar ke URL permintaan Anda untuk menerapkan berbagai transformasi gambar.

Sebagai contoh, dalam JavaScript, Anda dapat menulis fungsi penanganan URL untuk mengonversi gambar ke format lain.
```
function updateImageUrl(format) {
  let baseUrl = "https://example.com/image_01";
  let newUrl = `${baseUrl}.png?image_process=format,${format}`;
  document.getElementById('imageElement').src = newUrl;
}

// Contoh pemanggilan untuk mengonversi ke format BMP
updateImageUrl("bmp");

// Untuk mengonversi ke format lain, seperti JPG:
// updateImageUrl("jpg");
```
Pada kode di atas, image_process=format,${format} menentukan parameter transformasi gambar. Untuk daftar parameter yang didukung beserta nilai yang valid, lihat Metode pemrosesan gambar yang didukung.

Validasi transformasi

Permintaan asli

Permintaan example.com/bb.jpeg. Respons mengembalikan gambar dengan orientasi normal dalam format .jpeg.

Permintaan hasil transformasi

Konversi format: Untuk mengonversi gambar .jpeg ke .png, ubah URL permintaan menjadi example.com/bb.jpeg?image_process=format,png. Respons mengembalikan gambar dalam format .png.
Rotasi gambar: Untuk memutar gambar 90° searah jarum jam, ubah URL permintaan menjadi example.com/bb.jpeg?image_process=rotate,90. Respons mengembalikan gambar yang telah diputar 90° searah jarum jam.

Metode pemrosesan gambar yang didukung

ESA mendukung penerapan satu atau beberapa parameter transformasi pada sebuah gambar. Parameter yang didukung tercantum dalam tabel berikut.

Fitur pemrosesan gambar	Parameter pemrosesan	Deskripsi
Konversi format	format	Mengonversi format gambar.
Konversi kualitas	quality	Menyesuaikan kualitas gambar.
Pemotongan gambar	crop	Memotong gambar sesuai ukuran yang ditentukan.
Penskalaan gambar	resize	Menyesuaikan ukuran gambar sesuai ukuran yang ditentukan. Saat ini, hanya penskalaan ke bawah (downscaling) yang didukung; penskalaan ke atas (upscaling) tidak tersedia.
Rotasi gambar	Rotasi otomatis: auto-orient Rotasi tertentu: rotate	Memutar gambar secara otomatis berdasarkan metadata-nya, atau memutarnya searah jarum jam dengan sudut yang ditentukan.
Warna gambar	Kecerahan: Cerah Kontras: contrast Penajaman: Pertajam	Menyesuaikan kecerahan, kontras, dan definisi gambar.
Tambahkan watermark	watermark	Menambahkan watermark berupa gambar atau teks ke dalam gambar.
Dapatkan info	info	Mengambil informasi gambar, termasuk dimensi, format, dan kualitas.

Hubungan antara fitur tingkat situs dan berbasis aturan

Konfigurasi yang ditetapkan pada tingkat situs berlaku untuk semua permintaan ke situs tersebut. Jika Anda ingin mengaktifkan fitur ini hanya untuk permintaan tertentu, gunakan konfigurasi berbasis aturan. Tentukan kondisi aturan untuk mendeteksi parameter tertentu dalam permintaan pengguna sehingga konfigurasi hanya diterapkan pada permintaan yang sesuai. Padanan berbasis aturan dari fitur transformasi gambar tingkat situs adalah Image Optimization.