Tips terbaik untuk performa web

Gunakan srcset untuk otomatis memilih ukuran gambar yang tepat.

Sam Dutton

Menurut HTTP Archive, halaman web seluler biasa berukuran lebih dari 2,6 MB, dan lebih dari dua pertiga ukuran tersebut adalah gambar. Itu adalah peluang bagus untuk pengoptimalan.

Ringkasan

• Jangan menyimpan gambar yang lebih besar dari ukuran tampilannya.
• Simpan beberapa ukuran untuk setiap gambar dan gunakan atribut srcset untuk memungkinkan browser memilih yang terkecil. Nilai w memberi tahu browser lebar setiap versi:

<img src="small.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="…">

Menyimpan gambar dengan ukuran yang tepat

Anda dapat membuat situs Anda lebih cepat dan tidak terlalu banyak menggunakan data dengan menggunakan gambar yang dimensinya sesuai dengan ukuran tampilan. Dengan kata lain, berikan lebar dan tinggi yang tepat pada gambar saat Anda menyimpannya.

Lihat gambar di bawah.

Keduanya tampak hampir identik, tetapi ukuran file yang satu lebih dari 10 kali lebih besar daripada yang lain.

Ukuran file gambar pertama jauh lebih besar karena disimpan dengan dimensi yang jauh lebih besar daripada ukuran layar. Kedua gambar ditampilkan dengan lebar tetap 300 piksel, jadi sebaiknya gunakan gambar yang disimpan dengan ukuran yang sama.

Untuk lebar tetap, gunakan gambar yang disimpan dengan dimensi yang sama dengan ukuran tampilan.

Namun… bagaimana jika ukuran layar bervariasi?

Dalam dunia multiperangkat, gambar tidak selalu ditampilkan dalam satu ukuran tetap.

Elemen gambar mungkin memiliki lebar persentase, atau menjadi bagian dari tata letak responsif tempat ukuran tampilan gambar berubah agar sesuai dengan ukuran layar.

…dan bagaimana dengan perangkat yang membutuhkan banyak piksel seperti layar Retina?

Membantu browser memilih ukuran gambar yang tepat

Bukankah akan lebih baik jika Anda dapat menyediakan setiap gambar dalam berbagai ukuran, lalu membiarkan browser memilih ukuran terbaik untuk perangkat dan ukuran tampilan? Sayangnya, ada catch-22 terkait menentukan gambar mana yang terbaik. Browser harus menggunakan gambar sekecil mungkin, tetapi browser tidak dapat mengetahui lebar gambar tanpa mendownloadnya untuk diperiksa.

Di sinilah srcset menjadi berguna. Anda menyimpan gambar dalam berbagai ukuran, lalu memberi tahu browser lebar setiap versi:

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     alt="…">

Nilai w menunjukkan lebar setiap gambar dalam piksel. Misalnya, small.jpg 500w memberi tahu browser bahwa small.jpg memiliki lebar 500 piksel. Hal ini memungkinkan browser memilih gambar terkecil yang mungkin, bergantung pada jenis layar dan ukuran area tampilan—tanpa harus mendownload gambar untuk memeriksa ukurannya.

Anda dapat melihat cara kerja srcset pada gambar di bawah. Jika Anda menggunakan laptop atau komputer desktop, ubah ukuran jendela browser Anda dan buka kembali halaman ini. Kemudian, gunakan panel Network di alat browser Anda untuk memeriksa gambar mana yang digunakan. (Anda harus melakukannya di jendela Samaran atau Pribadi, jika tidak, file gambar asli akan di-cache.)

Bagaimana cara membuat beberapa ukuran gambar?

Anda harus menyediakan beberapa ukuran untuk setiap gambar yang ingin digunakan dengan srcset.

Untuk gambar sekali pakai seperti gambar utama, Anda dapat menyimpan berbagai ukuran secara manual. Jika Anda memiliki banyak gambar, seperti foto produk, Anda harus melakukan otomatisasi. Untuk itu, ada dua pendekatan.

Menggabungkan pemrosesan gambar dalam proses build Anda

Sebagai bagian dari proses build, Anda dapat menambahkan langkah-langkah untuk membuat versi gambar dengan ukuran yang berbeda. Lihat "Gunakan Imagemin untuk mengompresi gambar" untuk mempelajari lebih lanjut.

Menggunakan layanan gambar

Pembuatan dan penayangan gambar dapat diotomatiskan menggunakan layanan komersial seperti Cloudinary, atau layanan open source yang setara seperti Thumbor yang Anda instal dan jalankan sendiri.

Anda mengupload gambar beresolusi tinggi, dan layanan gambar akan otomatis membuat dan mengirimkan format dan ukuran gambar yang berbeda, bergantung pada parameter URL. Sebagai contoh, buka gambar contoh ini di Cloudinary dan coba ubah nilai w atau ekstensi file di kolom URL.

Layanan gambar juga memiliki fitur yang lebih canggih seperti kemampuan untuk mengotomatiskan "pemangkasan cerdas" untuk berbagai ukuran gambar dan otomatis mengirimkan gambar WebP ke browser yang mendukung format tersebut, bukan JPEG—tanpa mengubah ekstensi file.

Bagaimana jika gambar tidak terlihat benar pada ukuran yang berbeda?

Dalam hal ini, Anda harus menggunakan elemen <picture> untuk "arah artistik": menyediakan gambar atau pangkasan gambar yang berbeda pada ukuran yang berbeda. Untuk mempelajari lebih lanjut, lihat codelab "Arahan artistik".

Bagaimana dengan kepadatan piksel?

Perangkat kelas atas memiliki piksel fisik yang lebih kecil (lebih padat). Misalnya, ponsel kelas atas mungkin memiliki dua atau tiga kali lebih banyak piksel di setiap baris piksel dibandingkan perangkat yang lebih murah.

Hal ini dapat memengaruhi ukuran yang Anda perlukan untuk menyimpan gambar. Kita tidak akan membahas detail berdarah-darah di sini, tetapi Anda dapat mengetahui lebih lanjut dari codelab "Menggunakan deskriptor kepadatan".

Bagaimana dengan ukuran tampilan gambar?

Anda dapat menggunakan sizes untuk membuat srcset berfungsi lebih baik.

Tanpa atribut ini, browser akan menggunakan lebar penuh area tampilan saat memilih gambar dari srcset. Atribut sizes memberi tahu browser lebar elemen gambar yang akan ditampilkan, sehingga browser dapat memilih file gambar terkecil yang mungkin—sebelum melakukan perhitungan tata letak.

Pada contoh di bawah, sizes="50vw" memberi tahu browser bahwa gambar ini akan ditampilkan pada 50% lebar viewport.

<img src="small.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="50vw"
     alt="…">

Anda dapat melihat cara kerjanya di simpl.info/sizes dan codelab "Menentukan beberapa lebar slot".

Bagaimana dengan dukungan browser?

srcset dan sizes didukung oleh lebih dari 90% browser secara global.

Jika browser tidak mendukung srcset atau sizes, browser akan kembali menggunakan atribut src saja.

Hal ini membuat srcset dan sizes menjadi peningkatan progresif yang luar biasa.

Pelajari lebih lanjut

Lihat bagian "Mengoptimalkan gambar" di web.dev untuk mempelajari pengoptimalan gambar lebih dalam. Untuk pengalaman yang lebih terpandu, pertimbangkan untuk mencoba kursus "Gambar Responsif" gratis yang ditawarkan oleh Udacity.