Pemuatan lambat gambar tingkat browser untuk web

Anda dapat menggunakan atribut loading untuk memuat gambar secara lambat tanpa perlu menulis kode pemuatan lambat kustom atau menggunakan library JavaScript terpisah. Berikut adalah demo fitur:

Halaman ini membahas detail penerapan pemuatan lambat di browser.

Mengapa pemuatan lambat tingkat browser?

Menurut HTTP Archive, gambar adalah jenis aset yang paling banyak diminta untuk sebagian besar situs, dan biasanya membutuhkan lebih banyak {i>bandwidth <i} daripada sumber daya lainnya. Pada persentil ke-90, situs mengirim gambar berukuran lebih dari 5 MB melalui desktop dan perangkat seluler.

Sebelumnya, ada dua cara untuk menunda pemuatan gambar di luar layar:

• Menggunakan Intersection Observer API
• Menggunakan pengendali peristiwa scroll, resize, atau orientationchange

Kedua opsi tersebut memungkinkan developer menyertakan perilaku pemuatan lambat, dan banyak developer telah membangun library pihak ketiga untuk menyediakan abstraksi yang lebih mudah lagi untuk digunakan.

Dengan pemuatan lambat yang didukung langsung oleh browser, library eksternal tidak diperlukan. Pemuatan lambat tingkat browser juga memastikan pemuatan gambar tetap berfungsi meskipun klien menonaktifkan JavaScript. Namun perhatikan bahwa pemuatan hanya ditunda bila JavaScript diaktifkan.

Atribut loading

Chrome memuat gambar dengan berbagai prioritas, bergantung pada lokasinya relatif terhadap area pandang perangkat. Gambar di bawah area pandang dimuat dengan prioritas yang lebih rendah, tetapi gambar tersebut tetap diambil saat halaman dimuat.

Anda dapat menggunakan atribut loading untuk sepenuhnya menunda pemuatan offscreen gambar:

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Berikut adalah nilai yang didukung untuk atribut loading:

• lazy: Menunda pemuatan resource hingga mencapai jarak yang dihitung dari area pandang.
• eager: Perilaku pemuatan default browser, yang sama dengan tidak termasuk atributnya dan artinya gambar dimuat di mana pun letaknya yang berada di halaman. Ini adalah setelan default, tetapi ini berguna untuk mengatur secara eksplisit jika alat Anda secara otomatis menambahkan loading="lazy" saat eksplisit, atau jika linter Anda mengeluh jika tidak disetel secara eksplisit.

Hubungan antara atribut loading dan prioritas pengambilan

Nilai eager adalah petunjuk untuk memuat gambar seperti biasa, tanpa menunda pemuatan lebih lanjut jika gambar berada di luar layar. Gambar tidak dimuat lebih cepat daripada gambar lain yang tidak memiliki atribut loading.

Jika Anda ingin meningkatkan prioritas pengambilan gambar penting (misalnya, gambar LCP), gunakan Fetch Priority dengan fetchpriority="high".

Gambar dengan loading="lazy" dan fetchpriority="high" masih tertunda saat dikirim di luar layar, lalu diambil dengan prioritas tinggi ketika hampir dalam area pandang. Kombinasi ini tidak benar-benar diperlukan karena browser akan mungkin memuat gambar itu dengan prioritas tinggi.

Nilai minimum jarak dari area pandang

Semua gambar yang langsung terlihat tanpa men-scroll akan dimuat secara normal. Gambar-gambar jauh di bawah area pandang perangkat hanya diambil jika pengguna men-scroll di dekatnya.

Implementasi pemuatan lambat Chromium mencoba memastikan bahwa gambar di balik layar dimuat cukup awal sehingga selesai dimuat saat pengguna men-scroll dengan mengambilnya jauh sebelum terlihat di area pandang.

Ambang batas jarak bervariasi bergantung pada faktor berikut:

• Jenis resource gambar yang diambil
• Jenis koneksi efektif

Anda dapat menemukan nilai {i>default<i} untuk berbagai jenis koneksi efektif di sumber Chromium. Anda dapat bereksperimen dengan ambang batas yang berbeda ini dengan membatasi jaringan di DevTools.

Peningkatan penghematan data dan nilai minimum jarak dari area pandang

Pada Juli 2020, Chrome melakukan peningkatan signifikan untuk menyesuaikan nilai minimum jarak dari area pandang pemuatan lambat gambar agar dapat memenuhi ekspektasi developer dengan lebih baik.

Pada koneksi cepat (4G), kami mengurangi nilai minimum jarak dari area pandang Chrome dari 3000px menjadi 1250px, dan pada koneksi yang lebih lambat (3G atau lebih rendah), kami mengubah nilai minimum dari 4000px menjadi 2500px. Perubahan ini mencapai dua hal:

• <img loading=lazy> berperilaku lebih dekat dengan pengalaman yang ditawarkan oleh library pemuatan lambat JavaScript.
• Ambang batas jarak dari area pandang yang baru tetap berarti gambar mungkin akan dimuat saat pengguna men-scroll ke gambar tersebut.

Anda dapat menemukan perbandingan antara batas jarak dari area pandang lama dengan yang baru untuk salah satu demo kami tentang koneksi cepat (4G) berikutnya:

dan batas baru versus LazySizes (library pemuatan lambat JavaScript yang populer):

Memberikan atribut dimensi untuk gambar Anda

Selagi browser memuat gambar, browser tidak langsung mengetahui dimensi kustom, kecuali jika ditetapkan secara eksplisit. Agar browser memesan cukup ruang pada halaman untuk gambar, dan hindari pergeseran tata letak yang mengganggu, sebaiknya tambahkan atribut width dan height ke semua tag <img>.

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

Atau, tentukan nilainya secara langsung dalam gaya inline:

<img src="image.png" loading="lazy" alt="…" style="height:200px; width:200px;">

Praktik terbaik untuk menyetel dimensi berlaku untuk tag <img>, terlepas dari baik Anda pemuatannya dengan lambat, tetapi pemuatan lambat dapat menjadikannya lebih penting.

Pemuatan lambat di Chromium diterapkan dengan cara yang membuat gambar lebih mungkin dimuat begitu terlihat, tetapi masih ada kemungkinan mereka tidak akan dimuat di waktu yang tepat. Jika itu terjadi, jangan menentukan width dan height pada gambar akan meningkatkan dampaknya pada Pergeseran Tata Letak Kumulatif. Jika Anda tidak dapat menentukan image dimensi kustom, pemuatan lambat dapat menghemat jaringan resource pada risiko peningkatan perubahan tata letak.

Di sebagian besar skenario, gambar masih lambat dimuat jika Anda tidak menentukan dimensi, tetapi ada beberapa kasus ekstrem yang harus Anda perhatikan. Tanpa width dan height ditetapkan, dimensi gambar secara default ditetapkan ke 0×0 piksel. Jika Anda memiliki galeri berisi gambar, browser mungkin memutuskan bahwa semuanya muat di dalam area pandang di dimulai, karena setiap gambar tidak membutuhkan ruang dan tidak ada gambar yang didorong ke luar layar. Di beberapa dalam hal ini, browser memutuskan untuk memuat semuanya, sehingga halaman dapat dimuat lebih perlahan.

Untuk contoh cara kerja loading dengan gambar dalam jumlah besar, lihat demo ini.

Anda juga dapat memuat gambar yang telah ditentukan menggunakan elemen <picture> secara lambat:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

Meskipun browser memutuskan gambar mana yang akan dimuat dari salah satu <source> Anda hanya perlu menambahkan loading ke elemen <img> penggantian.

Selalu memuat gambar dengan segera yang terlihat di area pandang pertama

Untuk gambar yang terlihat saat pengguna pertama kali memuat halaman, dan terutama untuk gambar LCP, gunakan pemuatan cepat default browser sehingga tersedia saat itu juga. Untuk mengetahui informasi selengkapnya, lihat Efek performa dari terlalu banyak pemuatan lambat.

Gunakan loading=lazy hanya untuk gambar yang berada di luar area pandang awal. Browser tidak dapat menjalankan lazy-load gambar hingga tahu di mana gambar seharusnya berada di halaman, yang menyebabkannya memuat lebih lambat.

<!-- visible in the viewport -->
<img src="product-1.jpg" alt="..." width="200" height="200">
<img src="product-2.jpg" alt="..." width="200" height="200">
<img src="product-3.jpg" alt="..." width="200" height="200">

<!-- offscreen images -->
<img src="product-4.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-5.jpg" loading="lazy" alt="..." width="200" height="200">
<img src="product-6.jpg" loading="lazy" alt="..." width="200" height="200">

{i>Graceful degradation<i}

Browser yang tidak mendukung atribut loading akan mengabaikannya. Mereka tidak mendapatkan manfaat pemuatan lambat, tetapi tidak ada dampak negatif dari pemuatannya.

FAQ

Beberapa pertanyaan umum (FAQ) tentang pemuatan lambat tingkat browser.

Dapatkah saya memuat gambar secara otomatis dengan lambat di Chrome?

Sebelumnya, Chromium otomatis memuat gambar yang sangat cocok secara lambat ke penundaan jika Mode ringan diaktifkan di Chrome untuk Android dan atribut loading tidak disediakan atau ditetapkan ke loading="auto". Namun, Mode ringan dan loading="auto" sudah tidak digunakan lagi dan tidak ada rencana untuk menyediakan pemuatan lambat gambar secara otomatis di Chrome.

Dapatkah saya mengubah seberapa dekat gambar dengan area pandang sebelum dimuat?

Nilai ini di-hardcode dan tidak dapat diubah melalui API. Namun, mereka mungkin berubah di masa mendatang karena browser bereksperimen dengan nilai minimum yang berbeda jarak dan variabel.

Dapatkah gambar latar CSS menggunakan atribut loading?

Tidak, Anda hanya dapat menggunakannya dengan tag <img>.

Dapatkah loading berfungsi dengan gambar di area pandang yang tidak langsung terlihat?

Menggunakan loading="lazy" dapat mencegah gambar dimuat saat tidak terlihat, tetapi berada dalam jarak yang dihitung. Gambar ini mungkin berada di belakang korsel atau disembunyikan oleh CSS untuk layar tertentu ukuran. Misalnya, Chrome, Safari, dan Firefox tidak memuat gambar menggunakan Gaya display: none;, baik pada elemen gambar atau di induk . Namun, teknik penyembunyian gambar lainnya, seperti menggunakan opacity:0 gaya visual, tetap menyebabkan browser memuat gambar. Selalu uji implementasi secara menyeluruh untuk memastikannya berjalan sebagaimana mestinya.

Chrome 121 mengubah perilaku untuk gambar scroll horizontal seperti carousel. Platform ini sekarang menggunakan nilai minimum yang sama seperti scroll vertikal. Ini berarti untuk kasus penggunaan carousel, gambar akan dimuat sebelum terlihat di area pandang. Ini berarti pemuatan gambar cenderung tidak terlihat oleh pengguna, tetapi mengakibatkan lebih banyak download. Gunakan demo Pemuatan Lambat Horizontal untuk membandingkan perilaku di Chrome dengan Safari dan Firefox.

Bagaimana jika saya sudah menggunakan library atau skrip pihak ketiga untuk memuat gambar secara lambat?

Dengan dukungan penuh atas pemuatan lambat yang tertanam di browser modern, Anda mungkin tidak memerlukan library atau skrip pihak ketiga untuk memuat gambar secara lambat.

Salah satu alasan untuk terus menggunakan library pihak ketiga bersama loading="lazy" adalah menyediakan polyfill untuk browser yang tidak mendukung atribut tersebut, atau untuk memiliki kontrol lebih besar saat pemuatan lambat dipicu.

Bagaimana cara menangani browser yang tidak mendukung pemuatan lambat?

Pemuatan lambat gambar tingkat browser didukung dengan baik di semua browser utama dan direkomendasikan untuk sebagian besar kasus penggunaan, guna menghilangkan kebutuhan akan dependensi tambahan pada JavaScript.

Namun, jika Anda perlu mendukung lebih banyak browser atau ingin memiliki kontrol lebih besar atas nilai minimum pemuatan lambat, Anda dapat menggunakan library pihak ketiga untuk memuat gambar secara lambat di situs Anda.

Anda dapat menggunakan properti loading untuk mendeteksi apakah browser mendukung fitur:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill/third-party library
}

Misalnya, lazysizes adalah Library pemuatan lambat JavaScript. Anda dapat mendeteksi dukungan untuk loading untuk memuat lazysizes sebagai library penggantian hanya jika loading tidak didukung. Cara kerjanya adalah sebagai berikut:

• Ganti <img src> dengan <img data-src> untuk menghindari pemuatan cepat di browser yang tidak didukung. Jika atribut loading didukung, tukar data-src untuk src.
• Jika loading tidak didukung, muat penggantian dari lazysizes dan mulai menggunakan class lazyload untuk menunjukkan gambar mana yang akan dimuat dengan lambat:

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazy-load the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Berikut adalah demo dari pola ini. Coba di browser lama untuk melihat cara kerja penggantian.

Apakah pemuatan lambat untuk iframe juga didukung di browser?

<iframe loading=lazy> juga telah distandardisasi. Hal ini memungkinkan Anda memuat iframe dengan lambat menggunakan loading . Untuk informasi selengkapnya, lihat Saatnya memuat iframe di luar layar dengan lambat!

Bagaimana pemuatan lambat tingkat browser memengaruhi iklan di halaman web?

Semua iklan yang ditampilkan kepada pengguna sebagai gambar atau iframe lambat dimuat sama seperti iklan lainnya gambar atau iframe.

Bagaimana gambar ditangani saat laman web dicetak?

Semua gambar dan iframe akan langsung dimuat saat halaman dicetak. Lihat masalah #875403 untuk mengetahui detailnya.

Apakah Lighthouse mengenali pemuatan lambat tingkat browser?

Lighthouse 6.0 dan faktor yang lebih tinggi pendekatan untuk pemuatan lambat gambar di balik layar yang dapat menggunakan nilai minimum yang berbeda, membiarkan mereka meneruskan Tunda gambar di luar layar.

Muat lambat gambar untuk meningkatkan performa

Dukungan browser untuk pemuatan lambat gambar dapat mempermudah Anda untuk menyempurnakan halaman' tingkat tinggi.

Apakah Anda menemukan perilaku yang tidak biasa pada fitur yang diaktifkan di Chrome? Laporkan bug!