Dimensi gambar di HTML ditentukan lewat atribut width dan height pada tag img. Keduanya ditulis dalam piksel tanpa satuan, dan nilainya sebaiknya sama dengan dimensi asli berkas gambar. Peramban memakai angka itu untuk memesan ruang sebelum gambar selesai diunduh, sehingga tata letak tidak bergeser saat gambarnya muncul.
Yang perlu dipahami sejak awal: dimensi di HTML berbeda dari dimensi berkas. Atribut width dan height memberi tahu peramban berapa ruang yang harus disediakan. Ukuran berkas gambar sendiri, yaitu jumlah piksel yang benar-benar tersimpan, ditentukan saat gambar disiapkan dengan tool seperti Kompres Foto. Dua hal ini sering tertukar, dan ketertukaran itulah yang membuat banyak halaman tetap bergeser meskipun gambarnya sudah dikompres.
Artikel ini panduan kode, bukan fitur tool. Tool di layanan ini bekerja pada berkas: memperkecil dimensi, menurunkan mutu, mengubah format, dan menghapus metadata. Atribut di HTML ditulis di template halaman.
Cara menulis atribut yang benar
Bentuk dasarnya seperti ini:
<img src="foto-produk.webp" alt="Produk tampak depan" width="800" height="600">
Angka 800 dan 600 adalah dimensi asli berkas gambar dalam piksel. Peramban menghitung rasio dari keduanya, yaitu 4 banding 3, lalu memakai rasio itu untuk memesan ruang di halaman. Selama rasio itu benar, ruang yang dipesan akan sama dengan ruang yang dipakai gambar setelah dimuat.
Nilai atribut tidak perlu memakai satuan. Menulis width="800px" tidak salah secara tampilan di sebagian peramban, tetapi tidak sesuai spesifikasi dan sebaiknya dihindari. Tulis angkanya saja.
Kalau gambar punya ukuran asli yang tidak diketahui, buka berkasnya dengan aplikasi penampil gambar atau periksa propertinya. Di Windows, klik kanan berkas lalu pilih Properties. Di Mac, pilih berkas lalu tekan Command dan I.
Kenapa rasio lebih penting daripada ukuran
Yang dipakai peramban untuk memesan ruang adalah rasio, bukan ukuran mutlaknya. Atribut width="800" height="600" memberi rasio 4 banding 3. Atribut width="400" height="300" memberi rasio yang sama, dan ruang yang dipesan juga sama setelah CSS menentukan lebar tampilnya.
Karena itu, menulis angka yang berbeda dari ukuran asli tidak selalu salah, selama rasionya tetap. Yang tidak boleh adalah menulis rasio yang salah, misalnya width="800" height="500" untuk gambar yang rasionya 4 banding 3. Peramban akan memesan ruang dengan bentuk yang salah, dan tata letak tetap bergeser saat gambarnya muncul.
Cara paling aman adalah menulis dimensi asli berkas. Angka itu selalu benar, dan CSS yang mengatur ukuran tampilnya. Kalau dimensi asli berubah karena gambar diperkecil, perbarui angkanya supaya tetap cocok.
Peran CSS dalam ukuran tampil
Atribut width dan height menentukan ruang yang dipesan. Ukuran tampil yang sebenarnya ditentukan CSS. Ini pemisahan yang disengaja, dan justru dari situlah gambar responsive bekerja.
Pola yang paling sering dipakai adalah membatasi gambar agar tidak melebihi lebar wadahnya:
img {
max-width: 100%;
height: auto;
}
Aturan itu membuat gambar menyesuaikan lebar wadah, dan tingginya mengikuti rasio. Peramban modern sudah menghitung rasio dari atribut width dan height, sehingga ruangnya tetap dipesan dengan benar meskipun ukuran tampilnya berubah.
Sebelum ada atribut rasio, penulis halaman sering memakai trik padding untuk menjaga ruang. Cara itu masih berfungsi, tetapi tidak lagi diperlukan untuk kebutuhan biasa karena atribut width dan height sudah cukup.
Akibat kalau atributnya tidak ditulis
Tanpa atribut width dan height, peramban menyediakan ruang nol untuk gambar. Saat gambarnya selesai diunduh, peramban baru tahu ukurannya dan menggeser seluruh isi halaman di bawahnya. Teks yang sedang dibaca berpindah posisi, dan tautan yang hampir ditekan bisa berpindah tempat.
Gejala ini paling terasa pada halaman yang gambarnya dimuat dengan penundaan, karena gambarnya baru muncul saat pengunjung menggulir. Halaman yang memakai lazy load tanpa atribut dimensi justru bisa terasa lebih mengganggu daripada halaman tanpa lazy load. Penjelasan mekanismenya ada di cara membuat lazy load gambar.
Selain mengganggu pembaca, pergeseran tata letak juga berpengaruh pada penilaian kecepatan halaman. Alat pengukur kecepatan menganggap pergeseran sebagai bagian dari pengalaman yang buruk, meskipun halamannya selesai dimuat dengan cepat.
Menyesuaikan dengan layar yang berbeda
Satu gambar bisa ditampilkan dengan lebar berbeda di ponsel dan di komputer. Atribut width dan height tetap ditulis satu kali, dan CSS atau atribut srcset yang mengatur versi mana yang dipakai.
Kalau gambar disiapkan dalam beberapa ukuran berkas, atribut width dan height sebaiknya mencerminkan ukuran berkas yang paling besar atau rasio yang berlaku untuk semuanya. Rasionya yang penting, bukan angka mutlaknya. Cara menyiapkan beberapa ukuran itu dijelaskan di cara membuat gambar responsive.
Untuk gambar yang rasionya berbeda di layar kecil, misalnya banner yang memanjang di komputer dan lebih pendek di ponsel, pendekatannya berbeda. Gambar seperti itu biasanya disiapkan dalam dua berkas dengan rasio berbeda, dan masing-masing diberi dimensinya sendiri. Kalau rasionya berubah, ruang yang dipesan juga berubah, jadi pergantian berkasnya perlu diatur supaya tidak menimbulkan pergeseran baru.
Ukuran berkas dan ukuran tampil
Dua hal ini sering tertukar, dan akibatnya gambar disiapkan dengan cara yang salah. Dimensi berkas adalah jumlah piksel yang tersimpan di dalam gambar. Ukuran tampil adalah seberapa besar gambar itu muncul di halaman. Atribut width dan height menghubungkan keduanya.
Kalau gambar akan ditampilkan selebar 800 piksel, berkas dengan lebar 800 piksel sudah cukup untuk layar biasa. Untuk layar berkerapatan piksel tinggi, sediakan 1600 piksel. Menyimpan berkas 4000 piksel untuk tampilan 800 piksel hanya menambah berat halaman, karena piksel berlebihnya tidak terlihat. Cara memperkecilnya ada di cara mengoptimalkan gambar untuk website.
Satu patokan yang berguna: tentukan ukuran tampil lebih dulu, baru siapkan berkasnya. Kalau berkas sudah ada dan ukurannya berlebihan, perkecil dimensinya dengan tool kompresi, lalu perbarui atribut di HTML supaya cocok.
Kesalahan yang sering terjadi
Menulis dimensi berkas, bukan rasio ruang. Misalnya gambar akan ditampilkan 400 piksel, lalu atributnya ditulis width="400" height="200" meskipun gambar aslinya 800x400. Rasionya sebenarnya sama, jadi hasilnya benar. Tetapi kalau angkanya dibulatkan asal, rasionya berubah dan tata letak bergeser.
Menghapus atribut karena "sudah diatur CSS". CSS mengatur ukuran tampil, bukan ruang yang dipesan sebelum gambar dimuat. Keduanya dibutuhkan.
Memperkecil gambar tanpa memperbarui atribut. Setelah berkas diperkecil, atribut yang lama memberi rasio yang mungkin masih benar, tetapi angkanya menyesatkan saat halaman disunting orang lain. Perbarui supaya cocok.
Memasang height tanpa width. Sebagian peramban bisa menghitung rasio dari satu atribut saja kalau ada CSS pendukung, tetapi menulis keduanya lebih aman dan lebih jelas.
Memakai gambar sebagai satu-satunya penentu tata letak. Elemen seperti itu tidak bisa dipindahkan atau diubah ukurannya tanpa mengubah gambarnya. Untuk elemen tata letak, gunakan CSS.
Cara memeriksa hasilnya
Buka halaman di peramban dengan koneksi yang lambat, atau perkecil kecepatan jaringan di panel pengembang. Muat ulang halaman dan perhatikan apakah ada bagian yang bergeser setelah halaman tampak selesai. Kalau ada, periksa atribut pada gambar di bagian itu.
Periksa juga di layar ponsel. Gambar lebar yang tidak dibatasi CSS bisa membuat halaman melebar dan muncul gulir horizontal. Aturan max-width seperti contoh di atas biasanya sudah cukup untuk mencegahnya.
Untuk gambar yang dipakai sebagai tautan, periksa area yang bisa diklik. Ruang yang dipesan dengan benar membuat area itu stabil, sehingga pengunjung tidak salah menekan tautan.
Kapan atribut dimensi tidak diperlukan
Ada keadaan di mana atribut dimensi tidak dipakai. Gambar yang ukurannya ditentukan sepenuhnya oleh tata letak, misalnya latar bagian halaman, biasanya diatur lewat CSS. Gambar yang menjadi satu-satunya isi halaman, misalnya halaman penampil gambar, juga sering tidak memerlukan atribut karena tidak ada isi lain yang bisa bergeser.
Untuk kebutuhan biasa, terutama artikel dan halaman produk, atribut width dan height tetap dianjurkan. Manfaatnya besar dan biayanya kecil: dua angka yang ditulis sekali.
Pertanyaan yang sering muncul
Apakah atribut width dan height mengubah ukuran tampil gambar? Tidak, selama CSS mengatur ukuran tampilnya. Atribut itu menentukan ruang yang dipesan sebelum gambar dimuat, dan CSS menentukan tampilan akhirnya.
Apakah angkanya harus sama dengan dimensi asli berkas? Yang penting rasionya sama. Menulis dimensi asli adalah cara paling aman karena angkanya selalu benar. Kalau gambar ditampilkan dengan ukuran tetap, menulis ukuran tampil juga bisa, selama rasionya sesuai.
Apakah perlu menulis satuan px? Tidak. Tulis angkanya saja, misalnya width="800". Satuan tidak diperlukan dan tidak sesuai spesifikasi.
Bagaimana kalau gambar punya beberapa versi ukuran? Tulis satu pasang atribut yang mencerminkan rasio gambarnya. Untuk versi yang rasionya berbeda, misalnya banner ponsel dan banner komputer, gunakan elemen picture dan tulis dimensi pada masing-masing tag gambarnya.
Setelah dimensi benar
Atribut dimensi menyelesaikan pergeseran tata letak, tetapi belum menyelesaikan berat halaman. Lengkapi dengan berkas yang sudah diperkecil, format yang sesuai, dan pemuatan yang ditunda untuk gambar di bawah layar. Penjelasan lengkapnya ada di Gambar untuk Web, dan peta seluruh pekerjaan gambar ada di Panduan Gambar dan Foto.