Deskripsi
Penjelasan HTML img (image) tag

img menunjukkan image yang berarti gambar dan oleh karenanya digunakan untuk menyisipkan gambar. Gambar didalam sebuah dokumen HTML tidak dimasukkan sepenuhnya pada file (.html, misalnya) akan tetapi, hanya merujukkan file sumber gambar tersebut berada (disimpan).

img element, ibarat sebuah rumah atau penampung (container) bagi sebuah file gambar (picture). Anda dapat memasukkan file gambar seperti .jpg, .gif dan .png didalam element img dengan merujukkan (link) file gambar tersebut yang di ditulis pada src attribute.

HTML <img> element memiliki beragam attribute yang dapat ditulis sesuai kebutuhan. Akan tetapi, hanya dua attribute yang wajib ditulis pada setiap <img /> element, yaitu src dan alt attribute. src attribute menujukkan sumber file tersebut berada, sedangkan alt menujukkan alternatif text yang akan muncul sebagai pengganti apabila gambar tersebut tidak dapat ditampilkan.

HMTL img element, tidak memiliki tag penutup (end/closing tag), jadi hanya ditulis <img /> bukannya <img></img>.

Attributes
Atribut HTML Tag <img>

alt

Menunjukkan sebuah alternate text (teks pengganti) yang akan muncul apabila gambar tidak dapat ditampilkan.

Contoh: <img src="http://dul.web.id/logo.png" alt="logo dul.web.id" />

tulisan "logo dul.web.id" akan muncul apabila gambar logo.png tidak dapat ditampilkan.

crossorigin

Mengijinkan website pihak ketiga untuk memperbolehkan akses cross-origin yang dapat digunakan kembali didalam element <canvas>.

height

height berarti tinggi, digunakan untuk menentukkan tinggi gambar.

Contoh: <img src="http://dul.web.id/logo.png" height="90" alt="" />

menentukkan tinggi gambar logo.png diatas, menjadi 90px. Di dalam HTML, hanya ditulis angka saja tanpa akhiran px.

ismap

Menunjukkan bahwa gambar (image) adalah bagian dari gambar peta sisi server (server-side image-map). Jika ditulis, maka koordinat tertentu yang diklik akan dikirim ke server.

sizes

Menentukkan daftar ukuran gambar berdasarkan jendela layar browser yang ditampilkan. Melibatkan media query dan ukuran gambar (source-size) yang ingin ditampilkan sesuai kondisi tertentu.

Contoh: <img src="kecil.jpg" srcset="besar.jpg 1024w, sedang.jpg 640w, kecil.jpg 320w" sizes="(min-width: 900px) 50vw, 100vw" alt=""> Lihat hasilnya

Attribute sizes pada contoh diatas, berarti: Apabila layar browser lebih lebar dari 900px, maka ukuran (size) gambar akan ditampilkan 50 persen, atau 50 viewport width (50 persen dari lebar layar). Jika sebaliknya (kurang dari 900px) maka akan ditampilkan 100 (persen) atau sepenuh gambar.

src

Attribute ini wajib ditulis untuk menentukkan alamat (lokasi) gambar yang ingin ditampilkan.

Contoh: <img src="http://dul.web.id/logo.png" alt="" />

Dari contoh diatas, gambar logo yang ingin ditampilkan berada di http://dul.web.id/logo.png.

srcset

Memasukkan deretan gambar pilihan yang dapat digunakan oleh browser sesuai kebutuhan atau situasi tertentu (Misalnya, untuk layar kecil, layar dengan resolusi tinggi, dan sebagainya.). Penulisannya, dipisahkan dengan tanda koma (,) per-item gambar.

Contoh: <img src="gambar-src.png" srcset="gambar-1x.png 1x, gambar-2x.png 2x, gambar-3x.png 3x, gambar-4x.png 4x">

usemap

Mengasosiasikan nama dari peta gambar (image map) yang ditulis dengan diawali tanda pagar (#). Attribute ini tidak dapat digunakan apabila <img> ditulis didalam <a> atau <button> element.

width

width berarti lebar, digunakan untuk menentukkan lebar gambar.

Contoh: <img src="http://dul.web.id/logo.png" width="160" alt="" />

menentukkan lebar gambar logo.png diatas, menjadi 160px. Di dalam HTML, hanya ditulis angka saja tanpa akhiran px.


Global Attributes
Atribut Secara Global (Keseluruhan)

<img> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes
Atribut event (Peristiwa)

<img> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Contoh
Memasukkan image (gambar) di dalam HTML

Bagaimana memasukkan gambar dalam HTML?

<img src="http://dul.web.id/images/anak-lucu.jpg" alt="anak lucu usia 3 tahun" />

Anda dapat memasukkan gambar pada sebuah halaman HTML dengan menggunakan tag img kemudian diikuti dengan src attribute, tanda =, dan tanda petik ganda (""). Didalam tanda petik ganda merupakan letak file gambar yang ingin kita tampilkan pada halaman web (HTML). Tulis juga alt attribute untuk menentukkan alternatif teks yang mewakili gambar tersebut. Terakhir, yaitu penutup (/>).

Contoh diatas, dapat diedit sendiri dan dilihat hasilnya pada demo editor dibawah ini.

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <img>
Code Editor

Contoh 2
Link dengan image (gambar)

Bagaimana membuat link gambar? atau gambar yang dapat diklik dan menuju halaman/website lain.

<a href="http://dul.web.id">
  <img src="../../../images/dulwebid.png" alt="dul.web.id home">
</a>
dul.web.id home

Untuk membuat link pada sebuah gambar, tulis/tempatkan <img> didalam <a> element.