Anda dapat memuat gambar responsif secara otomatis, yang dapat membuat gambar dimuat
secara signifikan lebih cepat dengan membantu browser mengidentifikasi gambar yang benar
dari srcset
sebelum merender tag img
.
Ringkasan gambar responsif
Dukungan Browser
Misalkan Anda menjelajahi web di layar yang lebarnya 300 piksel, dan halaman meminta gambar dengan lebar 1.500 piksel. Halaman tersebut telah menghabiskan banyak data seluler karena layar Anda tidak dapat melakukan apa pun dengan semua resolusi tambahan tersebut. Idealnya, browser akan mengambil versi gambar yang hanya sedikit lebih lebar dari ukuran layar Anda, misalnya, 325 piksel. Hal ini memastikan gambar beresolusi tinggi tanpa memboroskan data, dan memungkinkan gambar dimuat lebih cepat.
Gambar responsif
memungkinkan browser mengambil resource gambar yang berbeda untuk perangkat yang berbeda. Jika Anda tidak
menggunakan CDN gambar, simpan beberapa dimensi untuk setiap
gambar dan tentukan di atribut srcset
. Nilai w
memberi tahu browser lebar setiap versi, sehingga browser 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 resource penting yang ingin Anda muat sesegera mungkin, sebelum resource tersebut ditemukan di HTML. Hal ini sangat berguna untuk resource yang tidak mudah ditemukan, seperti font yang disertakan dalam stylesheet, gambar latar belakang, 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
memuat ulang 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 yang
digunakan srcset
dan sizes
.
Kasus penggunaan
Berikut adalah beberapa kasus penggunaan untuk memuat ulang gambar responsif.
Pramuat gambar responsif yang dimasukkan secara dinamis
Bayangkan Anda memuat banner besar secara dinamis sebagai bagian dari slideshow, dan Anda tahu gambar mana yang akan ditampilkan terlebih dahulu. Dalam hal ini, sebaiknya tampilkan gambar tersebut sesegera mungkin, tanpa menunggu skrip slideshow dimuat.
Anda dapat memeriksa masalah ini di situs dengan galeri gambar yang dimuat secara dinamis:
- Buka demo slide show 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 Fast 3G.
- Nonaktifkan kotak centang Disable cache.
- Muat ulang halaman.
Penggunaan preload
di sini memungkinkan gambar mulai dimuat terlebih dahulu, sehingga dapat
siap ditampilkan saat browser perlu menampilkannya.
Untuk melihat perbedaan yang dihasilkan pramuat, periksa galeri gambar yang dimuat secara dinamis yang sama, tetapi dengan gambar pertama dimuat sebelumnya dengan mengikuti langkah-langkah dari contoh pertama.
Memuat gambar latar secara offline menggunakan image-set
Jika memiliki gambar latar yang berbeda untuk kepadatan layar yang berbeda, Anda dapat
menentukannya di CSS dengan sintaksis image-set
. Browser kemudian dapat
memilih mana yang akan ditampilkan berdasarkan
DPR layar.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Masalah dengan gambar latar CSS adalah browser hanya menemukannya
setelah mendownload dan memproses semua CSS di <head>
halaman.
Anda dapat memeriksa masalah ini di contoh situs dengan gambar latar belakang responsif.
Pemuatan awal gambar responsif memungkinkan Anda memuat gambar tersebut lebih cepat.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Dengan menghapus atribut href
, Anda dapat memastikan bahwa browser yang tidak
mendukung imagesrcset
pada elemen <link>
, tetapi mendukung image-set
di
CSS mendownload sumber yang benar. Namun, dalam hal ini, mereka tidak akan mendapatkan manfaat dari pramuat.
Anda dapat memeriksa perilaku contoh sebelumnya dengan gambar latar belakang responsif yang dimuat sebelumnya di demo pramuat latar belakang responsif.
Efek praktis dari memuat gambar responsif terlebih dahulu
Memuat gambar responsif secara otomatis dapat mempercepatnya secara teori, tetapi apa yang dilakukannya dalam praktik?
Untuk menjawab bahwa saya membuat dua salinan toko PWA demo: yang tidak melakukan pramuat gambar, dan satu salinan yang memuat beberapa di antaranya. Karena situs lambat memuat gambar menggunakan JavaScript, kemungkinan Anda akan mendapatkan manfaat dari pramuat gambar yang muncul di area pandang awal.
Langkah tersebut memberikan hasil berikut karena tanpa pramuat dan untuk pramuat gambar:
- Start Render tetap sama.
- Indeks Kecepatan sedikit meningkat (273 md, karena gambar yang diterima lebih cepat tidak menghabiskan banyak ruang area piksel).
- Last Painted Hero meningkatkan performa secara signifikan, sebesar 1,2 detik.
Pramuat dan <picture>
Web Performance Working Group sedang membahas penambahan pramuat yang setara untuk
srcset
dan sizes
, tetapi tidak untuk elemen
<picture>
, yang menangani kasus penggunaan
"art direction".
Masih ada sejumlah masalah teknis yang harus diselesaikan untuk melakukan pramuat <picture>
,
tetapi untuk sementara, ada solusinya:
<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>
memeriksa atribut media
dari elemen <source>
secara berurutan, menemukan elemen pertama yang
cocok, dan menggunakan resource yang terlampir.
Karena pramuat responsif tidak memiliki konsep "urutan" atau "kecocokan pertama", Anda harus menerjemahkan titik henti sementara menjadi sesuatu 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 memberikan 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, minta
pemindai pramuat mengambil gambar dari
elemen <picture>
dan <source>
. Ini adalah praktik terbaik,
terutama saat menggunakan Prioritas Pengambilan untuk membantu memprioritaskan
gambar yang sesuai.
Pengaruh pada Largest Contentful Paint (LCP)
Karena gambar dapat menjadi kandidat Largest Contentful Paint (LCP), pramuat gambar dapat meningkatkan LCP situs Anda.
Terlepas dari apakah gambar yang Anda pramuat responsif atau tidak, pramuat akan berfungsi dengan sangat baik saat resource gambar tidak dapat ditemukan di payload markup awal. Anda juga akan mendapatkan lebih banyak peningkatan LCP di situs yang merender markup di sisi klien daripada di situs yang mengirim markup lengkap dari server.