Gambar dan teks alt

Elemen img memerlukan dua atribut agar berguna: src, yang menyatakan letak gambar, dan alt, yang menyatakan isi gambar saat gambar tidak bisa dilihat.

Elemen img

Gambar tidak disimpan di dalam file HTML. Halaman menunjuk ke gambar, dan browser mengambil setiap gambar sebagai file terpisah. Elemen <img> yang melakukan penunjukan itu. Elemen ini void, jadi tidak punya tag penutup, dan atribut src-nya memuat alamat gambar, absolut atau relatif, persis seperti href pada tautan. Gambar adalah elemen pengganti (replaced element): browser mengganti elemen itu dengan gambarnya, dan gambar menentukan ukurannya sendiri kecuali kamu menyatakan lain.

<img src="images/sourdough.jpg"
     alt="A round sourdough loaf with a dark, cracked crust"
     width="400" height="300">

Atribut width dan height memberi ukuran gambar dalam piksel, tanpa satuan. Isi dengan ukuran asli file. HTML biasanya tiba sebelum gambar, jadi tanpa angka-angka ini browser menata teks lebih dulu lalu mendorongnya ke bawah setiap kali gambar selesai dimuat, yang mengganggu kalau kamu sudah mulai membaca. Dengan angka-angka itu, browser menyediakan ruang yang tepat sejak awal. Untuk menampilkan gambar lebih kecil atau lebih besar, pakai CSS, bukan mengubah angka-angka ini.

Menulis teks alt

Atribut alt memuat teks pengganti. Pembaca layar membacakannya, browser menampilkannya saat file gagal dimuat, dan mesin pencari membacanya untuk memahami gambar. MDN menyarankan uji sederhana: apa yang hilang kalau gambar tidak muncul? Tulis itu, secara singkat. Untuk foto produk, jelaskan apa yang perlu diketahui orang untuk memilihnya. Untuk grafik, sampaikan pesan grafik itu, misalnya Penjualan naik tiga kali lipat dari Januari ke Maret, bukan Diagram batang.

• Jangan memulai dengan Gambar ... atau Foto .... Pembaca layar sudah mengumumkan bahwa itu gambar.
• Gambar dekoratif, seperti garis pemisah bergelombang, diberi alt="" yang kosong. Dengan begitu pembaca layar melewatinya. Tidak menulis alt sama sekali berbeda: sebagian pembaca layar justru membacakan nama filenya.
• Kalau gambar adalah satu-satunya konten sebuah tautan, teks alt-nya menjadi teks tautan, jadi jelaskan tujuan tautan (Beranda), bukan gambarnya (Logo roti).
• Kalau informasi yang sama sudah ada di teks di samping gambar, alt="" mencegah hal itu diucapkan dua kali.

Figur dan keterangan

Saat gambar disertai keterangan, bungkus keduanya dengan <figure> dan taruh keterangannya di <figcaption>. Ini mengaitkan keterangan dengan gambar bagi teknologi bantu, yang tidak dilakukan oleh paragraf biasa di bawah gambar. Keterangan dan teks alt punya tugas berbeda: keterangan dibaca semua orang, sedangkan alt menggantikan gambar saat gambar tidak ada. Keduanya tidak boleh sekadar saling mengulang. Figur tidak harus berisi gambar; contoh kode, tabel, atau puisi juga bisa menjadi figur.

Format, URL data, dan SVG sebaris

Foto biasanya JPEG atau WebP, grafik datar bertepi tajam biasanya PNG, dan gambar yang tersusun dari bentuk sering berupa SVG, format teks yang tetap tajam di ukuran berapa pun. Gambar kecil bahkan bisa ditulis langsung di src sebagai URL data yang diawali data:image/svg+xml,; latihan di bawah memakai cara ini agar tidak ada yang dimuat dari situs lain. SVG juga bisa ditulis langsung di HTML dengan elemen <svg>. Beri role="img" dan anak <title> agar pembaca layar punya nama untuknya. Terakhir, loading="lazy" pada gambar yang jauh di bawah halaman panjang memberi tahu browser untuk menunggu sampai pembaca menggulir mendekatinya.

Satu aturan lagi dari MDN: pakai hanya gambar yang berhak kamu pakai. Gambar yang kamu temukan di internet dilindungi hak cipta kecuali lisensinya menyatakan lain, dan mengarahkan src ke server orang lain tanpa izin, yang disebut hotlinking, juga membuat mereka membayar lalu lintas situsmu.