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 tersebut:

Halaman ini membahas detail penerapan pemuatan lambat di browser.

Mengapa pemuatan lambat tingkat browser?

Menurut Arsip HTTP, gambar adalah jenis aset yang paling banyak diminta untuk sebagian besar situs, dan biasanya menggunakan lebih banyak bandwidth daripada resource lainnya. Pada persentil ke-90, situs mengirim gambar lebih dari 5 MB pada desktop dan 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 dapat mengizinkan developer menyertakan perilaku pemuatan lambat, dan banyak developer telah membangun library pihak ketiga untuk menyediakan abstraksi yang lebih mudah digunakan.

Namun, 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 prioritas yang berbeda, bergantung pada lokasinya yang terkait dengan area pandang perangkat. Gambar di bawah area pandang dimuat dengan prioritas lebih rendah, tetapi akan tetap diambil saat halaman dimuat.

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

<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 tampilan.
• eager: Perilaku pemuatan default browser, yang sama dengan tidak menyertakan atribut dan artinya gambar dimuat terlepas dari lokasinya di halaman. Ini adalah default, tetapi ada baiknya untuk menetapkan secara eksplisit jika alat Anda otomatis menambahkan loading="lazy" jika tidak ada nilai eksplisit, atau jika linter Anda mengeluhkan jika tidak ditetapkan 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. Metode ini tidak memuat gambar lebih cepat daripada gambar lain yang tidak memiliki atribut loading.

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

Gambar dengan loading="lazy" dan fetchpriority="high" masih tertunda saat berada di luar layar, lalu diambil dengan prioritas tinggi saat hampir berada dalam area pandang. Kombinasi ini tidak terlalu diperlukan karena browser kemungkinan akan memuat gambar tersebut dengan prioritas tinggi.

Batas jarak dari area pandang

Semua gambar yang langsung dapat dilihat tanpa men-scroll dimuat secara normal. Gambar yang jauh di bawah area pandang perangkat hanya diambil saat pengguna men-scroll di dekatnya.

Penerapan pemuatan lambat Chromium mencoba memastikan gambar di luar layar dimuat cukup awal sehingga selesai dimuat saat pengguna men-scroll ke gambar dengan mengambilnya 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 default untuk berbagai jenis koneksi efektif di sumber Chromium. Anda dapat bereksperimen dengan nilai minimum yang berbeda ini dengan membatasi jaringan di DevTools.

Penghematan data dan nilai minimum jarak dari area pandang yang ditingkatkan

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

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

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

Anda dapat menemukan perbandingan antara nilai minimum jarak dari area pandang yang lama dengan yang baru untuk salah satu demo kami terkait koneksi cepat (4G) di bawah:

Ambang batas lama versus ambang baru:

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

Memberikan atribut dimensi pada gambar

Meskipun browser memuat gambar, browser tidak segera mengetahui dimensi gambar, kecuali jika ditentukan secara eksplisit. Agar browser mencadangkan ruang yang cukup di halaman untuk gambar dan menghindari 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, tetapkan nilainya secara langsung dalam gaya inline:

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

Praktik terbaik setelan dimensi berlaku untuk tag <img> terlepas dari apakah Anda memuatnya dengan lambat atau tidak, tetapi pemuatan lambat dapat membuatnya lebih penting.

Pemuatan lambat di Chromium diterapkan dengan cara yang membuat gambar lebih mungkin dimuat segera setelah terlihat, tetapi masih ada kemungkinan gambar tidak akan dimuat pada waktu yang tepat. Jika hal itu terjadi, tidak menentukan width dan height pada gambar akan meningkatkan dampaknya pada Pergeseran Tata Letak Kumulatif. Jika Anda tidak dapat menentukan dimensi gambar, pemuatan lambat dapat menghemat resource jaringan dan berisiko mengalami peningkatan pergeseran tata letak.

Dalam sebagian besar skenario, gambar masih dimuat lambat jika Anda tidak menentukan dimensi, tetapi ada beberapa kasus ekstrem yang harus Anda ketahui. Tanpa width dan height yang ditentukan, dimensi gambar akan ditetapkan secara default ke 0×0 piksel. Jika Anda memiliki galeri gambar, browser mungkin memutuskan bahwa semuanya pas di dalam area pandang di awal, karena setiap gambar tidak membutuhkan ruang dan tidak ada gambar yang didorong keluar layar. Dalam hal ini, browser memutuskan untuk memuat semuanya, sehingga halaman dimuat lebih lambat.

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

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

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

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

Selalu muat gambar 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 agar dapat langsung tersedia. Untuk mengetahui informasi selengkapnya, lihat Efek performa dari pemuatan lambat yang terlalu banyak.

Gunakan loading=lazy hanya untuk gambar di luar area tampilan awal. Browser tidak dapat memuat gambar secara lambat hingga mengetahui posisi gambar yang seharusnya di halaman, yang menyebabkan gambar dimuat 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. Hal ini tidak mendapatkan manfaat pemuatan lambat, tetapi tidak ada dampak negatif jika disertakan.

FAQ

Dapatkah saya memuat gambar di Chrome secara otomatis?

Sebelumnya, Chromium akan otomatis memuat gambar apa pun yang cocok untuk ditangguhkan jika Mode ringan diaktifkan di Chrome untuk Android dan atribut loading tidak disediakan atau disetel 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, metode ini mungkin berubah di masa mendatang karena browser bereksperimen dengan jarak dan variabel batas yang berbeda.

Dapatkah gambar latar CSS menggunakan atribut loading?

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

Dapatkah loading berfungsi dengan gambar di area tampilan 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 carousel atau disembunyikan oleh CSS untuk ukuran layar tertentu. Misalnya, Chrome, Safari, dan Firefox tidak memuat gambar menggunakan gaya visual display: none;, baik pada elemen gambar maupun di elemen induk. Namun, teknik penyembunyian gambar lainnya, seperti menggunakan gaya visual opacity:0, masih menyebabkan browser memuat gambar. Selalu uji implementasi Anda secara menyeluruh untuk memastikan implementasinya berfungsi sebagaimana mestinya.

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

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

Dengan dukungan penuh pemuatan lambat yang terintegrasi ke dalam 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 untuk menyediakan polyfill untuk browser yang tidak mendukung atribut, atau memiliki kontrol lebih besar atas kapan pemuatan lambat dipicu.

Bagaimana cara menangani browser yang tidak mendukung pemuatan lambat? {browsers-dont-support}

Buat polyfill atau gunakan library pihak ketiga untuk memuat gambar secara lambat di situs Anda. Anda dapat menggunakan properti loading untuk mendeteksi apakah browser mendukung fitur tersebut:

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

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

• Mengganti <img src> dengan <img data-src> untuk menghindari pemuatan cepat di browser yang tidak didukung. Jika atribut loading didukung, tukar data-src dengan 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 tersebut. 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 secara lambat menggunakan atribut loading. Untuk mengetahui informasi selengkapnya, lihat Saatnya memuat iframe di luar layar secara lambat.

Bagaimana pemuatan lambat tingkat browser memengaruhi iklan di halaman web?

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

Bagaimana gambar ditangani saat halaman 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 dalam pendekatan untuk pemuatan lambat gambar di luar layar yang dapat menggunakan batas yang berbeda, memungkinkannya lulus audit Menunda gambar offscreen.

Pemuatan lambat gambar untuk meningkatkan performa

Dukungan browser untuk pemuatan lambat gambar dapat sangat mempermudah Anda meningkatkan performa halaman.

Apakah Anda melihat adanya perilaku yang tidak wajar pada fitur yang diaktifkan di Chrome ini? Laporkan bug!