Elemen HTML

HTML <img>elemen mewakili gambar dalam dokumen.

Kategori konten	Mengalir konten , konten ungkapan , konten tertanam, konten teraba. Jika elemen memiliki usemapatribut, itu juga merupakan bagian dari kategori konten interaktif.
Konten yang diizinkan	Tidak ada, itu adalah elemen kosong .
Tag kelalaian	Harus memiliki tag awal dan tidak boleh memiliki tag akhir.
Orang tua yang diizinkan	Setiap elemen yang menerima konten tersemat.
Peran ARIA yang diizinkan	Apa saja
Antarmuka DOM	HTMLImageElement

Atribut

Elemen ini mencakup atribut global .

align Ditinggalkan sejak HTML4.01 ,  Usang sejak HTML5 

Penyejajaran gambar sehubungan dengan konteks sekitarnya. Di HTML5, gunakan properti  floatdan / atau vertical-alignCSS sebagai gantinya.

alt

Atribut ini mendefinisikan teks alternatif yang menjelaskan gambar. Pengguna akan melihat teks ini ditampilkan jika URL gambar salah, gambar tidak berada dalam salah satu format yang didukung , atau jika gambar belum didownload.

Browser tidak selalu menampilkan gambar yang direferensikan oleh elemen. Ini adalah kasus untuk browser non-grafis (termasuk yang digunakan oleh orang-orang dengan gangguan penglihatan), jika pengguna memilih untuk tidak menampilkan gambar, atau jika browser tidak dapat menampilkan gambar karena tidak valid atau tipe yang tidak didukung . Dalam kasus ini, browser dapat altmengganti gambar dengan teks yang didefinisikan dalam atribut elemen ini . Anda harus, untuk alasan ini dan orang lain, memberikan nilai yang berguna altbila memungkinkan.

Mengabaikan atribut ini sekaligus menunjukkan bahwa gambar adalah bagian penting dari konten, dan tidak ada padanan tekstual yang tersedia. Menetapkan atribut ini ke string kosong ( alt="")menunjukkan bahwa gambar ini bukan bagian penting dari konten, dan browser non-visual dapat menghilangkannya dari rendering.

border Ditinggalkan sejak HTML4.01 ,  Usang sejak HTML5

Lebar sebuah border disekeliling gambar. Di HTML5, gunakan borderproperti CSS sebagai gantinya.

crossorigin HTML5

Atribut yang disebutkan ini menunjukkan jika pengambilan gambar terkait harus dilakukan dengan menggunakan CORS atau tidak. Gambar berkemampuan CORS dapat digunakan kembali dalam <canvas>elemen tanpa " tercemar ." Nilai yang diizinkan adalah:

anonymous

Origin:Permintaan lintas-asal (yaitu dengan header HTTP) dilakukan. Tapi tidak ada kredensial yang dikirim (yaitu, tidak ada cookie, tidak ada sertifikat X.509, dan tidak ada otentikasi HTTP Basic yang dikirim). Jika server tidak memberikan kredensial ke situs asal (dengan tidak mengatur Access-Control-Allow-Origin:header HTTP), gambar akan tercemar dan penggunaannya dibatasi.

use-credentials

Origin:Permintaan lintas-asal (yaitu, dengan header HTTP) yang dilakukan dengan kredensial dikirim (misalnya, cookie, sertifikat, dan otentikasi HTTP Basic dilakukan). Jika server tidak memberikan kredensial ke situs asal (melalui Access-Control-Allow-Credentials:header HTTP), gambar akan tercemar dan penggunaannya dibatasi.

Bila tidak ada, sumber daya diambil tanpa permintaan CORS (misalnya, tanpa mengirim Origin:header HTTP), mencegah penggunaan non-tercemar pada <canvas>elemen. Jika tidak valid, penanganannya seolah-olah digunakan kata kunci anonim yang disebutkan . Lihat atribut pengaturan CORS untuk informasi tambahan.

height

Tinggi intrinsik gambar dalam piksel. Dalam HTML 4 , tinggi bisa didefinisikan piksel atau sebagai persentase. Dalam  HTML5 , bagaimanapun, nilainya harus dalam piksel.

hspace Ditinggalkan sejak HTML4.01 ,  Usang sejak HTML5

Jumlah piksel spasi putih untuk disisipkan ke kiri dan kanan gambar. Di HTML5, gunakan marginproperti CSS sebagai gantinya.

ismap

Atribut Boolean ini menunjukkan bahwa gambar adalah bagian dari peta sisi server. Jika demikian, koordinat yang tepat dari sebuah klik dikirim ke server.

Atribut ini hanya diperbolehkan jika <img>elemen adalah turunan <a>elemen dengan hrefatribut yang valid .

longdesc

Tautan ke deskripsi foto yang lebih rinci. Nilai yang mungkin adalah URL atau id elemen.

name     Ditinggalkan sejak HTML4.01 ,  Usang sejak HTML5

Nama untuk elemen Ini didukung di HTML 4 hanya untuk kompatibilitas. Gunakan idatribut sebagai gantinya.

referrerpolicy 

String yang menunjukkan perujuk mana yang digunakan saat mengambil sumber daya:

• no-referrer: yang Referer sundulan tidak akan dikirim.
• no-referrer-when-downgrade: Tidak ada Referer header yang dikirim saat menavigasi ke origin asal tanpa TLS (HTTPS). Ini adalah perilaku default agen pengguna jika tidak ada kebijakan yang ditentukan.
• origin: yang Referersundulan akan mencakup halaman skema asal ini, tuan rumah dan pelabuhan.
• origin-when-cross-origin: Menavigasi ke asal lain akan membatasi data rujukan yang disertakan ke skema, host dan port, sementara navigasi dari asal yang sama akan mencakup jalur penuh perujuk.
• unsafe-url: yang Referersundulan akan mencakup asal dan jalan, tapi tidak fragmen, password atau username. Kasus ini tidak aman karena bisa mematikan asal dan jalur dari sumber daya yang dilindungi TLS hingga asal-usul yang tidak aman.

Sizes  HTML5

Daftar satu atau lebih string dipisahkan dengan tanda koma yang menunjukkan satu set ukuran sumber. Setiap ukuran sumber terdiri dari:

1. Sebuah kondisi media Ini harus dihilangkan untuk item terakhir.
2. Sebuah nilai ukuran sumber

Nilai ukuran sumber menentukan ukuran tampilan yang diinginkan dari gambar. Agen pengguna srcsetmenggunakan ukuran sumber saat ini untuk memilih salah satu sumber yang disertakan oleh atribut tersebut, bila sumber tersebut dijelaskan menggunakan deskriptor lebar (' w'). Ukuran sumber yang dipilih mempengaruhi ukuran gambar intrinsik (ukuran tampilan gambar jika tidak ada styling CSS yang diterapkan). Jika srcsetatribut tidak ada, atau tidak mengandung nilai dengan wdeskriptor lebar ( ), maka sizesatribut tidak berpengaruh.

src

URL gambar Atribut ini wajib untuk <img>elemen. Pada browser yang mendukung srcset, diperlakukan srcseperti gambar kandidat dengan deskripsi kerapatan piksel 1xkecuali gambar dengan deskripsi kerapatan piksel ini sudah didefinisikan srcset,atau kecuali  srcsetberisi wdeskriptor '.

Srcset HTML5

Daftar satu atau lebih string dipisahkan dengan tanda koma yang menunjukkan sekumpulan sumber gambar yang mungkin digunakan oleh agen pengguna. Setiap string terdiri dari:

1. URL ke gambar,
2. Opsional, spasi diikuti oleh salah satu dari:

·         Deskriptor lebar, atau bilangan bulat positif yang langsung diikuti oleh ' w'. Deskriptor lebar dibagi dengan ukuran sumber yang sizesdiberikan pada  atribut untuk menghitung kerapatan piksel efektif.

·         Deskripsi kerapatan piksel, yang merupakan bilangan floating point positif yang langsung diikuti oleh ' x'.

Jika tidak ada deskripsi yang ditentukan, sumber ditugaskan deskriptor default: 1x.

Tidak benar untuk mencampur deskriptor lebar dan deskriptor kerapatan piksel pada atribut yang sama srcset. Deskriptor duplikat (misalnya, dua sumber yang sama srcsetyang dideskripsikan dengan ' 2x') juga tidak valid.

Agen pengguna memilih salah satu sumber yang tersedia sesuai kebijakannya. Ini memberi mereka kelonggaran yang signifikan untuk menyesuaikan pilihan mereka berdasarkan hal-hal seperti preferensi pengguna atau kondisi bandwidth.

width

Lebar intrinsik gambar dalam piksel. Dalam HTML 4 , baik persentase atau piksel adalah nilai yang dapat diterima. Di  HTML5 , bagaimanapun, hanya piksel yang dapat diterima.

usemap

URL parsial (dimulai dengan '#') dari peta gambar yang terkait dengan elemen.

Catatan penggunaan : Anda tidak dapat menggunakan atribut ini jika <img>elemen itu adalah keturunan dari satu <a>atau <button>elemen.

vspace Ditinggalkan sejak HTML4.01 ,  Usang sejak HTML5

Jumlah piksel spasi putih untuk disisipkan di atas dan di bawah gambar. Di HTML5, gunakan margin properti CSS sebagai gantinya.

Format gambar yang didukung

Standar HTML tidak memberikan daftar format gambar yang harus didukung, sehingga setiap agen pengguna mendukung seperangkat format yang berbeda. Gecko mendukung:

·         JPEG

·         GIF , termasuk GIF animasi

·         PNG

·         APNG

·         SVG

·         BMP

·         BMP ICO

·         PNG ICO

Interaksi dengan CSS

Mengenai CSS, <img>adalah elemen yang diganti . Ini tidak memiliki garis dasar, jadi saat gambar digunakan dalam konteks format inline dengan , bagian bawah gambar akan ditempatkan pada garis dasar wadah.vertical-align: baseline

Bergantung pada jenisnya, gambar mungkin memiliki lebar dan tinggi intrinsik. Untuk beberapa jenis gambar, dimensi intrinsik tidak diperlukan. Gambar SVG, misalnya, tidak memiliki dimensi intrinsik.

Kesalahan

Jika terjadi onerrorkesalahan saat mencoba memuat atau merender gambar, dan pengendali event telah dikonfigurasi untuk menangani erroracara tersebut, pengendali event akan dipanggil . Hal ini dapat terjadi dalam sejumlah situasi, termasuk:

·         The srcatribut kosong atau null.

·         srcURL yang ditentukan sama dengan URL halaman yang sedang dihubungi pengguna.

·         Gambar yang ditentukan rusak dengan cara yang mencegahnya dimuat.

·         Metadata gambar yang ditentukan rusak sedemikian rupa sehingga tidak mungkin untuk mengambil kembali dimensinya, dan tidak ada dimensi yang ditentukan dalam atribut <img>elemen.

·         Gambar yang ditentukan dalam format tidak didukung oleh agen pengguna .

Contoh 1: teks alternatif

<Img src = "mdn-logo-sm.png" alt = "MDN">

Contoh 2: Tautan gambar

<a href="/"> MDN <img src = "mdn-logo-sm.png" alt = "MDN"> </a>

Contoh 3: srcsetMenggunakan atribut

The srcatribut adalah 1xkandidat di agen pengguna yang mendukung srcset.

<Img src = "mdn-logo-sm.png"

      alt = "MDN"

      srcset = "mdn-logo-HD.png 2x">

Contoh 4: Menggunakan srcsetdan sizesatribut

The srcatribut diabaikan dalam agen pengguna yang mendukung srcsetbila menggunakan ' wdeskriptor'. Bila kondisi (min-width: 600px)media cocok, gambarnya akan lebar 200px, jika tidak maka akan lebar 50vw (50% lebar viewport).

<Img src = "clock-demo-thumb-200.png"

      alt = "Jam"

      srcset = "jam-demo-thumb-200.png 200w,

          jam-demo-thumb-400.png 400w"

      ukuran = "(mnt -width: 600px) 200px, 50vw ">

Spesifikasi

Spesifikasi	Status	Komentar
Referrer Policy Definisi 'atribut pengarah' dalam spesifikasi itu.	Draft Kerja	Ditambahkan referrerpolicyatribut.
WHATWG HTML Living Standard Definisi '<img>' dalam spesifikasi itu.	Standar Hidup
HTML5 Definisi '<img>' dalam spesifikasi itu.	Rekomendasi
HTML 4.01 Spesifikasi Definisi '<img>' dalam spesifikasi itu.	Rekomendasi

Kompatibilitas browser

Fitur	Chrome	Tepi	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Dukungan dasar	(Iya nih)	(Iya nih)	(Iya nih)	(Iya nih)	(Iya nih)	(Iya nih)
srcset	34.0	(Iya nih)	32.0 (32.0) [2]	Tidak ada dukungan	21	7.1
referrerpolicy	46,0 [1]	Tidak ada dukungan	50,0 (50,0)	?	?	?
onerror Event handler	(Iya nih)	?	51 (51)	?	(Iya nih)	(Iya nih)
Atribut tanpa usemaplengan	58	?	?	?	45	?

[1] Dilaksanakan sebagai referrerpolicydan di belakang bendera.

[2] Dilaksanakan di belakang pilihan.