Aktifkan transformasi gambar

Edge Security Acceleration (ESA) mentransformasikan gambar origin di tepi—mengonversi format, menyesuaikan kualitas, memotong, dan mengubah ukuran—lalu menyimpan hasilnya dalam cache untuk meningkatkan kecepatan pengiriman dan mengurangi lalu lintas back-to-origin.

Batasan

Pemrosesan gambar tunduk pada batasan berikut.

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 adalah jumlah seluruh frame. Anda dapat menggunakan alat seperti ImageMagick untuk melihat detail frame 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 tidak boleh melebihi 16.384 piksel secara individual. Jika gambar sumber berupa animasi, gambar tersebut akan menjadi gambar statis setelah dikonversi ke WebP.

Batasan pra-ambil cache:

Transformasi gambar tidak berlaku untuk konten yang telah dipra-ambil ke cache. Selama proses pra-ambil cache, node ESA hanya mengambil file gambar asli tanpa melakukan transformasi.

Di Konsol ESA, pilih Websites, lalu di kolom Website, klik situs target.
Di panel navigasi kiri, pilih Speed and Network > Optimize.
Buka tab Speed Optimization. Aktifkan toggle Status. 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 validnya, lihat Metode pemrosesan gambar yang didukung.

Adaptive WebP dan Adaptive AVIF

Setelah Anda mengaktifkan Adaptive WebP atau Adaptive AVIF, node ESA mendeteksi kompatibilitas browser dan mengonversi gambar origin ke format WebP atau AVIF sebelum mengirimkannya ke klien, sehingga mengurangi ukuran transmisi. Anda dapat mengaktifkan salah satu pengaturan ini secara independen.

Untuk mengaktifkan Adaptive WebP atau Adaptive AVIF

Pada kartu Image Transform, klik Settings untuk membuka formulir konfigurasi.
Jika toggle Status dalam keadaan nonaktif, aktifkan terlebih dahulu.
Aktifkan toggle Adaptive WebP atau Adaptive AVIF. Anda dapat mengaktifkan kedua toggle tersebut secara bersamaan.
Klik OK untuk menyimpan konfigurasi.

Konversi adaptif hanya berlaku jika semua kondisi berikut terpenuhi:

Header Accept pada permintaan berisi image/avif atau image/webp.
Ukuran dan resolusi gambar asli tidak melebihi batasan fitur transformasi gambar. Untuk detailnya, lihat bagian Batasan.
Format gambar asli adalah JPEG, JPG, PNG, WebP, BMP, GIF, TIFF, JPEG 2000, atau AVIF. Format ditentukan berdasarkan header respons Content-Type atau ekstensi file dalam permintaan.
Jika Anda mengaktifkan kedua fitur Adaptive WebP dan Adaptive AVIF, node ESA akan mengonversi gambar ke format AVIF.

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 akan 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 akan mengembalikan gambar yang telah diputar 90° searah jarum jam.

Metode pemrosesan gambar yang didukung

ESA mendukung penerapan satu atau beberapa parameter transformasi pada gambar. Tabel berikut mencantumkan parameter yang didukung.

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 tertentu.
Pengubahan ukuran gambar	resize	Mengubah ukuran gambar sesuai ukuran tertentu. Saat ini, hanya downscaling yang didukung; 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 tertentu.
Warna gambar	Kecerahan: Cerah Kontras: contrast Ketajaman: sharpen	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 tingkat situs berlaku untuk semua permintaan ke suatu situs. Untuk mengaktifkan transformasi gambar hanya pada permintaan tertentu, gunakan konfigurasi berbasis aturan dengan kondisi yang sesuai dengan permintaan yang diinginkan. Padanan berbasis aturan dari transformasi gambar tingkat situs adalah Image Optimization.

Perbandingan dengan pemrosesan gambar OSS

Baik transformasi gambar ESA maupun pemrosesan gambar OSS sama-sama mentransformasikan gambar menggunakan parameter URL. ESA memproses gambar di tepi (edge), sehingga cocok untuk skenario akselerasi edge. Object Storage Service (OSS) memproses gambar di sisi layanan penyimpanan, sehingga cocok untuk skenario penyimpanan. Jika Anda sudah menggunakan pemrosesan gambar OSS, pilih berdasarkan skenario Anda: gunakan ESA untuk akselerasi edge, dan OSS untuk penyimpanan.