Pramuat gambar responsif

Barry Pollard

Yoav Weiss

Dipublikasikan: 30 September 2019, Terakhir diperbarui: 10 Juli 2026

Perhatian: Satu atau beberapa demo di halaman ini tidak lagi berfungsi, karena Glitch telah mengakhiri hosting.

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

Ringkasan gambar responsif

Browser Support

• 73
• 79
• 78
• 17.2

Source

Misalnya, Anda menjelajahi web di layar dengan lebar 300 piksel, dan halaman meminta gambar dengan lebar 1.500 piksel. Halaman tersebut telah menghabiskan banyak data seluler Anda 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 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 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

Browser Support

• 50
• 79
• 85
• 11.1

Source

Pramuat memungkinkan Anda memberi tahu browser tentang resource penting yang ingin Anda muat sesegera mungkin, sebelum resource tersebut ditemukan dalam 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" fetchpriority="high">

Penting: Gambar yang dipramuat mungkin memiliki prioritas tinggi, sehingga harus menyertakan atribut fetchpriority="high". Jika tidak, pramuat akan mendapatkan prioritas default untuk atribut as. Untuk gambar, nilai ini adalah low secara default sehingga browser dapat memprioritaskan konten yang memblokir render daripada gambar. Lihat Mengoptimalkan pemuatan resource dengan Fetch Priority API untuk mengetahui detail selengkapnya.

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

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

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

Peringatan: Gambar responsif mungkin tidak didukung untuk pramuat header HTTP karena area pandang hanya ditentukan saat dokumen dibuat. Hal ini juga berarti bahwa cookie tidak dapat digunakan untuk pramuat awal di 103 Early Hints.

Beberapa browser, seperti Chrome, memproses pramuat dengan atribut tersebut setelah dokumen ditentukan dan setelah memproses bagian pertama HTML. Hal ini telah diusulkan ke standar HTML. Namun, hal ini masih dapat berisiko jika area tampilan didefinisikan ulang nanti dalam dokumen (misalnya, elemen <meta name="viewport"> yang terlambat) karena gambar responsif yang salah mungkin sudah mulai dimuat.

Untuk menghindari masalah, sebaiknya gunakan elemen <link rel="preload" href="..."> untuk gambar responsif, bukan header respons HTTP Link: <...>; rel="preload".

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 mengetahui gambar mana yang akan ditampilkan terlebih dahulu. Dalam hal ini, Anda mungkin ingin menampilkan gambar tersebut sesegera mungkin, dan tidak menunggu skrip slideshow 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 Fast 3G.
5. Hapus centang pada kotak Disable cache.
6. Muat ulang halaman.

Tanpa pramuat, gambar akan mulai dimuat setelah browser selesai menjalankan skrip. Untuk gambar pertama, penundaan tersebut tidak diperlukan.

Penggunaan preload di sini memungkinkan gambar mulai dimuat lebih awal, sehingga dapat siap ditampilkan saat browser perlu menampilkannya.

Pramuat gambar pertama memungkinkan gambar tersebut mulai dimuat bersamaan dengan skrip.

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

Catatan: Cara lain untuk menghindari penundaan pemuatan gambar adalah dengan menggunakan carousel berbasis markup dan meminta pemuat awal browser mengambil resource yang diperlukan. Namun, pendekatan ini tidak selalu praktis, misalnya, jika Anda menggunakan kembali komponen yang ada yang tidak berbasis markup.

Pramuat gambar latar 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 gambar yang akan ditampilkan berdasarkan DPR layar.

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

Catatan: Sintaksis ini mengabaikan kebutuhan fitur ini akan awalan vendor di browser berbasis Chromium dan WebKit. Jika Anda berencana menggunakan fitur ini, pertimbangkan untuk menggunakan Autoprefixer (tersedia sebagai alat online) untuk mengatasinya secara otomatis.

Masalah pada gambar latar CSS adalah browser hanya menemukannya setelah mendownload dan memproses semua CSS di <head> halaman.

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

Dalam contoh ini, download gambar tidak dimulai hingga CSS didownload sepenuhnya, sehingga menyebabkan jeda yang tidak perlu pada tampilan gambar.

Pramuatan gambar responsif memungkinkan Anda memuat gambar tersebut lebih cepat.

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

Dengan menghilangkan 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, mereka tidak akan mendapatkan manfaat dari pramuat dalam kasus ini.

Anda dapat memeriksa perilaku contoh sebelumnya dengan gambar latar responsif yang dipramuat di demo pramuat latar belakang responsif.

Di sini, gambar dan CSS mulai didownload secara bersamaan, sehingga gambar dimuat lebih cepat.

Efek praktis dari melakukan pramuat gambar responsif

Pramuatan gambar responsif dapat mempercepatnya secara teori, tetapi bagaimana praktiknya?

Untuk menjawabnya, saya membuat dua salinan toko PWA demo: satu yang tidak melakukan pramuat gambar, dan satu yang melakukan pramuat beberapa gambar. Karena situs memuat gambar secara lambat menggunakan JavaScript, situs tersebut kemungkinan akan mendapatkan manfaat dari pemuatan awal gambar yang muncul di area pandang awal.

Tindakan tersebut menghasilkan hasil berikut untuk tanpa pramuat dan untuk pramuat gambar:

• Start Render tetap sama.
• Speed Index sedikit meningkat (273 md, karena gambar yang tiba lebih cepat tidak menghabiskan sebagian besar area piksel).
• Last Painted Hero meningkat secara signifikan, sebesar 1,2 detik.

Gambar akan ditampilkan jauh lebih cepat saat dipramuat, sehingga sangat meningkatkan pengalaman pengguna.

Pramuat dan <picture>

Web Performance Working Group sedang membahas penambahan preload yang setara untuk srcset dan sizes, tetapi bukan elemen <picture>, yang menangani kasus penggunaan "pengarahan seni".

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> akan memeriksa atribut media elemen <source> secara berurutan, menemukan elemen pertama yang cocok, dan menggunakan resource yang dilampirkan.

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

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

Pramuat dan type

Elemen <picture> juga mendukung pencocokan pada type pertama, sehingga Anda dapat menyediakan berbagai format gambar agar browser dapat memilih format gambar pertama yang didukungnya.

Kasus penggunaan ini hanya didukung sebagian dengan pramuat: browser hanya boleh mendownload pramuat untuk jenis yang didukung. Jadi, Anda dapat menggunakannya untuk mencegah browser melakukan pramuat jenis mimetype yang tidak didukung dengan menyertakan ini dalam pramuat:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Namun, tidak seperti <picture>, class ini tidak akan berhenti pada jenis pertama yang didukung. Jadi, jika beberapa pramuat disertakan untuk beberapa jenis, semua gambar akan dipramuat:

Jangan lakukan ini — melakukan pramuat beberapa jenis:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

Lakukan ini — pramuat jenis yang paling disukai:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Pramuat format terbaru (AVIF dalam hal ini) berfungsi sebagai progressive enhancement, yang akan menguntungkan browser yang mendukung jenis tersebut, sedangkan browser lain tidak akan mendapatkan manfaat dari pramuat.

Untuk situs yang gambarnya dapat ditemukan dengan cepat di HTML, sebaiknya hindari pramuat, dan gunakan pemindai pramuat untuk mengambil gambar dari elemen <picture> dan <source>. Ini adalah praktik terbaik, terutama saat menggunakan Prioritas Pengambilan untuk membantu memprioritaskan gambar yang sesuai, karena memungkinkan gambar yang tepat dipramuat berdasarkan dukungan browser. Hal ini juga menghilangkan risiko pra-pemuatan menjadi usang dari markup utama saat gambar atau halaman berubah.

Efek pada Largest Contentful Paint (LCP)

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

Terlepas dari apakah gambar yang Anda pramuat bersifat responsif atau tidak, pramuat akan berfungsi paling baik jika 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 di situs yang mengirim markup lengkap dari server.