Tutorial HTML / Menambahkan gambar dengan img: teks alternatif dan ukuran

Untuk memasukkan gambar ke dalam dokumen HTML, tempatkan URL file-nya di atribut src dari elemen img dan jelaskan kontennya yang relevan di alt. Tetapkan width dan height ke ukuran piksel aktual gambar, sehingga browser dapat menyisihkan ruang sebelum file dimuat.

Masukkan gambar dengan img

Elemen img berisi gambar dan tidak memiliki tag penutup. Gunakan gambar contoh yang menampilkan sebuah danau dan pohon, untuk mencoba kode berikut. Selesaikan alamat file menggunakan contoh jalur relatif di Tautan: jalur berkas, fragmen, dan email.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="Sebuah pohon di sebuah pulau kecil di danau, dengan pegunungan di latar belakang"
     width="1600" height="900">

1. Unduh gambar contoh dan simpan di samping file HTML yang sedang Anda edit, misalnya index.html.
2. Tambahkan kode di atas ke area body dalam file HTML dan simpan file tersebut.
3. Buka atau perbarui file HTML di browser. Anda seharusnya melihat foto danau yang ditampilkan di bawah ini.

src mengidentifikasi file sehubungan dengan lokasi file HTML. Kode di atas mencari gambar di folder yang sama. Jika Anda menyimpannya di subfolder images, ubah atribut menjadi src="images/html-image-sample-lake-tree-1600-v1.webp". Nama file dan ekstensi juga harus sesuai dengan file yang sebenarnya.

Klik pada gambar di sini untuk membuka file aslinya. Membingkai gambar dengan tautan adalah fungsi yang berbeda dari memasukkan dengan img.

Apa yang harus dikatakan atribut alt?

alt adalah teks alternatif. Ini memberikan informasi kepada pembaca yang tidak bisa melihat gambar atau browser mereka tidak dapat memuatnya, informasi yang disampaikan gambar dalam konteksnya. Jelaskan peran ini secara singkat, alih-alih menulis 'gambar' atau daftar kata kunci. Untuk keterangan gambar yang dapat dilihat semua orang, bandingkan penjelasan di Mengelompokkan gambar dan keterangannya dengan figure dan figcaption.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="Sebuah pohon di sebuah pulau kecil di danau, dengan pegunungan di latar belakang"
     width="1600" height="900">

Jika sebuah gambar hanya bersifat dekoratif dan mengulang informasi yang sudah dekat, sebuah alt="" kosong bisa sesuai. Nilai kosong menandainya sebagai tidak penting; menghilangkan atribut alt tidak menyampaikan maksud ini. Jika gambar menyampaikan informasi penting, jelaskan dalam teks alternatif atau teks yang berdekatan. pohon keputusan W3C WAI untuk teks alternatif membantu dalam kasus yang meragukan.

Apa fungsi width dan height?

File contoh berukuran 1600×900 piksel. Nilai-nilai width="1600" dan height="900" membantu browser menghitung rasio aspek di muka. Atribut ini tidak mengurangi ukuran file dalam byte maupun jumlah piksel. Uji pemilihan ukuran file secara terpisah dari perubahan pemotongan pada Gambar Responsif: srcset, sizes, dan picture.

Jika gambar lebih lebar dari area konten, CSS dapat membatasi lebar tampilannya sambil mempertahankan rasio aspek.

img {
  max-width: 100%;
  height: auto;
}

Dalam file HTML mandiri, masukkan CSS ini ke dalam elemen style di head atau ke stylesheet yang terhubung. Dimensi gambar menunjukkan rasio file; CSS mengendalikan ukuran tampilan saat ini.

Untuk mengirim file yang lebih kecil, Anda memerlukan gambar yang dikurangi ukurannya secara terpisah. Tutorial tentang gambar responsif menjelaskan bagaimana srcset dan sizes memungkinkan browser memilih dari file gambar.

Jika gambar tidak ditampilkan

• Periksa nama file yang tepat dan ekstensi di src.
• Periksa folder gambar dibandingkan dengan file HTML.
• Buka URL gambar langsung di browser untuk melihat apakah file tersedia.
• Jangan beranggapan bahwa ukuran tampilan yang lebih kecil berarti file yang diunduh juga lebih kecil.

Referensi elemen img ke MDN menjelaskan atribut yang tersedia dan perilakunya.