Kebijakan gambar untuk waktu pemuatan yang cepat dan lainnya

Gunakan kebijakan gambar yang dioptimalkan untuk memastikan situs Anda menggunakan gambar yang berperforma terbaik.

Luna Lu
Luna Lu

Gambar sering kali menghabiskan ruang visual dalam jumlah yang signifikan dan membentuk sebagian besar byte yang didownload di situs. Mengoptimalkan gambar dapat meningkatkan performa pemuatan dan mengurangi traffic jaringan.

Anehnya, lebih dari setengah situs di web menayangkan gambar yang dikompresi dengan buruk atau berukuran besar yang tidak perlu. Hal ini memberikan banyak ruang untuk peningkatan performa hanya dengan mengoptimalkan gambar.

Anda mungkin bertanya, bagaimana cara mengetahui apakah gambar saya sudah dioptimalkan dan bagaimana cara mengoptimalkannya? Kami sedang bereksperimen dengan kumpulan kebijakan fitur baru untuk pengoptimalan gambar: oversized-images, unoptimized-lossy-images, unoptimized-lossless-images, danunoptimized-lossless-images-strict. Semuanya kini tersedia untuk uji coba asal.

Kebijakan gambar yang dioptimalkan

Kebijakan izin memperkenalkan serangkaian batasan baru pada image yang dapat diterapkan dengan penegakan waktu pengembangan. Gambar yang melanggar salah satu batasan akan dirender sebagai gambar placeholder, yang mudah diidentifikasi dan diperbaiki. Kebijakan ini dapat ditentukan dalam mode hanya laporan, tempat gambar akan dirender secara normal tanpa penerapan saat pelanggaran diamati melalui laporan. (Lihat Mode khusus laporan di dunia nyata, di bawah untuk mengetahui detailnya.)

gambar-ukuran-besar

Kebijakan izin oversized-images membatasi dimensi intrinsik gambar sehubungan dengan ukuran penampung.

Saat dokumen menggunakan kebijakan oversized-images, setiap elemen <img> yang resolusi intrinsiknya lebih dari X kali lebih besar dari ukuran penampung di salah satu dimensi akan diganti dengan gambar placeholder.

Mengapa?

Menayangkan gambar yang lebih besar dari yang dapat dirender perangkat penampil—misalnya, menayangkan gambar desktop ke konteks seluler, atau menayangkan gambar dengan kepadatan piksel tinggi ke perangkat dengan kepadatan piksel rendah—akan membuang-buang traffic jaringan dan memori perangkat. Baca Menayangkan gambar dengan dimensi yang benar dan Menayangkan gambar responsif untuk mengetahui informasi tentang cara mengoptimalkan gambar.

Contoh

Beberapa contoh akan menggambarkan hal ini. Berikut ini menunjukkan perilaku default saat memotong ukuran tampilan gambar menjadi dua.

Perilaku pengubahan ukuran default.
Perilaku pengubahan ukuran default.

Jika saya menerapkan kebijakan izin berikut, saya akan mendapatkan gambar placeholder.

Permissions-Policy: oversized-images *(2);

Jika gambar terlalu besar untuk penampung.
Jika gambar terlalu besar untuk penampung.

Saya mendapatkan hasil yang serupa jika hanya menurunkan lebar atau tinggi.

Lebar yang diubah ukurannya Tinggi yang diubah ukurannya
Mengubah ukuran lebar dan tinggi.

Cara menggunakan

Untuk meringkas, kebijakan oversized-images dapat ditentukan melalui:

  • Header HTTP Permissions-Policy
  • Atribut <iframe> allow

Untuk mendeklarasikan kebijakan oversized-images, Anda perlu memberikan:

  • Nama fitur, oversized-images (Wajib)
  • Daftar origin (Opsional)
  • Nilai nilai minimum (yaitu, rasio penskalaan turun X) untuk origin, yang ditentukan dalam tanda kurung (Opsional)

Sebaiknya gunakan rasio penskalaan ke bawah 2,0 atau lebih rendah. Pertimbangkan untuk menggunakan gambar responsif dengan resolusi yang berbeda untuk menayangkan gambar dengan sebaik mungkin di berbagai ukuran layar, resolusi, dan sebagainya.

Contoh lainnya

Permissions-Policy: oversized-images *(2.0)

Kebijakan ini diterapkan di semua origin dengan nilai minimum 2,0. Setiap elemen <img> dengan gambar yang rasio penskalaannya lebih besar dari 2,0 tidak diizinkan dan akan diganti dengan gambar placeholder.

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

Kebijakan ini diterapkan di origin situs dengan nilai minimum 1,5. Elemen <img> dalam konteks penjelajahan tingkat atas dan konteks penjelajahan bertingkat asal yang sama hanya akan dirender secara normal jika rasio penskalaan ke bawah kurang dari atau sama dengan 1,5. Elemen <img> di tempat lain akan dirender seperti biasa.

unoptimized-{lossy,lossless}-images

Kebijakan fitur unoptimized-lossy-images, unoptimized-lossless-images, unoptimized-lossless-images-strict membatasi ukuran file gambar sehubungan dengan resolusi intrinsiknya:

unoptimized-lossy-images
Format lossy tidak boleh melebihi rasio byte per piksel X, dengan toleransi overhead 1 KB tetap. Untuk gambar W x H, nilai minimum ukuran file dihitung sebagai W x H x X + 1024.
unoptimized-lossless-images
Format lossless tidak boleh melebihi rasio byte per piksel X, dengan toleransi overhead tetap sebesar 10 KB. Untuk gambar W x H, nilai minimum ukuran file dihitung sebagai W x H x X + 10240.
unoptimized-lossless-images-strict
Format lossless tidak boleh melebihi rasio byte per piksel X, dengan jumlah overhead tetap 1 KB. Untuk gambar W x H, nilai minimum ukuran file dihitung sebagai W x H x X + 1024.

Jika dokumen menggunakan salah satu kebijakan ini, setiap elemen <img> yang melanggar batasan akan diganti dengan gambar placeholder.

Mengapa?

Makin besar ukuran download, makin lama waktu yang diperlukan untuk memuat gambar. Ukuran file harus dijaga sekecil mungkin saat mengoptimalkan gambar: menghapus metadata, memilih format gambar yang baik, menggunakan kompresi gambar, dan sebagainya. Baca Menggunakan Imagemin untuk mengompresi gambar dan Menggunakan gambar WebP untuk mengetahui informasi tentang cara mengoptimalkan gambar.

Contoh

Berikut ini menunjukkan perilaku browser default. Tanpa kebijakan izin, gambar lossy yang tidak dioptimalkan dapat ditampilkan sama seperti gambar yang dioptimalkan.

Membandingkan gambar yang dioptimalkan dengan gambar yang tidak dioptimalkan.
Membandingkan gambar yang dioptimalkan dengan gambar yang tidak dioptimalkan.

Jika saya menerapkan kebijakan izin berikut, saya akan mendapatkan gambar placeholder.

Permissions-Policy: unoptimized-lossy-images *(0.5);

Jika gambar tidak dioptimalkan.
Jika gambar tidak dioptimalkan.

Cara menggunakan

Jika Anda baru mengenal kebijakan izin, lihat Pengantar Kebijakan Izin untuk mengetahui detail selengkapnya.

Untuk meringkas, kebijakan unoptimized-{lossy,lossless}-images dapat ditentukan melalui:

  • Header HTTP Permissions-Policy
  • Atribut <iframe> allow

Untuk mendeklarasikan kebijakan unoptimized-{lossy,lossless}-images, Anda harus menyediakan:

  • Nama fitur, misalnya, unoptimized-lossy-images (Wajib)
  • Daftar origin (Opsional)
  • Nilai minimum (yaitu, rasio byte per piksel X) untuk origin, yang ditentukan dalam tanda kurung (Opsional)

Sebaiknya gunakan rasio byte per piksel 0,5 atau lebih rendah untuk unoptimized-lossy-images dan rasio byte per piksel 1 atau lebih rendah untuk unoptimized-lossless-images dan unoptimized-lossless-images-strict.

Format WebP memiliki rasio kompresi yang lebih baik daripada format lainnya. Tayangkan semua gambar dalam format WebP lossy jika memungkinkan. Jika tidak memadai, coba format WebP tanpa kompresi. Gunakan JPEG di browser yang tidak mendukung format WebP. Gunakan PNG jika tidak ada format yang berfungsi.

Jika Anda menggunakan format WebP, coba gunakan nilai minimum yang lebih ketat:

  • 0,2 untuk WEBPV8
  • 0,5 untuk WEBPL

Contoh lainnya

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

Kebijakan ini diterapkan di semua origin dengan nilai minimum 0,5 (untuk format lossy) dan 1 (untuk format lossless). Setiap elemen <img> yang gambarnya memiliki rasio byte per piksel yang melebihi batasan tidak diizinkan dan akan diganti dengan gambar placeholder.

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

Kebijakan ini diterapkan di origin situs dengan nilai minimum 0,3 (untuk format lossy) dan 0,8 (untuk format lossless). Elemen <img> dalam konteks browser level teratas dan konteks penjelajahan bertingkat dengan origin yang sama hanya akan dirender secara normal jika rasio byte per piksel memenuhi batasan ini. Elemen <img> di tempat lain akan dirender secara normal.

Mode hanya laporan di dunia nyata

Memublikasikan situs dengan gambar placeholder mungkin bukan yang Anda inginkan. Anda dapat menggunakan kebijakan dalam mode penerapan (dengan gambar yang tidak dioptimalkan yang dirender sebagai gambar placeholder) selama pengembangan dan staging, serta menggunakan mode khusus laporan dalam produksi. (Lihat Pelaporan Kebijakan Izin untuk mengetahui detail selengkapnya.) Serupa dengan header HTTP Permissions-Policy, header Permissions-Policy-Report-Only memungkinkan Anda mengamati laporan pelanggaran di alam tanpa penegakan.

Batasan

Kebijakan gambar hanya berfungsi pada elemen gambar HTML (<img>, <source>, dll.) dan belum didukung pada gambar latar belakang atau konten yang dihasilkan. Jika Anda ingin kebijakan didukung di konten yang lebih luas, harap beri tahu kami.

Mengoptimalkan gambar

Kami telah membahas cukup banyak tentang cara mengoptimalkan gambar, tetapi belum menjelaskan cara melakukannya. Topik tersebut berada di luar cakupan artikel ini, tetapi Anda dapat mempelajari lebih lanjut dari link di bawah dan dari codelab yang tercantum di akhir artikel.

Harap berikan masukan

Semoga artikel ini telah memberi Anda pemahaman yang baik tentang kebijakan gambar dan membuat Anda bersemangat. Kami sangat ingin Anda mencoba kebijakan ini dan memberikan masukan kepada kami.

Anda dapat memberikan masukan kepada kami untuk setiap fitur yang disebutkan dalam artikel ini ke milis kami: feature-control@chromium.org.

Kami ingin mengetahui nilai nilai minimum yang Anda gunakan dan berguna bagi Anda. Kami ingin mengetahui apakah unoptimized-lossless-images atau unoptimized-lossless-images-strict lebih intuitif dan mudah digunakan, atau apakah kita harus menggunakan perbedaan overhead allowance. Kami akan mengirimkan survei di akhir uji coba. Nantikan kabar terbarunya.