Gunakan srcset untuk memilih ukuran gambar yang tepat secara otomatis.
Menurut HTTP Archive, halaman web seluler biasa memiliki ukuran lebih dari 2,6 MB, dan lebih dari dua pertiga ukuran tersebut adalah gambar. Ini adalah peluang besar untuk pengoptimalan.
Ringkasan
- Jangan menyimpan gambar yang lebih besar dari ukuran tampilannya.
- Simpan beberapa ukuran untuk setiap gambar dan gunakan atribut
srcsetagar browser dapat memilih ukuran terkecil. Nilaiwmemberi 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 menyimpan gambar.
Lihat gambar di bawah ini.
Keduanya terlihat hampir identik, tetapi ukuran file salah satunya lebih dari 10 kali lebih besar daripada yang lain.
Ukuran file gambar pertama 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 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 saat 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 small.jpg memiliki lebar 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 Jaringan 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 gambar utama, Anda dapat menyimpan ukuran yang berbeda secara manual. Jika 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 serta 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.
Bagaimana jika gambar tidak terlihat benar pada ukuran yang berbeda?
Dalam hal ini, Anda harus menggunakan elemen <picture> untuk "art direction":
menyediakan gambar atau pemangkasan 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 rapat). 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 diperlukan untuk menyimpan gambar. Kita tidak akan membahas detail yang mendetail di sini, tetapi Anda dapat mengetahui 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 pandang saat memilih
gambar dari srcset. Atribut sizes memberi tahu browser lebar tempat elemen gambar 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 lebih lanjut. Untuk pengalaman yang lebih terpandu, coba kursus "Gambar Responsif" gratis yang ditawarkan oleh Udacity.