Gunakan kebijakan gambar yang dioptimalkan untuk memastikan situs Anda menggunakan gambar yang berperforma terbaik.
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 serangkaian 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 batasan baru yang ditetapkan pada image yang dapat diterapkan dengan penerapan 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 menggambarkan hal ini. Berikut ini perilaku default saat memotong ukuran tampilan gambar menjadi dua.
Jika saya menerapkan kebijakan izin berikut, saya akan mendapatkan gambar placeholder.
Permissions-Policy: oversized-images *(2);
Saya mendapatkan hasil yang serupa jika hanya menurunkan lebar atau 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 diisi) - Daftar origin (Opsional)
- Nilai minimum (yaitu, rasio penurunan skala X) untuk origin, yang ditentukan dalam tanda kurung (Opsional)
Kami merekomendasikan rasio penurunan skala sebesar 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 downscalingnya 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 lainnya akan dirender secara normal.
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 berukuran W x T, batas ukuran file dihitung sebagai W x H x X + 10.240.
unoptimized-lossless-images-strict
- Format lossless tidak boleh melebihi rasio byte per piksel sebesar X, dengan batasan overhead 1 KB tetap. 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.
Jika saya menerapkan kebijakan izin berikut, saya akan mendapatkan gambar placeholder.
Permissions-Policy: unoptimized-lossy-images *(0.5);
Cara menggunakan
Jika Anda baru mengenal kebijakan izin, lihat Pengantar Kebijakan Izin untuk mengetahui detail selengkapnya.
Singkatnya, 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 diisi) - 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 sebesar 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. Sajikan semua gambar dalam format lossy WebP jika memungkinkan. Jika belum cukup, coba format lossless WebP. 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 pada semua origin dengan nilai minimum 0,5 (untuk format
lossy) dan 1 (untuk format lossless). Elemen <img>
apa pun 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 di gambar latar atau konten yang dihasilkan. Jika Anda
ingin kebijakan didukung di konten yang lebih luas, harap beri tahu kami.
Mengoptimalkan gambar Anda
Saya telah membahas sedikit 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 mengirimkan masukan 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
menjelang akhir uji coba. Nantikan kabar terbarunya.