Pramuat gambar responsif

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Anda dapat melakukan pramuat gambar responsif, yang dapat membuat gambar Anda dimuat secara signifikan lebih cepat dengan membantu browser mengidentifikasi gambar yang tepat dari srcset sebelum merender tag img.

Ringkasan gambar responsif

Dukungan Browser

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Misalkan Anda menjelajahi web pada layar dengan lebar 300 piksel dan halaman meminta gambar dengan lebar 1500 piksel. Halaman itu telah membuang banyak waktu seluler Anda data karena layar Anda tidak dapat melakukan apa pun dengan semua resolusi ekstra itu. Idealnya, browser akan mengambil versi gambar yang hanya sedikit. lebih lebar dari ukuran layar Anda, misalnya, 325 piksel. Hal ini memastikan resolusi tinggi tanpa membuang data, dan membuat gambar dimuat lebih cepat.

Gambar responsif membiarkan browser mengambil resource gambar yang berbeda untuk perangkat yang berbeda. Jika Anda tidak menggunakan CDN gambar, simpan beberapa dimensi untuk masing-masing image aplikasi dan menentukannya dalam atribut srcset. Nilai w memberi tahu browser lebar setiap versi, sehingga dapat memilih versi yang sesuai untuk perangkat apa pun:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Ringkasan pramuat

Dukungan Browser

  • Chrome: 50.
  • Edge: ≤79.
  • Firefox: 85.
  • Safari: 11.1.

Sumber

Pramuat memungkinkan Anda memberi tahu browser tentang sumber daya penting yang ingin Anda muat sesegera mungkin, sebelum ditemukan dalam HTML. Hal ini sangat berguna untuk sumber daya yang tidak siap dapat ditemukan, seperti {i>font<i} yang dimasukkan dalam stylesheet, gambar latar, atau resource yang dimuat dari skrip.

<link rel="preload" as="image" href="important.png">

imagesrcset dan imagesizes

Elemen <link> menggunakan atribut imagesrcset dan imagesizes untuk melakukan pramuat gambar responsif. Gunakan bersama <link rel="preload">, dengan sintaksis srcset dan sizes yang digunakan dalam elemen <img>.

Misalnya, jika Anda ingin melakukan pramuat gambar responsif yang ditentukan dengan:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

Anda dapat melakukannya dengan menambahkan kode berikut ke <head> HTML:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

Tindakan ini akan memulai permintaan menggunakan logika pemilihan resource yang sama dengan Penggunaan srcset dan sizes.

Kasus penggunaan

Berikut adalah beberapa kasus penggunaan untuk melakukan pramuat gambar responsif.

Pramuat gambar responsif yang dimasukkan secara dinamis

Bayangkan Anda memuat {i>hero images<i} secara dinamis sebagai bagian dari {i>slideshow<i}, dan Anda mengetahui gambar mana yang akan ditampilkan terlebih dahulu. Dalam hal ini, Anda mungkin ingin tunjukkan gambar itu sesegera mungkin, dan tidak menunggu skrip {i>slideshow<i} untuk memuatnya.

Anda dapat memeriksa masalah ini di situs dengan galeri gambar yang dimuat secara dinamis:

  1. Buka demo slideshow ini di tab baru.
  2. Tekan Control+Shift+J (atau Command+Option+J di Mac) untuk membuka DevTools.
  3. Klik tab Jaringan.
  4. Di menu drop-down Throttling, pilih 3G Cepat.
  5. Nonaktifkan kotak centang Disable cache.
  6. Muat ulang halaman.
Panel Jaringan Chrome DevTools menampilkan waterfall dengan resource JPEG yang mulai didownload setelah beberapa JavaScript.
Tanpa pramuat, gambar mulai dimuat setelah browser selesai menjalankan skrip. Untuk gambar pertama, penundaan tersebut tidak perlu dilakukan.

Menggunakan preload di sini memungkinkan gambar mulai dimuat sebelumnya, sehingga dapat siap ditampilkan saat browser perlu menampilkannya.

Panel Jaringan Chrome DevTools menampilkan waterfall dengan download resource JPEG secara paralel dengan beberapa JavaScript.
Pramuat gambar pertama memungkinkan gambar mulai dimuat bersamaan dengan skrip.

Untuk melihat perbedaan yang dihasilkan oleh pramuat, periksa elemen yang sama yang dimuat secara dinamis galeri gambar, tetapi dengan gambar pertama yang dimuat sebelumnya dengan mengikuti langkah-langkah dari contoh pertama.

Pramuat gambar latar menggunakan kumpulan gambar

Jika memiliki gambar latar yang berbeda untuk kepadatan layar yang berbeda, Anda dapat tentukan di CSS Anda dengan sintaksis image-set. Kemudian browser dapat memilih mana yang akan ditampilkan berdasarkan DPR.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

Masalah dengan gambar latar CSS adalah browser menemukannya hanya setelah kode didownload dan memproses semua CSS di <head> halaman.

Anda dapat memeriksa masalah ini di situs web contoh dengan gambar latar responsif.

Panel Jaringan Chrome DevTools menampilkan waterfall dengan resource JPEG yang mulai didownload setelah CSS tertentu.
Dalam contoh ini, download gambar tidak akan dimulai sampai CSS didownload sepenuhnya, sehingga menyebabkan jeda yang tidak perlu pada tampilan gambar.

Pramuat gambar responsif memungkinkan Anda memuat gambar tersebut lebih cepat.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

Tidak menyertakan atribut href memungkinkan Anda memastikan bahwa browser tidak mendukung imagesrcset di elemen <link>, tetapi mendukung image-set di CSS mendownload sumber yang benar. Namun, mereka tidak akan mendapatkan manfaat dari {i>pramuat<i} di dalam kasus ini.

Anda dapat memeriksa perilaku contoh sebelumnya dengan elemen gambar latar dalam demo pramuat latar belakang responsif.

Panel Network di Chrome DevTools menampilkan waterfall dengan resource JPEG yang didownload di parameter ke beberapa CSS.
Di sini, gambar dan CSS mulai didownload secara bersamaan, sehingga gambar dimuat lebih cepat.

Efek praktis dari melakukan pramuat gambar responsif

Melakukan pramuat gambar responsif dapat mempercepatnya secara teori, tetapi apa fungsinya lakukan dalam praktiknya?

Untuk menjawab bahwa saya membuat dua salinan toko PWA demo: yang tidak melakukan pramuat gambar, dan yang melakukan pramuat beberapa di antaranya. Karena situs lambat memuat gambar menggunakan JavaScript, kemungkinan akan ada manfaat melakukan pramuat yang muncul di area pandang awal.

Hasilnya adalah hasil berikut untuk tidak ada pramuat dan untuk pramuat gambar:

Perbandingan setrip film WebPageTest yang menunjukkan gambar yang dipramuat ditampilkan sekitar 1,5 detik lebih cepat.
Gambar tiba jauh lebih cepat saat dipramuat, sehingga sangat meningkatkan pengalaman pengguna.

Pramuat dan <picture>

{i>Web Performance Working Group<i} sedang mendiskusikan penambahan pramuat yang setara untuk srcset dan sizes, tetapi bukan <picture> , yang menangani "arah seni" kasus penggunaan.

Masih ada sejumlah masalah teknis yang harus diselesaikan untuk pramuat <picture>, tetapi sementara itu, ada solusi:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

Logika pemilihan sumber gambar elemen <picture> berjalan ke media dari elemen <source> secara berurutan, menemukan atribut pertama yang cocok dengan, dan menggunakan sumber daya yang terlampir.

Karena pramuat responsif tidak memiliki konsep "urutan" atau "kecocokan pertama", Anda akan perlu menerjemahkan titik henti sementara menjadi seperti berikut:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

Pramuat dan type

Elemen <picture> juga mendukung pencocokan pada type pertama agar Anda dapat menyediakan format gambar yang berbeda sehingga browser dapat memilih format gambar pertama yang didukungnya. Kasus penggunaan ini tidak didukung dengan pramuat.

Untuk situs yang menggunakan pencocokan jenis, sebaiknya hindari pramuat, dan sebagai gantinya pemindai pramuat mengambil gambar dari Sebagai gantinya, elemen <picture> dan <source>. Bagaimanapun ini adalah praktik terbaik, terutama saat menggunakan Prioritas Ambil untuk membantu memprioritaskan gambar yang sesuai.

Efek pada Largest Contentful Paint (LCP)

Karena gambar dapat menjadi kandidat Largest Contentful Paint (LCP), melakukan pramuatnya dapat meningkatkan LCP situs Anda.

Terlepas dari apakah gambar yang Anda pramuat responsif atau tidak, pramuat tetap berfungsi terbaik jika resource gambar tidak dapat ditemukan di payload markup awal. Anda juga akan mendapatkan lebih banyak peningkatan LCP di situs yang merender markup di klien dibandingkan situs yang mengirim markup lengkap dari server.