Terlepas dari seberapa jauh Anda mempelajari cara mendesain dan mengembangkan untuk web, elemen <img> hanya memerlukan sedikit pengenalan.
Diluncurkan di Netscape (“Mosaic”, saat itu) pada tahun 1993 dan ditambahkan ke spesifikasi
HTML pada tahun 1995, <img> telah lama memainkan peran yang sederhana namun kuat di dalam platform web. Developer menambahkan file gambar "sumber" dengan atribut src dan memberikan alternatif teks dengan atribut alt jika gambar tidak dapat dirender atau
teknologi pendukung meminta alternatif. Setelah itu, browser hanya memiliki satu tugas: mendapatkan data gambar, lalu merendernya secepat mungkin.
Dalam sebagian besar riwayat pengembangan web, bekerja dengan gambar tidak menjadi lebih rumit dari itu. Selain itu, meskipun web modern sangat kompleks, dasar-dasar penggunaan gambar tidak berubah: gunakan format gambar yang mobile-friendly untuk kompatibilitas, kompresi yang logis guna menghemat bandwidth, dan dimensi yang sesuai dengan ruang yang akan ditempati gambar dalam tata letak halaman.
Menggunakan tata letak dengan lebar tetap, seperti yang kami lakukan pada saat kami merasa lebih berpendapat tentang pengalaman pengguna terhadap web, membuat proses ini menjadi proses yang tidak rumit. Sangat mudah untuk menyetel ukuran sumber gambar. Untuk gambar yang menempati ruang dengan lebar lima ratus piksel dan tinggi tiga ratus piksel, ini adalah kasus penentuan gambar sumber dengan ukuran yang sama.
Gambar dalam tata letak responsif
Di samping tata letak yang fleksibel dan penggunaan kueri media CSS, "gambar dan media yang fleksibel" adalah salah satu dari tiga faset yang menentukan
desain web responsif. Agar gambar fleksibel, developer mulai menggunakan CSS untuk menyetel max-width: 100% pada gambar
(atau semua gambar, di seluruh situs) untuk memberi tahu mesin rendering browser agar gambar tidak melebihi penampung induknya
dengan memperkecil gambar. Secara visual, cara ini berfungsi dengan sempurna–menskalakan gambar raster secara visual berjalan lancar. Dengan satu atau dua baris CSS,
gambar yang diperkecil akan selalu terlihat seolah-olah kita telah menentukan sumber gambar yang dimaksudkan untuk ditampilkan dengan ukuran tersebut.
Saat mesin rendering diberi data gambar lebih banyak dari yang diperlukan untuk ruang yang ditempati gambar dalam tata letak, mesin rendering dapat
membuat keputusan yang tepat tentang cara merender gambar yang dikurangi, dan dapat melakukannya tanpa menyebabkan artefak visual atau pemburaman.
Biasanya Anda tidak ingin meningkatkan gambar—yaitu, merender <img> pada ukuran yang lebih besar dari ukuran intrinsik gambar sumber.
Gambar yang ditampilkan akan tampak buram dan terlihat berbintik.
Menggunakan img { max-width: 100% } berarti saat ukuran container fleksibel berubah, gambar akan diperkecil sesuai kebutuhan.
Tidak seperti menyetel width: 100% yang lebih kaku, tindakan ini juga memastikan gambar tidak akan ditingkatkan skalanya melebihi ukuran intrinsiknya.
Sejak lama, itulah aturan dalam menggunakan gambar: gunakan format yang dipahami browser, gunakan tingkat kompresi yang wajar, dan jangan pernah menaikkan skala gambar.
Namun, meskipun pendekatannya sederhana dan efektif secara visual, hal ini membutuhkan biaya performa yang sangat besar. Karena <img> hanya mendukung
satu sumber untuk data gambar, pendekatan ini mengharuskan kami menyediakan aset gambar dengan ukuran intrinsik sebesar
ukuran terbesar yang dapat ditampilkan. Gambar yang dimaksudkan untuk menempati ruang dalam tata letak yang dapat berkisar dari
300px hingga lebar 2000px, bergantung pada ukuran area tampilan pengguna, memerlukan sumber gambar dengan lebar intrinsik
minimal 2000px. Bagi pengguna yang hanya melihat halaman melalui area pandang kecil, semuanya akan terlihat seperti yang diharapkan—gambar akan diskalakan dengan baik. Pada halaman yang dirender, gambar sumber yang berukuran besar tetapi diperkecil akan terlihat sama seperti
gambar yang berukuran sesuai. Namun, mereka tetap akan mentransfer dan merender gambar lebar 2000px, menghabiskan
bandwidth dan daya pemrosesan yang sangat besar tanpa manfaat nyata.
Semuanya menjadi jauh lebih buruk dengan hadirnya perangkat "Retina" pertama, karena kepadatan tampilan menjadi kekhawatiran terkait ukuran area pandang. Sumber gambar memerlukan lebar intrinsik yang jauh lebih besar agar sesuai dengan tampilan kepadatan tinggi. Secara sederhana, tampilan dengan kepadatan dua kali lipat memerlukan piksel gambar dua kali lebih banyak untuk merender gambar setajam mungkin.
Di sini, developer kembali dapat mengandalkan kemampuan mesin rendering untuk memperkecil gambar secara visual. Dengan memberi browser
gambar sumber lebar 800px di src, lalu menentukan bahwa gambar tersebut harus ditampilkan pada lebar 400px bersama CSS, hasilnya adalah gambar
yang dirender dengan kepadatan piksel dua kali lipat:
Gambar sumber tunggal, yang dipotong agar sesuai dengan ruang terbesar di tata letak dan layar berkepadatan tinggi, tentu saja berfungsi untuk semua pengguna secara visual. Sumber gambar besar beresolusi tinggi yang dirender pada layar kecil dengan kepadatan rendah akan terlihat seperti gambar kecil berkepadatan rendah lainnya, tetapi terasa jauh lebih lambat. Pengguna akan dibiarkan menanggung semua biaya kinerja sumber gambar besar selebar 4.000 px tersebut, tanpa manfaat apa pun.
Untuk waktu yang lama, <img> melakukan banyak hal, yaitu "mengambil data gambar dan menampilkannya di layar". Memang cukup baik, tetapi <img> tidak dapat mengakomodasi perubahan radikal dalam konteks penjelajahan yang kita alami. Meskipun desain web responsif
menjadi praktik pengembangan umum, browser mengoptimalkan performa img selama hampir dua puluh tahun—tetapi untuk semua pengguna kecuali pengguna yang paling
memiliki hak istimewa, konten gambar halaman tidak efisien sejak awal. Tidak peduli seberapa cepat browser berhasil meminta, mengurai, dan merender
sumber gambar, aset tersebut mungkin akan jauh lebih besar daripada yang dibutuhkan pengguna.