Anda dapat melakukan pramuat gambar responsif, yang dapat memungkinkan gambar Anda dimuat
secara signifikan lebih cepat dengan membantu browser mengidentifikasi gambar yang benar
dari srcset sebelum merender tag img.
Ringkasan gambar responsif
Dukungan Browser
- 73
- 79
- 78
- 17,2
Misalkan Anda menjelajahi web pada layar yang lebarnya 300 piksel dan halaman meminta gambar selebar 1.500 piksel. Halaman itu membuang banyak data seluler karena layar tidak dapat melakukan apa pun dengan resolusi ekstra. 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 membuang 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 dalam atribut srcset. Nilai w memberi tahu
browser tentang 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 ditemukan di HTML. Hal ini sangat berguna untuk resource yang tidak mudah ditemukan, seperti font yang disertakan 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
pramuat gambar responsif. Gunakan keduanya 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 melakukan pramuat 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 Anda menampilkan gambar tersebut sesegera mungkin, tidak menunggu skrip slideshow 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+Jdi Mac) untuk membuka DevTools. - Klik tab Network
- Di menu drop-down Throttling, pilih Fast 3G.
- Nonaktifkan kotak centang Disable cache.
- Muat ulang halaman.
Menggunakan preload di sini akan memungkinkan gambar mulai dimuat lebih awal, sehingga dapat
siap ditampilkan saat browser perlu menampilkannya.
Untuk melihat perbedaan yang dihasilkan pramuat, periksa galeri gambar yang dimuat secara dinamis dan dengan gambar pertama yang dimuat sebelumnya dengan mengikuti langkah-langkah dari contoh pertama.
Pramuat gambar latar menggunakan image-set
Jika Anda memiliki gambar latar yang berbeda untuk kepadatan layar yang berbeda, Anda dapat
menentukannya di CSS dengan sintaksis image-set. Selanjutnya, browser dapat
memilih yang akan ditampilkan berdasarkan
DPR layar.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Masalah pada gambar latar CSS adalah browser menemukannya hanya setelah mendownload dan memproses semua CSS di <head> halaman.
Anda dapat memeriksa masalah ini di situs contoh dengan gambar latar yang responsif.
Pramuat gambar responsif memungkinkan Anda memuat gambar tersebut lebih cepat.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Dengan tidak menyertakan atribut href, Anda dapat memastikan bahwa browser yang tidak
mendukung imagesrcset pada elemen <link>, tetapi mendukung image-set dalam
CSS akan mendownload sumber yang benar. Namun, dalam kasus ini, mereka tidak akan mendapatkan manfaat dari pramuat.
Anda dapat memeriksa perilaku contoh sebelumnya dengan gambar latar responsif bawaan dalam demo pramuat latar belakang responsif.
Efek praktis dari pramuat gambar responsif
Melakukan pramuat gambar responsif dapat mempercepatnya secara teori, tetapi apa praktiknya?
Untuk menjawabnya, saya membuat dua salinan toko PWA demo: yang tidak melakukan pramuat gambar, dan yang menjalankan pramuat sebagian. Karena situs memuat gambar lambat menggunakan JavaScript, kemungkinan akan ada manfaatnya dengan memuat gambar yang muncul di area tampilan awal.
Perintah ini menghasilkan hasil berikut untuk tanpa pramuat dan untuk pramuat gambar:
- Start Render tetap sama.
- Indeks Kecepatan sedikit meningkat (273 md, karena gambar yang tiba lebih cepat tidak memenuhi bagian besar area piksel).
- Last Painted Hero meningkat secara signifikan, sebesar 1,2 detik.
Pramuat dan <picture>
Web Performance Working Group sedang membahas penambahan pramuat yang setara untuk srcset dan sizes, tetapi bukan elemen <picture>, yang menangani kasus penggunaan "arah seni".
Masih ada sejumlah masalah teknis yang harus diselesaikan untuk melakukan pramuat <picture>,
tetapi sementara itu, ada solusi yang dapat dilakukan:
<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> akan memeriksa atribut media
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, untuk memungkinkan Anda
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 minta
pemindai pramuat untuk mengambil gambar dari
elemen <picture> dan <source>. Ini adalah praktik terbaik,
terutama saat menggunakan Petunjuk Prioritas untuk mendapatkan bantuan dalam memprioritaskan
gambar yang sesuai.
Efek pada Largest Contentful Paint (LCP)
Karena gambar dapat berupa kandidat Largest Contentful Paint (LCP), pramuat gambar tersebut dapat meningkatkan LCP situs Anda.
Terlepas dari apakah gambar yang Anda pramuat responsif atau tidak, pramuat berfungsi paling baik saat resource gambar tidak dapat ditemukan dalam payload markup awal. Anda juga akan mendapatkan lebih banyak peningkatan LCP di situs yang merender markup di sisi klien, daripada situs yang mengirim markup lengkap dari server.