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
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
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:
- Buka demo slideshow ini di tab baru.
- Tekan
Control+Shift+J
(atauCommand+Option+J
di Mac) untuk membuka DevTools. - Klik tab Jaringan.
- Di menu drop-down Throttling, pilih 3G Cepat.
- Nonaktifkan kotak centang Disable cache.
- Muat ulang halaman.
Menggunakan preload
di sini memungkinkan gambar mulai dimuat sebelumnya, sehingga dapat
siap ditampilkan saat browser perlu menampilkannya.
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.
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.
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:
- Mulai Render tetap sama.
- Indeks Kecepatan sedikit ditingkatkan (273 md, karena gambar datang lebih cepat tidak memakan banyak waktu area piksel).
- Pahlawan yang Terakhir Dicat meningkat secara signifikan, yakni 1,2 detik.
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.