Halaman ini diterjemahkan oleh Cloud Translation API.

Pramuat gambar responsif

Barry Pollard

Yoav Weiss

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

Ringkasan gambar responsif

Browser Support

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 sedikit lebih lebar dari ukuran layar Anda, misalnya, 325 piksel. Hal ini memastikan gambar beresolusi tinggi tanpa membuang-buang 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

Browser Support

Source

Dengan pramuat, Anda dapat 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 gambar responsif terlebih dahulu. Gunakan bersama <link rel="preload">, dengan sintaksis srcset dan sizes yang digunakan dalam elemen <img>.

Misalnya, jika Anda ingin memuat 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">

Tindakan ini 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.

Memuat gambar responsif yang disisipkan secara dinamis

Bayangkan Anda memuat gambar banner besar secara dinamis sebagai bagian dari slideshow, dan Anda tahu gambar mana yang akan ditampilkan terlebih dahulu. Dalam hal ini, Anda mungkin ingin menampilkan gambar tersebut secepat mungkin, dan tidak menunggu skrip slide memuatnya.

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 (atau Command+Option+J di Mac) untuk membuka DevTools.
Klik tab Jaringan.
Di menu drop-down Throttling, pilih Fast 3G.
Hapus centang pada kotak Nonaktifkan cache.
Muat ulang halaman.

Panel Jaringan Chrome DevTools menampilkan waterfall dengan resource JPEG yang baru mulai didownload setelah beberapa JavaScript. — Tanpa melakukan pra-pemuatan, gambar mulai dimuat setelah browser selesai menjalankan skrip. Untuk gambar pertama, penundaan tersebut tidak diperlukan.

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

Panel Jaringan Chrome DevTools menampilkan waterfall dengan resource JPEG yang didownload secara paralel dengan beberapa JavaScript. — Memuat gambar pertama terlebih dahulu memungkinkan gambar mulai dimuat pada saat yang sama dengan skrip.

Untuk melihat perbedaan yang dihasilkan oleh pra-pemuatan, periksa galeri gambar yang dimuat secara dinamis yang sama, tetapi dengan gambar pertama yang dipra-muat dengan mengikuti langkah-langkah dari contoh pertama.

Memuat gambar latar terlebih dahulu 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 pada 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.

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

Dengan pra-pemuatan gambar responsif, Anda dapat 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 di CSS, akan mendownload sumber yang benar. Namun, mereka tidak akan mendapatkan manfaat dari pemuatan awal dalam kasus ini.

Anda dapat memeriksa perilaku contoh sebelumnya dengan gambar latar responsif yang dimuat sebelumnya di demo pemuatan awal latar responsif.

Panel Jaringan Chrome DevTools menampilkan waterfall dengan resource JPEG yang didownload secara paralel dengan beberapa CSS. — Di sini, gambar dan CSS mulai didownload secara bersamaan, sehingga gambar dapat dimuat lebih cepat.

Efek praktis memuat gambar responsif terlebih dahulu

Memuat ulang gambar responsif secara lebih awal dapat mempercepatnya dalam teori, tetapi apa yang terjadi dalam praktiknya?

Untuk menjawabnya, saya membuat dua salinan toko PWA demo: satu yang tidak memuat gambar terlebih dahulu, dan satu yang memuat beberapa gambar terlebih dahulu. Karena situs memuat gambar dengan lambat menggunakan JavaScript, situs tersebut kemungkinan akan diuntungkan dengan memuat terlebih dahulu gambar yang muncul di area pandang awal.

Hal ini menghasilkan hasil berikut untuk tanpa pramuat dan untuk pramuat gambar:

Mulai Rendering tetap sama.
Speed Index meningkat sedikit (273 md, karena gambar tiba lebih cepat dan tidak memakan sebagian besar area piksel).
Last Painted Hero meningkat secara signifikan, sebesar 1,2 detik.

Perbandingan filmstrip WebPageTest yang menunjukkan bahwa gambar yang dimuat sebelumnya ditampilkan sekitar 1,5 detik lebih cepat. — Gambar dimuat jauh lebih cepat saat di-preload, sehingga meningkatkan pengalaman pengguna secara signifikan.

Pramuat dan `<picture>`

Grup Kerja Performa Web sedang mendiskusikan penambahan fungsi pramuat yang setara untuk srcset dan sizes, tetapi bukan elemen <picture>, yang menangani kasus penggunaan "arah artistik".

Masih ada sejumlah masalah teknis yang harus diselesaikan untuk melakukan pra-pemuatan <picture>, tetapi untuk saat ini, 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> akan memeriksa atribut media elemen <source> secara berurutan, menemukan yang 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 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, sehingga Anda dapat menyediakan format gambar yang berbeda agar browser dapat memilih format gambar pertama yang didukungnya. Kasus penggunaan ini tidak didukung dengan pramuat.

Untuk situs yang menggunakan pencocokan jenis, sebaiknya hindari pra-pemuatan, dan sebagai gantinya, biarkan pemindai pra-pemuatan mengambil gambar dari elemen <picture> dan <source>. Ini adalah praktik terbaik, terutama saat menggunakan Fetch Priority untuk membantu memprioritaskan gambar yang sesuai.

Efek pada Largest Contentful Paint (LCP)

Karena gambar dapat menjadi kandidat Largest Contentful Paint (LCP), memuatnya terlebih dahulu dapat meningkatkan LCP situs Anda.

Terlepas dari apakah gambar yang Anda pramuat responsif atau tidak, pramuat berfungsi paling baik jika resource gambar tidak dapat ditemukan dalam payload markup awal. Anda juga akan mendapatkan peningkatan LCP yang lebih besar di situs yang merender markup di sisi klien daripada di situs yang mengirim markup lengkap dari server.