Tips terbaik untuk performa web

Gunakan srcset untuk memilih ukuran gambar yang tepat secara otomatis.

Sam Dutton

Menurut HTTP Archive, halaman web seluler biasa memiliki ukuran lebih dari 2,6 MB, dan lebih dari dua pertiga dari ukuran tersebut adalah gambar. Ini adalah peluang besar untuk pengoptimalan!

Rata-rata byte halaman seluler menurut jenis konten

Ringkasan

  • Jangan simpan gambar yang lebih besar dari ukuran tampilannya.
  • Simpan beberapa ukuran untuk setiap gambar dan gunakan atribut srcset agar browser dapat memilih ukuran 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 lebih cepat dan tidak terlalu banyak menggunakan data dengan menggunakan gambar dengan dimensi yang cocok dengan ukuran tampilan. Dengan kata lain, berikan lebar dan tinggi yang tepat saat Anda menyimpannya.

Lihat gambar di bawah.

Keduanya terlihat hampir identik, tetapi ukuran file salah satunya lebih dari 10 kali lebih besar daripada yang lain.

Little Puss dan Lias: dua anak kucing tabby berusia sepuluh minggu.
Lebar 1.000 piksel tersimpan, ukuran file 184 KB
Little Puss dan Lias: dua anak kucing loreng berusia sepuluh minggu.
Lebar tersimpan 300 px, ukuran file 16 KB

Ukuran file gambar pertama jauh lebih besar karena disimpan dengan dimensi yang jauh lebih besar dari ukuran tampilan. Kedua gambar ditampilkan dengan lebar tetap sebesar 300 piksel, sehingga wajar untuk menggunakan gambar yang disimpan dalam 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 dengan ukuran tampilan gambar yang 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 bagus jika Anda dapat menyediakan setiap gambar dalam ukuran yang berbeda, lalu membiarkan browser memilih ukuran terbaik untuk perangkat dan ukuran tampilan? Sayangnya, ada catch-22 dalam menentukan gambar mana yang terbaik. Browser harus menggunakan gambar terkecil, tetapi tidak dapat mengetahui lebar gambar tanpa mendownloadnya untuk memeriksa.

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 lebar small.jpg adalah 500 piksel. Hal ini memungkinkan browser memilih gambar terkecil, bergantung pada jenis layar dan ukuran area pandang—tanpa harus mendownload gambar untuk memeriksa ukurannya.

Anda dapat melihat cara kerja srcset untuk gambar di bawah. Jika Anda menggunakan laptop atau komputer desktop, ubah ukuran jendela browser dan buka kembali halaman ini. Kemudian gunakan panel Network pada 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.)

Lias dan Little Puss: dua anak kucing tabby abu-abu berusia sepuluh minggu

Bagaimana cara membuat beberapa ukuran gambar?

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

Untuk gambar satu kali seperti gambar utama, Anda dapat menyimpan ukuran yang berbeda secara manual. Jika Anda memiliki banyak gambar, seperti foto produk, Anda harus melakukan otomatisasi. Untuk itu, ada dua pendekatan.

Menyertakan pemrosesan gambar dalam proses build

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

Menggunakan layanan gambar

Pembuatan dan pengiriman gambar dapat diotomatiskan menggunakan layanan komersial seperti Cloudinary, atau 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 berbagai format dan ukuran gambar, bergantung pada parameter URL. Misalnya, buka contoh gambar 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 secara otomatis mengirimkan gambar WebP ke browser yang mendukung format tersebut, bukan JPEG—tanpa mengubah ekstensi file.

Chrome DevTools menampilkan header jenis konten WebP untuk file yang ditayangkan oleh Cloudinary

Bagaimana jika gambar tidak terlihat benar pada ukuran yang berbeda?

Dalam hal ini, Anda harus menggunakan elemen <picture> untuk "arah gambar": yang menyediakan pemangkasan gambar atau gambar yang berbeda dalam ukuran yang berbeda. Untuk mempelajari lebih lanjut, lihat codelab "Art direction".

Bagaimana dengan kepadatan piksel?

Perangkat kelas atas memiliki piksel fisik yang lebih kecil (lebih padat). Misalnya, ponsel kelas atas mungkin memiliki piksel dua atau tiga kali lebih banyak 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 di sini, tetapi Anda dapat mengetahui informasi selengkapnya dari codelab "Menggunakan deskriptor kepadatan".

Bagaimana dengan ukuran tampilan gambar?

Anda dapat menggunakan sizes agar srcset berfungsi lebih baik.

Tanpanya, browser akan menggunakan lebar penuh area pandang saat memilih gambar dari srcset. Atribut sizes memberi tahu browser lebar elemen gambar yang akan ditampilkan, sehingga browser dapat memilih file gambar yang sekecil mungkin sebelum membuat penghitungan tata letak.

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

<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 "Optimalkan gambar Anda" di web.dev untuk mempelajari pengoptimalan gambar secara lebih mendalam. Untuk pengalaman yang lebih terpandu, coba kursus "Gambar Responsif" gratis yang ditawarkan oleh Udacity.