Tips terbaik untuk performa web

Gunakan srcset untuk memilih ukuran gambar yang tepat secara otomatis.

Sam Dutton

Menurut Arsip HTTP, halaman web seluler standar memiliki berat lebih dari 2,6 MB, dan lebih dari dua pertiga berat tersebut adalah gambar. Peluang ini bagus untuk pengoptimalan.

Ringkasan

• Jangan menyimpan 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 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 tidak terlalu membutuhkan data dengan menggunakan gambar dengan dimensi yang sesuai dengan ukuran tampilan. Dengan kata lain, saat Anda menyimpannya, lebar dan tinggi gambar akan dibuat.

Lihat gambar di bawah ini.

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

Gambar pertama ukurannya jauh lebih besar karena disimpan dengan dimensi yang jauh lebih besar dari ukuran tampilan. 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 seperti ukuran tampilan.

Namun... bagaimana jika ukuran tampilan bervariasi?

Dalam dunia multiperangkat, gambar tidak selalu ditampilkan pada 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 boros piksel seperti layar Retina?

Membantu browser memilih ukuran gambar yang tepat

Bukankah lebih bagus jika Anda dapat menyediakan setiap gambar dalam berbagai ukuran, lalu mengizinkan browser memilih ukuran terbaik untuk perangkat dan ukuran layar? Sayangnya, ada catch-22 untuk menentukan gambar mana yang terbaik. Browser harus menggunakan gambar sekecil mungkin, tetapi tidak bisa mengetahui lebar gambar tanpa mendownloadnya untuk memeriksanya.

Di sinilah srcset menjadi berguna. Anda menyimpan gambar dalam berbagai ukuran, 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 memiliki lebar 500 piksel. Dengan begitu, browser dapat memilih gambar sekecil mungkin, 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 ini. 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 image mana yang digunakan. (Anda harus melakukannya di jendela Samaran atau Pribadi. Jika tidak, file gambar asli akan disimpan dalam 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, Anda harus melakukan otomatisasi. Untuk melakukannya, ada dua pendekatan.

Memasukkan pemrosesan gambar dalam proses build

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

Menggunakan layanan gambar

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

Anda mengupload gambar beresolusi tinggi, dan layanan gambar akan otomatis membuat serta mengirimkan berbagai format dan ukuran gambar 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 "smart pemangkasan" untuk berbagai ukuran gambar dan secara otomatis mengirimkan gambar WebP ke browser yang mendukung format tersebut, bukan JPEG—tanpa mengubah ekstensi file.

Bagaimana jika gambar terlihat tidak pas pada berbagai ukuran?

Dalam hal ini, Anda harus menggunakan elemen <picture> untuk "arah seni": menyediakan gambar atau pemangkasan gambar yang berbeda dengan 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). 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 menakjubkan di sini, tetapi Anda dapat mengetahui informasi lebih lanjut dari codelab "Menggunakan deskripsi kepadatan".

Bagaimana dengan ukuran tampilan gambar?

Anda dapat menggunakan sizes untuk membuat srcset berfungsi lebih baik.

Tanpanya, browser akan menggunakan lebar penuh area tampilan saat memilih gambar dari srcset. Atribut sizes memberi tahu browser tentang lebar bahwa elemen gambar akan ditampilkan, sehingga browser dapat memilih file gambar sekecil mungkin—sebelum membuat perhitungan tata letak.

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 menggunakan atribut src saja.

Hal ini membuat srcset dan sizes penyempurnaan progresif yang luar biasa.

Pelajari lebih lanjut

Lihat bagian "Mengoptimalkan gambar Anda" di web.dev untuk mempelajari pengoptimalan gambar secara lebih mendalam. Untuk pengalaman yang lebih dipandu, pertimbangkan untuk mencoba kursus "Responsive Images" gratis yang ditawarkan oleh terang.