Ukuran Gambar

Sebelum menyusun teknik apa pun, kita perlu melihat ke mana waktu muat halaman pergi. Pada halaman web pada umumnya, porsi terbesar payload — total byte yang diunduh browser — berasal dari gambar, jauh melebihi gabungan HTML, CSS, dan JavaScript. Satu foto yang dikirim mentah dari kamera bisa lebih berat daripada seluruh isi halamannya. Karena itu, section ini dimulai dari titik yang paling berdampak: mengirim gambar seukuran yang memang ditampilkan.

Gambar sebagai Payload Terbesar #

Kamera ponsel modern menghasilkan foto berdimensi 4000×3000 piksel dengan ukuran file 3–5 MB. Angka tersebut wajar untuk dicetak, tetapi tidak untuk kolom produk selebar 300 piksel: browser menampilkan gambar seukuran itu, sementara tetap mengunduh file utuhnya. Selisih byte itu dibayar dengan waktu muat, terutama pada jaringan seluler yang lambat. Mengirim lebih banyak byte daripada yang perlu ditampilkan berarti membuat pengunjung menunggu tanpa keuntungan visual apa pun.

Menyesuaikan File dengan Ukuran Tampil #

Aturan dasarnya sederhana: resize gambar ke dimensi maksimal yang ditampilkan halaman, lalu sediakan versi dua kali lipat bila ingin tetap tajam di layar beresolusi tinggi. Untuk kolom 300 piksel, file 600 piksel merupakan pilihan yang aman; file 4000 piksel hanyalah pemborosan. Amati perbandingannya pada potongan berikut:

<!-- Sebelum: file asli kamera, 3.400 KB -->
<img src="foto-tas-asli.jpg" alt="Tas anyaman warna cokelat">

<!-- Sesudah: diresize ke 600x450, 48 KB -->
<img src="foto-tas-600.jpg" alt="Tas anyaman warna cokelat">

Kedua baris di atas menampilkan gambar sama dalam kolom 300 piksel; perbedaannya ada pada byte yang diunduh:

Angka pada tabel berupa ilustrasi, tetapi urutan besarannya khas: dimensi yang dipangkas empat kali lipat memangkas byte puluhan kali lipat, sementara kualitas visual pada ukuran tampil tetap terjaga.

width dan height Mencegah Layout Shift #

Memperkecil file baru melindungi jaringan; melindungi tata letak butuh langkah lain. Browser yang belum menerima file gambar tidak mengetahui ukurannya, sehingga ruang yang disiapkan berukuran nol; begitu file tiba, seluruh konten di bawahnya terdorong ke bawah. Pergeseran semacam ini disebut layout shift, dan metrik CLS (Cumulative Layout Shift) mengukur seberapa sering serta seberapa jauh halaman bergeser. Atribut width dan height pada img memberi tahu browser rasio gambar lebih awal sehingga ruang dapat disiapkan sebelum file tiba — MDN mencatat kombinasi kedua atribut ini mengurangi, bahkan mencegah, layout shift.

<img src="foto-tas-600.jpg" alt="Tas anyaman warna cokelat" width="600" height="450">

Nilai yang ditulis adalah dimensi intrinsik file — 600×450 pada contoh — bukan ukuran tampil; pengaturan lebar akhir tetap tugas CSS, sebagaimana dibahas pada section HTML dan CSS. Dengan rasio yang diketahui, browser menyisipkan ruang kosong seukuran gambar sejak awal, dan layout shift tidak terjadi.

Kompresi Ringkas #

Resize mengurangi jumlah piksel; kompresi mengurangi byte yang dipakai untuk menyimpan piksel tersebut. Kompresi lossy menghapus detail yang sulit dibedakan mata, sedangkan lossless memangkas ukuran tanpa mengubah satu piksel pun. Untuk foto, kompresi lossy pada kualitas sekitar 80 persen biasanya menghasilkan file jauh lebih kecil dengan tampilan yang nyaris identik. Alat seperti Squoosh dan TinyPNG dapat menjalankan kompresi langsung dari browser tanpa perlu memasang apa pun.

Contoh Lengkap: Daftar Produk Toko Budi #

File berikut merangkum teknik chapter ini pada satu halaman daftar produk: setiap gambar diresize ke 600 piksel dan setiap img membawa width serta height. File foto-wajan-600.jpg dan foto-cangkir-600.jpg bersifat hipotetis; sediakan filenya sendiri saat mencoba.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Daftar Produk Toko Budi</title>
</head>
<body>
  <h1>Toko Budi</h1>
  <p>Perlengkapan dapur dan rumah tangga, dikirim dari Jl. Melati No. 10.</p>

  <h2>Wajan besi 26 cm</h2>
  <img src="foto-wajan-600.jpg" alt="Wajan besi diameter 26 cm" width="600" height="450">
  <p>Rp85.000</p>

  <h2>Cangkir keramik</h2>
  <img src="foto-cangkir-600.jpg" alt="Cangkir keramik warna hijau" width="600" height="450">
  <p>Rp25.000</p>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Heading "Toko Budi" diikuti dua kartu produk
  - Setiap kartu berisi gambar dengan nama dan harga di bawahnya
  - Ruang gambar tersedia sejak awal, sehingga konten tidak bergeser
    saat file gambar selesai diunduh

Mari kita telaah peran setiap bagian penting:

1. Baris 13 dan 17 (img): setiap gambar membawa width="600" height="450" sesuai dimensi intrinsik file, sehingga ruang tersedia sebelum unduhan tuntas.
2. Atribut src: merujuk file 600 piksel hasil resize dan kompresi, bukan file asli kamera.
3. Atribut alt: teks pengganti tetap melekat pada setiap gambar; optimasi performa tidak boleh menukar aksesibilitas.
4. Baris 12 dan 16 (h2): nama produk ditulis sebagai heading; struktur tetap semantik meski beratnya ringan.

Gambar kini terkirim seukuran tampil dan tidak lagi menggeser tata letak. Langkah berikutnya memangkas byte lebih jauh dengan format file yang tepat: webp dan avif menyimpan gambar yang sama dengan byte jauh lebih sedikit.

Referensi resmi untuk pendalaman:

• MDN Web Docs — Elemen img
• web.dev — Optimize CLS
• web.dev — Learn Performance

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Daftar Produk Toko Budi</title>
</head>
<body>
  <h1>Toko Budi</h1>
  <p>Perlengkapan dapur dan rumah tangga, dikirim dari Jl. Melati No. 10.</p>

  <h2>Wajan besi 26 cm</h2>
  <img src="foto-wajan-600.jpg" alt="Wajan besi diameter 26 cm" width="600" height="450">
  <p>Rp85.000</p>

  <h2>Cangkir keramik</h2>
  <img src="foto-cangkir-600.jpg" alt="Cangkir keramik warna hijau" width="600" height="450">
  <p>Rp25.000</p>
</body>
</html>