Halaman ini diterjemahkan oleh Cloud Translation API.

Pramuat gambar responsif

Barry Pollard

Yoav Weiss

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

Dukungan Browser

Sumber

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 (atau Command+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.

Panel Jaringan Chrome DevTools menampilkan waterfall dengan resource JPEG yang baru mulai didownload setelah beberapa JavaScript. — 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 terlebih dahulu, sehingga dapat siap ditampilkan saat browser perlu menampilkannya.

Panel Network pada Chrome DevTools menampilkan waterfall dengan resource JPEG yang didownload secara paralel dengan beberapa JavaScript. — Dengan memuat gambar pertama secara otomatis, gambar tersebut akan mulai dimuat bersamaan dengan skrip.

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.

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

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.

Panel Network 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 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.

Perbandingan filmstrip WebPageTest yang menunjukkan gambar yang dimuat sebelumnya ditampilkan sekitar 1,5 detik lebih cepat. — Gambar muncul jauh lebih cepat saat dimuat sebelumnya, sehingga sangat meningkatkan pengalaman pengguna.

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.