Gambar

Gambar memperkaya halaman, tetapi juga membawa dua risiko berupa informasi yang hilang bagi alat bantu dan tampilan yang bergejolak saat dimuat. Topik ini membahas elemen img beserta atribut src dan alt, disiplin penulisan teks alt, penggunaan width dan height untuk mencegah pergeseran layout (layout shift), serta pemilihan format gambar. Setelah mengikuti topik ini, satu halaman galeri dengan gambar yang aksesibel dan stabil dapat disusun.

Elemen img dan atribut intinya#

Elemen img menyisipkan gambar ke dalam halaman. Elemen ini tidak memiliki tag penutup karena tidak membungkus konten apa pun, sehingga tergolong elemen kosong (void element). Atribut src menyatakan alamat berkas gambarnya, dengan aturan alamat absolut dan relatif yang sama seperti href pada tautan.

<img src="logo.svg" alt="Logo Arsip Sekolah" width="240" height="120">

Atribut src saja belum menghasilkan gambar yang baik. Atribut alt menyatakan teks pengganti ketika gambar tidak dapat dilihat, sedangkan width dan height menyatakan dimensi aslinya. Ketiga atribut tersebut diuraikan pada bagian-bagian berikut karena masing-masing membawa disiplin penulisannya sendiri.

Teks alt dan disiplin penulisannya#

Teks alt dibacakan pembaca layar sebagai pengganti gambar, ditampilkan browser ketika berkas gambar gagal dimuat, dan dibaca mesin pencari untuk memahami isi gambar. Teks yang baik menggambarkan isi atau fungsi gambar secara ringkas, umumnya dalam satu kalimat pendek. Awalan seperti “gambar dari” tidak perlu ditulis, karena alt sudah berada pada konteks gambar.

Gambar yang murni dekoratif, yaitu gambar yang tidak membawa informasi apa pun, memakai alt="" yang kosong. Pembaca layar melewati gambar berteks-alt kosong, sehingga alur isi yang bersuara tetap bersih. Membiarkan atribut alt hilang sama sekali memberikan hasil yang berbeda, karena pembaca layar kerap membacakan nama berkas gambar sebagai gantinya.

Pemilihan teks alt mengikuti jenis gambarnya, sebagaimana dirangkum tabel berikut.

Width, height, dan pergeseran layout#

Browser baru mengetahui ukuran gambar setelah berkasnya selesai dimuat. Apabila ruangnya tidak disiapkan lebih awal, seluruh konten di bawah gambar terdorong turun mendadak pada saat gambar tampil. Gejala ini disebut pergeseran layout, dan akumulasinya diukur sebagai metrik Cumulative Layout Shift yang dibahas resmi pada web.dev.

Menuliskan width dan height sesuai dimensi asli gambar menyelesaikan masalah tersebut. Browser menghitung rasio lebar-tinggi dari kedua atribut itu sebelum gambar tiba, lalu menyiapkan ruang dengan rasio yang sama. Ukuran tampil akhir tetap diatur CSS, tetapi rasio ruangnya sudah terkunci sejak awal sehingga tata letak tidak terdorong.

Simulasi berikut memuat gambar satu detik setelah teks tampil. Tekan tombol Muat gambar, kemudian bandingkan gerak paragraf penutup pada kedua kolom.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <title>Simulasi pergeseran layout</title>
    <style>
      body { font-family: sans-serif; margin: 12px; color: #1f2937; }
      button { padding: 6px 14px; font-size: 14px; }
      p { margin: 8px 0; }
      .kolom { display: inline-block; vertical-align: top; width: 46%; margin-right: 3%; }
      .jendela { border: 1px solid #9ca3af; border-radius: 6px; padding: 10px; min-height: 230px; }
      .placeholder { background: #e5e7eb; width: 100%; aspect-ratio: 2 / 1; }
      img { display: block; width: 100%; height: auto; }
    </style>
  </head>
  <body>
    <p><button id="muat" type="button">Muat gambar</button></p>
    <div class="kolom">
      <p><strong>Tanpa width dan height</strong></p>
      <div class="jendela">
        <p>Judul artikel contoh.</p>
        <div id="tanpa"></div>
        <p>Paragraf penutup yang terdorong turun saat gambar selesai dimuat.</p>
      </div>
    </div>
    <div class="kolom">
      <p><strong>Dengan width dan height</strong></p>
      <div class="jendela">
        <p>Judul artikel contoh.</p>
        <div id="dengan" class="placeholder"></div>
        <p>Paragraf penutup tetap pada tempatnya karena ruang gambar sudah disiapkan.</p>
      </div>
    </div>
    <script>
      var data = 'data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20300%20150%22%3E%3Crect%20width=%22300%22%20height=%22150%22%20fill=%22%237492c6%22/%3E%3C/svg%3E';
      document.getElementById('muat').addEventListener('click', function () {
        setTimeout(function () {
          var imgTanpa = document.createElement('img');
          imgTanpa.src = data;
          imgTanpa.alt = 'Contoh gambar';
          document.getElementById('tanpa').appendChild(imgTanpa);
          var imgDengan = document.createElement('img');
          imgDengan.src = data;
          imgDengan.alt = 'Contoh gambar';
          imgDengan.width = 300;
          imgDengan.height = 150;
          var kotak = document.getElementById('dengan');
          kotak.parentNode.replaceChild(imgDengan, kotak);
        }, 1000);
      });
    </script>
  </body>
</html>

Kolom kiri menampilkan halaman yang gambarnya tidak membawa width dan height, sehingga paragraf penutup terdorong turun ketika gambar muncul. Kolom kanan menyiapkan ruang dengan rasio yang benar sejak awal, sehingga paragraf penutup tidak bergeser sedikit pun. Pada kode demonya, ruang kolom kanan dipersiapkan oleh kotak abu-abu yang menempati ruang gambar sejak halaman dibuka.

Format gambar umum#

Format berkas gambar dipilih menurut isi gambarnya, dan tabel berikut merangkum empat format yang paling sering ditemui.

Format SVG memiliki keistimewaan tambahan berupa berkas teks yang dapat ditulis langsung dengan editor teks. Gambar pada galeri contoh topik ini dibuat sebagai berkas SVG berisi beberapa bentuk sederhana. Ketajamannya juga tidak berkurang pada ukuran tampil apa pun, karena bentuknya dihitung ulang setiap kali gambar diskalakan.

Contoh galeri utuh#

Galeri contoh memakai satu berkas logo untuk dua ukuran tampil.

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="utf-8">
    <title>Galeri Logo</title>
  </head>
  <body>
    <h1>Galeri Logo</h1>

    <img src="logo.svg" alt="Logo Arsip Sekolah berupa perisai hijau dengan garis-garis buku" width="240" height="120">
    <p>Logo dalam ukuran penuh, yaitu 240 kali 120 piksel.</p>

    <img src="logo.svg" alt="Logo Arsip Sekolah" width="120" height="60">
    <p>Versi kecil dengan rasio yang tetap sama.</p>
  </body>
</html>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120">
  <rect width="240" height="120" rx="12" fill="#e8f5e9"/>
  <path d="M120 14 L160 30 V62 C160 86 143 98 120 106 C97 98 80 86 80 62 V30 Z" fill="#2e7d32"/>
  <path d="M103 50 H137 M103 62 H137 M103 74 H125" stroke="#e8f5e9" stroke-width="6" stroke-linecap="round" fill="none"/>
</svg>

Berkas galeri.html dan logo.svg diletakkan dalam satu folder. Kedua elemen img merujuk logo.svg yang sama, dengan width dan height masing-masing 240 kali 120 piksel dan 120 kali 60 piksel. Kedua pasangan itu mempertahankan rasio asli logo sebesar dua banding satu, sehingga ruang yang disiapkan browser tepat bentuknya. Halaman dibuka dengan browser untuk memeriksa ketajaman logo pada kedua ukuran, karena SVG tetap tajam saat diskalakan.

Kesalahan umum#

alt diisi nama berkas atau kata gambar. Pembaca layar menerima informasi yang tidak berarti. Jelaskan isi atau fungsi gambarnya, misalnya Logo Arsip Sekolah berupa perisai hijau.

Gambar informatif diberi alt="". Teks kosong membuat pembaca layar melewati gambar tersebut, dan informasinya hilang. alt="" hanya untuk gambar dekoratif.

width dan height tidak sesuai rasio asli. Ruang yang disiapkan tidak tepat bentuk, dan gambar tampak gepeng apabila kedua atribut dipaksakan pada rasio lain. Catat dimensi asli gambar, lalu pertahankan rasinya.

Ringkasan#

• img adalah elemen kosong dengan src untuk alamat gambar dan alt untuk teks penggantinya.
• Teks alt menggambarkan isi atau fungsi gambar, sedangkan alt="" yang kosong hanya untuk gambar dekoratif.
• width dan height sesuai dimensi asli mengunci rasio ruang dan mencegah pergeseran layout.
• SVG cocok untuk logo dan ikon, JPEG untuk foto, PNG untuk transparansi, dan WebP sebagai alternatif modern.

Referensi#

• Elemen img — MDN Web Docs — Daftar atribut img beserta kaidah teks alt-nya.
• Images in HTML — MDN Web Docs — Panduan penyisipan gambar dan penulisan teks alt.
• Elemen img — WHATWG — Definisi resmi img pada spesifikasi HTML Living Standard.
• Cumulative Layout Shift (CLS) — web.dev — Penjelasan metrik pergeseran layout beserta cara menekannya.