Tips terbaik untuk performa web

Gunakan srcset untuk memilih ukuran gambar yang tepat secara otomatis.

Sam Dutton

Menurut HTTP Archive, laman web seluler biasa memiliki berat lebih dari 2,6 MB, dan lebih dari dua pertiganya bobot adalah gambar. Ini adalah peluang besar untuk pengoptimalan!

Ringkasan

• Jangan simpan gambar yang lebih besar dari ukuran layarnya.
• Simpan beberapa ukuran untuk setiap gambar dan gunakan srcset agar browser bisa memilih yang terkecil. Nilai w memberi tahu browser tentang 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 web Anda lebih cepat dan mengurangi kebutuhan data dengan menggunakan gambar dengan dimensi yang sesuai dengan ukuran tampilan. Dengan kata lain, berikan gambar yang serta tinggi dan lebar saat Anda menyimpannya.

Lihat gambar di bawah ini.

Mereka tampak hampir identik, tetapi ukuran {i>file<i} lebih dari 10 kali lebih besar dari yang lain.

Gambar pertama berukuran jauh lebih besar karena disimpan dengan dimensi jauh lebih besar dari ukuran layar. Kedua gambar ditampilkan dengan 300 piksel, jadi masuk akal untuk menggunakan gambar yang disimpan pada ukuran.

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

Namun... bagaimana jika ukuran layar bervariasi?

Dalam dunia multi-perangkat, gambar tidak selalu ditampilkan dalam satu ukuran tetap.

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

...dan bagaimana dengan perangkat yang lapar dengan piksel seperti layar Retina?

Membantu browser memilih ukuran gambar yang tepat

Bukankah lebih bagus jika Anda bisa membuat setiap gambar tersedia dalam berbagai ukuran, kemudian membiarkan browser memilih ukuran terbaik untuk perangkat dan ukuran layar? Sayangnya ada catch-22 untuk mencari gambar mana yang terbaik. Browser harus menggunakan tapi tidak dapat mengetahui lebarnya tanpa mengunduhnya untuk memeriksanya.

Di sinilah srcset menjadi berguna. Anda menyimpan gambar dalam ukuran berbeda, lalu memberi tahu browser tentang 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 adalah 500 selebar piksel. Hal ini memungkinkan browser memilih gambar sekecil mungkin, tergantung pada jenis layar dan ukuran area pandang yang diinginkan—tanpa harus mengunduh gambar untuk memeriksa ukurannya.

Anda dapat melihat cara kerja srcset untuk gambar di bawah ini. Jika Anda menggunakan laptop atau komputer desktop, ubah ukuran jendela browser Anda 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.)

Bagaimana cara membuat beberapa ukuran gambar?

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

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

Menggabungkan pemrosesan gambar dalam proses build Anda

Sebagai bagian dari proses build, Anda bisa menambahkan langkah-langkah untuk membuat untuk semua versi image Anda. Lihat "Menggunakan Imagemin untuk mengompresi gambar" untuk mempelajari lebih lanjut.

Menggunakan layanan gambar

Pembuatan dan penayangan 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 menayangkan berbagai format dan ukuran gambar, bergantung pada URL parameter. 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 "pemangkasan pintar" untuk berbagai ukuran gambar dan otomatis mengirimkan gambar WebP ke browser yang mendukung format tersebut, bukan JPEG—tanpa mengubah file .

Bagaimana jika gambar tidak terlihat benar dalam ukuran yang berbeda?

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

Bagaimana dengan kepadatan piksel?

Perangkat kelas atas memiliki piksel fisik yang lebih kecil (lebih padat). Sebagai contoh, ponsel kelas atas mungkin memiliki dua atau tiga kali lebih banyak piksel di setiap baris {i>pixel<i} sebagai perangkat yang lebih murah.

Hal ini dapat memengaruhi ukuran yang Anda perlukan untuk menyimpan gambar. Kita tidak akan membahas detailnya di sini, tetapi Anda dapat mengetahui lebih banyak dari Codelab "Gunakan deskriptor kepadatan".

Bagaimana dengan ukuran tampilan gambar?

Anda dapat menggunakan sizes agar srcset berfungsi lebih baik.

Tanpa tanda itu, browser akan menggunakan lebar penuh area pandang saat memilih gambar dari srcset. Atribut sizes memberi tahu browser tentang lebar yang elemen gambar akan ditampilkan, sehingga browser dapat memilih ukuran terkecil file gambar—sebelum membuat penghitungan tata letak apa pun.

Pada contoh di bawah, sizes="50vw" memberi tahu browser bahwa gambar ini akan ditampilkan pada 50% dari 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 hanya menggunakan atribut src.

Hal ini membuat srcset dan sizes peningkatan progresif yang bagus.

Pelajari lebih lanjut

Lihat bagian "Mengoptimalkan gambar Anda" web.dev untuk mempelajari lebih dalam tentang pengoptimalan gambar. Untuk panduan gratis, pertimbangkan untuk mencoba Gambar" yang ditawarkan oleh Udacity.