Gambar
Menampilkan gambar dengan img, teks alternatif (alt), ukuran, figure dan figcaption, serta memilih format gambar yang tepat.
Elemen <img>
Gambar ditampilkan dengan <img>. Ini elemen kosong (tanpa tag penutup) dan memerlukan dua atribut utama:
<img src="kucing.jpg" alt="Kucing oranye sedang tidur di sofa">| Atribut | Fungsi |
|---|---|
src | Lokasi berkas gambar (relatif atau alamat lengkap) |
alt | Teks pengganti: dibacakan pembaca layar, tampil bila gambar gagal dimuat, dan dibaca mesin pencari |
width, height | Ukuran dalam piksel. Menuliskannya mencegah halaman "melompat" saat gambar selesai dimuat |
loading="lazy" | Gambar baru dimuat saat hampir terlihat di layar, menghemat kuota |
Menulis alt yang baik
- Jelaskan isi atau fungsi gambar: "Grafik penjualan naik 20% pada Maret", bukan "grafik".
- Jangan mulai dengan "gambar dari…" karena pembaca layar sudah menyebut bahwa itu gambar.
- Untuk gambar murni hiasan, pakai
alt=""(kosong) agar dilewati pembaca layar. altwajib ada. Gambar tanpaaltdianggap kesalahan aksesibilitas.
Jalur berkas (path)
| Penulisan | Artinya |
|---|---|
foto.jpg | Di folder yang sama dengan berkas HTML |
gambar/foto.jpg | Di subfolder gambar |
../foto.jpg | Naik satu folder ke atas |
https://situs.com/foto.jpg | Alamat lengkap di internet |
Format gambar
| Format | Cocok untuk |
|---|---|
| JPG | Foto (ukuran kecil, warna banyak) |
| PNG | Gambar dengan latar transparan, tangkapan layar |
| SVG | Ikon dan logo (vektor, tajam di ukuran apa pun) |
| WebP | Pengganti modern JPG/PNG dengan ukuran lebih kecil |
Gambar dengan keterangan: figure
<figure> membungkus gambar (atau diagram, kode) beserta keterangan <figcaption>:
<figure>
<img src="candi.jpg" alt="Candi Borobudur saat matahari terbit" width="400">
<figcaption>Candi Borobudur, Magelang.</figcaption>
</figure>Gambar yang bisa diklik
<a href="https://kelasit.com"><img src="logo.png" alt="Logo KelasIT"></a>Di latihan ini, gambar dari berkas tidak tersedia, jadi pratinjau akan menampilkan teks alt. Itu normal dan justru memperlihatkan kenapa alt penting.