Tag HTML <img>

Definisi dan penggunaan

<img> Tag digunakan untuk memasukkan gambar ke halaman HTML.

Dalam hal teknis, sebenarnya tidak mengisi gambar ke halaman web, tetapi menghubungkan gambar ke halaman web.<img> Tag menciptakan kontainer untuk merujuk ke gambar.

<img> Tag memiliki dua atribut yang diperlukan:

  • src - Tentukan jalur gambar
  • alt - Jika gambar tidak dapat ditampilkan karena alasan apapun, tentukan teks pengganti gambar.

Perhatian:Selain itu, selalu tentukan lebar dan tinggi gambar. Jika lebar dan tinggi belum ditentukan, halaman mungkin akan berkedip saat memuat gambar.

Petunjuk:Untuk menghubungkan gambar ke dokumen lain, cukup gunakan <img> Tag yang disisipkan di dalam <a> Dalam tag (lihat contoh di bawah ini).

Lihat pula:

Tutorial HTML:Gambar HTML

Panduan Referensi HTML DOM:Objek Gambar

Tutorial CSS:Atur gaya gambar

Baca lebih lanjut:Bagaimana memakai gambar dengan benar

Contoh

Contoh 1

Dalam contoh di bawah ini, kami memasukkan gambar bunga tulip yang diambil di Hari Bunga di Shanghai oleh insinyur CodeW3C.com di halaman web kami:

<img src="tulip.jpg" alt="Hari Bunga di Shanghai - Tulip" />

Coba Sendiri

Haven Bunga Shanghai - Tulip

Contoh 2

Contoh lainnya bagaimana memasukkan gambar:

<img src="dancer.png" alt="Penari" width="500" height="749">

Coba Sendiri

Petunjuk:Tentukan lebih banyak contoh di bawah dasar halaman.

Atribut

Atribut Nilai Deskripsi
alt Teks Tentukan teks pengganti gambar.
crossorigin
  • anonymous
  • use-credentials
 Perbolehkan penggunaan gambar dari situs pihak ketiga yang diizinkan untuk mengakses luar daerah bersama dengan kanvas (canvas).
height Pixel Tentukan tinggi gambar.
ismap ismap Definiskan gambar sebagai peta gambar server.
loading
  • eager
  • lazy
 Tentukan apakah browser harus segera memuat gambar, atau menunda memuat gambar sampai beberapa kondisi terpenuhi.
longdesc URL Tentukan URL yang mengarah ke deskripsi detil gambar.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • unsafe-url
 Tentukan informasi referensi yang akan digunakan saat mengambil gambar.
sizes Ukuran Tentukan ukuran gambar untuk tata letak halaman yang berbeda.
src URL Tentukan jalur gambar.
srcset URL-list Tentukan daftar berkas gambar yang digunakan dalam situasi yang berbeda.
usemap #mapname Definiskan gambar sebagai peta gambar klien.
width Pixel Tentukan lebar gambar.

Atribut global

<img> Tag ini mendukung Atribut global dalam HTML。

Atribut acara

<img> Tag ini mendukung Atribut acara dalam HTML。

Beberapa contoh lain

Contoh 3

Menata gambar (gunakan CSS):

<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right">
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">

Coba Sendiri

Contoh 4

Tambahkan garis pinggir gambar (gunakan CSS):

<img src="flower.gif" alt="[#1#]" style="border:5px solid black">

Coba Sendiri

Contoh 5

Tambahkan marjin kiri dan kanan gambar (gunakan CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">

Coba Sendiri

Contoh 6

Tambahkan marjin atas, bawah, dan luar gambar (gunakan CSS):

<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">

Coba Sendiri

Contoh 7

Bagaimana mengisi gambar dari folder lain atau situs lain:

<img src="/photo/flower.gif" alt="Bunga" width="180" height="180">
<img src="https://www.codew3c.com/photo/tree.png" alt="Pohon" width="150" height="161">

Coba Sendiri

Contoh 8

Cara menambahkan tautan ke gambar:

<a href="https://www.codew3c.com">
<img src="w3logo.png" alt="codew3c.com" width="400" height="225">
</a>

Coba Sendiri

Contoh 9

Cara membuat peta gambar yang memiliki area yang dapat di-klik. Setiap area adalah tautan:

<img src="life.png" alt="Kehidupan" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Kopi" href="coffee.html">
</map>

Coba Sendiri

Baca lanjut - Cara penggunaan benar gambar

Salah satu fitur yang paling menonjol di HTML dan XHTML, adalah kemampuan untuk menyertakan gambar di teks dokumen, baik dapat digunakan sebagai objek dalam dokumen (gambar yang disertakan) maupun sebagai dokumen yang dapat diunduh melalui tautan, atau sebagai latar belakang dokumen.

Menambahkan gambar secara ration di konten dokumen (iklan yang bergerak, foto, penjelasan, lukisan, dll) akan membuat dokumen menjadi lebih hidup dan menarik, serta terlihat lebih profesional, mempunyai informasi yang tinggi dan mudah dibaca. Gambar dapat juga dijadikan pemandu visual untuk tautan yang dapat diakses.

Namun, jika digunakan berlebihan, dokumen akan menjadi berantakan, cacat, dan sulit dibaca, dan akan menambah waktu tunggu yang tidak perlu bagi pengguna saat mengunduh dan melihat halaman ini.

Baca artikel di bawah ini untuk belajar tentang dua format gambar utama di Web: GIF dan JPEG, serta cara penggunaan yang benar gambar:

Pengaturan CSS standar

Sebagian besar peramban akan menampilkan nilai standar berikut <img> Elemen:

img {
  display: inline-block;
}

Coba Sendiri

Dukungan Browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan