Kasus penggunaan pengoptimalan gambar

Halaman ini memberikan contoh untuk perilaku pemrosesan gambar lanjutan, efek pengurutan pipeline, dan aturan normalisasi gambar otomatis.

Urutan transformasi

Operasi dalam string parameter kueri imop berjalan secara berurutan dari kiri ke kanan, kecuali metadata atau scale yang berjalan terlebih dahulu dan canvas yang berjalan terakhir. Karena setiap operasi bertindak langsung pada output visual operasi sebelumnya, urutan parameter Anda memengaruhi kualitas visual akhir dan detail pelestarian gambar turunan.

Pertimbangkan gambar sumber yang lebarnya 1.000 piksel dan tingginya 1.000 piksel:

Contoh: Resize diikuti oleh Crop

https://www.example.com/image.jpg?imop=Resize,height=200;Crop,left=0.5

  1. Ubah ukuran: Gambar pertama-tama diperkecil dari 1.000 × 1.000 piksel menjadi 200 × 200 piksel untuk memenuhi parameter height=200.

  2. Pangkas: Operasi left=0.5 menghapus setengah bagian kiri gambar yang sudah diperkecil.

Hasil: Gambar akhir 100 x 200 piksel yang mewakili 50% konten di sebelah kanan. Karena seluruh gambar diperkecil sebelum dipangkas, wilayah akhir mempertahankan detail yang jauh lebih sedikit.

Contoh : Crop diikuti oleh Resize

https://www.example.com/image.jpg?imop=Crop,left=0.5;Resize,height=200

  1. Pangkas: Operasi left=0.5mengekstrak 50% gambar sumber beresolusi tinggi di sebelah kanan terlebih dahulu, sehingga membuat gambar perantara 500 x 1000 px.

  2. Ubah Ukuran: Operasi height=200 mengubah ukuran bagian yang dipangkas tersebut menjadi tinggi akhir.

Hasil: Gambar akhir 100 * 200 piksel. Karena gambar asli dipangkas terlebih dahulu dan diubah ukurannya nanti, output akhir mempertahankan detail dan kejelasan yang jauh lebih besar.

Perilaku peregangan dan peningkatan skala

Secara default, layanan pengoptimalan gambar menerapkan strategi ketat yang hanya memperkecil skala untuk menghemat bandwidth pengiriman edge dan melindungi kualitas visual. Jika Anda meminta dimensi yang lebih besar dari gambar asli, Cloud CDN akan mengabaikan pembesaran dan menampilkan gambar dalam ukuran aslinya.

Untuk mengganti perilaku ini dan memaksa aset untuk meningkatkan skala, Anda harus secara eksplisit mendeklarasikan nilai stretch.

Persyaratan validasi untuk peningkatan skala

  • Aturan ukuran ganda: nilai stretch hanya diizinkan jika Anda secara eksplisit memberikan parameter width dan height dalam operasi Resize

  • Batasan dimensi tunggal: Jika Anda menyertakan scaling=stretch saat hanya menentukan satu dimensi, seperti width atau height, layanan pengoptimalan gambar akan menolak seluruh permintaan.

Misalnya,

Permintaan valid: ?imop=resize,width=500,height=500,scaling=stretch

Permintaan tidak valid: ?imop=resize,width=500, scaling=stretch

Caching dan invalidasi cache

Saat memperbarui gambar asli di server asal, Anda harus membatalkan validasi versi yang di-cache untuk memastikan Cloud CDN mengambil dan menayangkan aset yang diperbarui.

Perilaku caching

Setiap kombinasi unik parameter transformasi yang ditambahkan ke URL gambar akan membuat entri cache terpisah dan berbeda di edge. Untuk mengoptimalkan rasio cache ditemukan, hindari membuat terlalu banyak variasi parameter unik. Misalnya, perubahan satu piksel.

Cloud CDN menormalisasi kunci cache untuk mengelompokkan parameter transformasi yang identik, terlepas dari urutannya dalam string kueri.

Perilaku invalidasi

Saat memperbarui gambar asli di server asal, Anda hanya perlu mengirimkan satu permintaan invalidasi untuk URL gambar dasar. Cloud CDN yang ditingkatkan akan otomatis menghapus gambar asli yang di-cache dan semua varian yang dibuat secara otomatis (seperti WebP atau versi yang dioptimalkan) secara global.

Cara Kerja Invalidasi Varian

Saat Anda mengeluarkan permintaan invalidasi cache menggunakan pola jalur yang cocok dengan URL gambar dasar, misalnya,/images/my-picture.jpg, Cloud CDN akan otomatis mengidentifikasi dan menghapus:

  • Gambar sumber asli yang di-cache.

  • Semua varian yang dibuat sebelumnya

Anda dapat menerapkan invalidasi cache Cloud CDN menggunakan:

  • Google Google Cloud Cloud Console: buka Network Services > Cloud CDN, pilih asal, lalu buka tab Cache Invalidation. Atau, buka Network Services > Load Balancing, pilih load balancer Anda, lalu gunakan tab Cache Invalidation.

  • Google Cloud CLI: gunakan perintah Google Cloud CLI compute url-maps invalidate-cdn-cache.

  • Tag Cache : Tag cache adalah pendekatan yang direkomendasikan untuk mengelola gambar yang dioptimalkan. Hal ini memungkinkan Anda mengeluarkan permintaan invalidasi yang menargetkan tag tertentu, yang akan menghapus konten yang terkait dengannya untuk kontrol yang lebih terperinci.

Misalnya:

Untuk membatalkan validasi /images/my-picture.jpg dan semua varian yang dioptimalkan secara global:

  • Jalur: tentukan jalur persisnya /images/my-picture.jpg.

  • Host (Opsional): tentukan host jika Anda hanya ingin menghapus gambar untuk domain tertentu.

Saat dikirimkan, satu tindakan ini akan menghapus semua versi gambar yang dioptimalkan dari cache edge secara global, sehingga memastikan pengguna langsung menerima versi yang diperbarui pada permintaan berikutnya.

Profil warna dan orientasi gambar di EXIF (normalisasi)

Smartphone dan kamera digital modern sering menyimpan gambar dengan kisi piksel mentah yang tidak diputar dan mengandalkan tag orientasi EXIF yang disematkan untuk menginstruksikan perangkat penampil agar memutar gambar. Misalnya, 90 derajat searah jarum jam untuk orientasi potret. Demikian pula, profil warna ICC yang disematkan menentukan cara warna ditampilkan di berbagai monitor.

Untuk membantu memastikan operasi yang dapat diprediksi, pipeline edge pengoptimalan gambar akan otomatis menormalisasi gambar sebelum menjalankan transformasi apa pun.

Proses normalisasi

  • Sebelum menjalankan transformasi, mesin edge membaca tag orientasi EXIF dan metadata profil warna ICC, lalu menerapkannya secara fisik ke kisi piksel. Hal ini membantu memastikan prediktabilitas koordinat untuk parameter crop dan resize berikutnya.

  • Operasi, seperti crop, resize, atau scale dijalankan dengan benar terhadap dimensi visual yang sebenarnya untuk mencegah error visual.

  • Setelah menerapkan penyesuaian ke piksel inti, mesin edge akan menghapus semua metadata yang tidak penting dari file untuk memaksimalkan penghematan ukuran. Secara default, mesin edge akan mempertahankan copyright kecuali jika nilai tertentu diminta dalam operasi metadata.

Langkah berikutnya