Halaman ini diterjemahkan oleh Cloud Translation API.

Kebijakan gambar untuk waktu pemuatan yang cepat dan lainnya

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

Luna Lu

Gambar sering kali memakan banyak ruang visual dan merupakan 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 terkompresi dengan buruk atau gambar berukuran besar yang tidak diperlukan. Hal ini memberikan banyak ruang untuk peningkatan performa, hanya dengan mengoptimalkan gambar.

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

Kebijakan gambar yang dioptimalkan

Kebijakan izin memperkenalkan serangkaian batasan baru pada gambar 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, yaitu gambar akan dirender secara normal tanpa penegakan, sedangkan pelanggaran sedang diamati melalui laporan. (Lihat Mode khusus laporan, di bawah untuk mengetahui detailnya.)

gambar-ukuran-besar

Kebijakan izin oversized-images membatasi dimensi intrinsik gambar dalam kaitannya dengan ukuran penampungnya.

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

Mengapa?

Menampilkan gambar dengan ukuran lebih besar dari yang dapat dirender oleh perangkat tampilan—misalnya, menyajikan gambar desktop ke konteks seluler, atau menayangkan gambar berkepadatan piksel tinggi ke perangkat berkepadatan piksel rendah—menghabiskan traffic jaringan dan memori perangkat. Baca Menampilkan gambar dengan dimensi yang benar dan Menayangkan gambar responsif untuk mengetahui informasi tentang cara mengoptimalkan gambar Anda.

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);

Jika image terlalu besar untuk container. — Jika gambar terlalu besar untuk container.

Saya mendapatkan hasil yang serupa jika saya hanya menurunkan lebar atau tingginya.

Lebar yang diubah — Ubah ukuran lebar dan tinggi.

Tinggi diubah ukurannya — Ubah ukuran lebar dan tinggi.

How to use

Ringkasnya, kebijakan oversized-images dapat ditentukan melalui:

Header HTTP Permissions-Policy
Atribut allow <iframe>

Untuk mendeklarasikan kebijakan oversized-images, Anda harus memberikan:

Nama fitur, oversized-images (Wajib)
Daftar origin (Opsional)
Nilai batas (yaitu, rasio penurunan skala X) untuk origin, yang ditentukan dalam tanda kurung (Opsional)

Sebaiknya gunakan rasio downscaling 2,0 atau lebih rendah. Pertimbangkan untuk menggunakan gambar responsif dengan resolusi yang berbeda agar gambar terbaik ditampilkan 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. Semua elemen <img> dengan gambar yang rasio penurunan skalanya 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 downscaling kurang dari atau sama dengan 1,5. Elemen <img> di tempat lain akan dirender secara normal.

gambar-{lossy,lossless} yang tidak dioptimalkan

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

unoptimized-lossy-images: Format yang hilang tidak boleh melebihi rasio byte-per-piksel sebesar X, dengan tunjangan overhead 1 KB tetap. Untuk gambar W x H, nilai minimum ukuran file dihitung sebagai L x T x X + 1024.
unoptimized-lossless-images: Format lossless tidak boleh melebihi rasio byte per piksel X, dengan tunjangan overhead 10 KB tetap. Untuk gambar W x H, nilai minimum ukuran file dihitung sebagai L x T x X + 10.240.
unoptimized-lossless-images-strict: Format lossless tidak boleh melebihi rasio byte per piksel sebesar X, dengan tunjangan overhead 1 KB tetap. Untuk gambar W x H, nilai minimum ukuran file dihitung sebagai L x T x X + 1024.

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

Mengapa?

Semakin besar ukuran download, semakin lama waktu yang dibutuhkan untuk memuat gambar. Ukuran file harus dijaga sekecil mungkin saat mengoptimalkan gambar: memisahkan 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

Tabel berikut 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.

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

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

Saat gambar tidak dioptimalkan. — Jika gambar tidak dioptimalkan.

How to use

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

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

Header HTTP Permissions-Policy
Atribut allow <iframe>

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

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

Sebaiknya gunakan rasio byte per piksel sebesar 0,5 atau lebih rendah untuk unoptimized-lossy-images, serta rasio byte per piksel sebesar 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 Anda dalam format lossy WebP jika bisa. Jika belum cukup, cobalah format lossless WebP. Menggunakan JPEG pada browser yang tidak mendukung format WebP. Gunakan PNG jika tidak ada format yang berfungsi.

Jika Anda menggunakan format WebP, coba dengan batas 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). 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 pada origin situs dengan nilai minimum 0,3 (untuk format lossy) dan 0,8 (untuk format lossless). Elemen <img> dalam konteks penjelajahan tingkat atas dan konteks penjelajahan bertingkat dengan asal yang sama hanya akan dirender biasanya jika rasio byte-per-piksel memenuhi batasan ini. Elemen <img> di mana saja akan dirender secara normal.

Mode laporan saja dalam situasi apa pun

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, dan menggunakan mode laporan saja 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 secara langsung tanpa penegakan apa pun.

Batasan

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

Mengoptimalkan gambar Anda

Saya tidak banyak membahas cara mengoptimalkan gambar, tetapi belum mengetahui 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.

Berikan masukan Anda

Semoga artikel ini memberi Anda pemahaman yang baik tentang kebijakan gambar dan membuat Anda bersemangat. Kami mengharapkan Anda untuk mencoba kebijakan tersebut dan memberikan masukan kepada kami.

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

Kami ingin mengetahui nilai ambang batas apa yang Anda gunakan dan yang menurut kami berguna. Kami ingin mengetahui apakah unoptimized-lossless-images atau unoptimized-lossless-images-strict lebih intuitif dan mudah digunakan, atau apakah kami harus menggunakan tunjangan overhead yang berbeda. Kami akan mengirimkan survei menjelang akhir uji coba. Nantikan kabar terbarunya.