Gambar HTML

Sebagian besar situs web membutuhkan gambar, apalagi toko online. Tanpa gambar situs web akan terlihat monoton dan membosankan.

Oleh karena itu kita perlu mempelajari elemen gambar agar kita bisa memasukkannya ke halaman HTML, sehingga halaman yang kita buat terlihat lebih menarik.

Langsung saja, mari kita mulai.

1. Cara Memasukkan Gambar HTML
2. Format File Gambar
3. Atribut Tag <img>
   1. Atribut <alt>
   2. Atribut width dan height
4. Mengubah Gaya Gambar
5. Gambar Sebagai Latar Belakang
6. Menambahkan Link pada Gambar
7. Membuat Link di Bagian Tertentu Pada Gambar
8. Tag Tambahan untuk Gambar
   1. Tag <figure> dan <figcaption>
   2. Tag <picture> dan <source>

Cara Memasukkan Gambar HTML

Untuk menyisipkan gambar ke halaman HTML kita bisa menggunkaan tag <img>, tag ini tidak memilik penutup.

Kemudian, kita bisa menambahkan atribut src untuk menentukan lokasi gambar yang ingin digunkaan.

Pastikan gambar yang ingin digunakan berada di folder yang sama dengan halaman HTML.

Misalnya, struktur folder kita seperti ini:

belajar-html
├── index.html
└── gambar.jpg

index.html adalah halaman HTML yang sedang kita buat.

Maka kita bisa membuat tag <img> di index.html dengan nilai atribut src seperti berikut:

<img src="gambar.jpg" />

Hasil:

Gambar akan menggunakan ukuran asli, jadi kalau gambar yang kita gunkaan cukup besar, hasilnya mungkin akan memenuhi atau bahkan melebihi ukuran layar.

Jangan khawatir, karena ini bisa kita atur sesuai keinginan, untuk saat ini cukup perhatikan atribut src.

Bagaimana kalau gambar yang ingin digunkaan berada di dalam folder utama atau root (belajar-html) dan di dalam folder ini ada folder lagi yang berisi gambar?

Misalnya nama foldernya img. Seperti ini strukturnya:

belajar-html
├── index.html
└── img
    └── gambar.jpg

Dalam kasus seperti, jalur (path) gambar kita adalah img/gambar.jpg. Jadi, kita harus masuk dulu ke folder img.

Maka kita harus menentukan atribut src sebagai berikut:

<img src="img/gambar.jpg" />

Bagaimana jika gambar berada di luar folder utama?

Misalnya struktur folder kita seperti ini:

.
├── gambar.jpg
└── belajar-html
    └── index.html

Karena kita saat ini ingin menggunakannya di index.html maka kita harus keluar dulu dari folder root (belajar-html) menggunakan notasi .. (titik dua kali).

Jadi, nilai atribut src akan terlihat seperti ini:

<img src="../gambar.jpg" />

Bagaimana kalau gambar berada di situs lain?

Kita bisa menggunakan URL absolut, seperti ini:

<img
  src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Curug_Cigentis.jpg/1920px-Curug_Cigentis.jpg"
/>

Metode ini disebut hotlink, tidak semua situs mengizinkan kita menggunakan metode ini. Untuk menghemat bandwidth biasanya mereka mencegahnya.

Format File Gambar

Ada puluhan format gambar yang bisa kita gunakan saat ini. Tapi browser hanya mendukung beberapa format saja.

Misalnya format DRW (Drawn File) dan AI (Adobe Ilustrator), tidak didkung browser.

Kita bisa saja memasukkan gambar yang tidak didukung browser ke dalam HTML, tapi browser tidak akan menampilkan gambar tersebut.

Oleh karena itu kita perlu mengetahui format gambar yang didukung browser.

Berikut daftar format gambar yang didukung di semua browser (Chrome, Edge, Firefox, Safari, dan Opera).

Yang paling sering digunakan adalah JPEG (.jpg, .jpeg), PNG, SVG, WebP dan ICO (.ico).

Atribut Tag <img>

Sama seperti tag HTML yang lain, tag <img> mendukung atribut global seperti style dan yang lainnya.

Tapi, tag ini memiliki beberapa atribut khusus, diantaranya:

• alt: teks alternatif.
• width: ukuran lebar gambar.
• height: ukuran tinggi gambar.

Mari kita pelajari satu per satu.

Atribut alt

Atribut alt digunakan sebagai teks alternatif untuk mendeskripsikan gambar.

Selain dapat meningkatkan pengalaman pengguna, atribut ini juga dapat membantu mesin pencari memahami gambar yang kita sisipkan, sehingga bagus untuk SEO.

Selain itu, nilai atribut alt akan ditampilkan ketika browser gagal memuat gambar, entah itu karena masalah dukungan format, masalah jaringan, atau hal lainnya.

Jadi, selalu gunakan atribut ini saat Anda memasukkan gambar.

Mari kita gunakan gambar yang tidak ada, agar kita bisa melihat nilai atribut ini.

Contoh:

<img alt="Mengolah Data di Laptop Sambil Ngopi" src="gambar-tidak-ada.jpg" />

Hasil:

Atribut width dan height

Atribut width digunakan untuk mengatur lebar gambar, sedangkan height tinggi gambar.

Keduanya opsional, tapi disarankan selalu gunakan kedua atribut ini agar browser menyediakan ruang yang diperlukan sebelum halaman dimuat, sehingga tidak terjadi pergeseran tata letak.

Ukurannya bisa kita tentukan dalam satuan piksel, tapi kita tidak perlu menulis px secara eksplisit. Tidak boleh menggunakan nilai desimal, harus bilangan bulat (tanpa koma).

Contoh:

<img src="gambar.jpg" width="480" height="293" />

Hasil:

Agar gambar memiliki ukuran yang proposional, kita harus membagi lebar dan tinggi gambar secara merata.

Misalnya, lebar dan tinggi gambar adalah 1920 x 1173, kita ingin memperkecilnya 4 kali lipat.

Jadi kita bagi lebar dan tingginya dengan 4, 1920 / 4 hasilnya 480, sedangkan 1173 / 4 hasilnya 293.

Oleh karena itu gambar di atas menggunakan width="480" dan height="293".

Kalau tidak dibagi secara merata, ukuran gambar menjadi tidak proporsional, gambar akan terlihat seperti ditarik (penyok).

Kalau Anda tidak mau ribet menentukan manual, hapus height, tentukan hanya nilai width (bebas), tinggi gambar akan menyesuaikan secara otomatis.

Seperti berikut:

<img src="gambar.jpg" width="480" />

Mengubah Gaya Gambar

Untuk menyesuaikan gaya gambar, kita bisa menggunakan atribut style untuk menyisipkan CSS.

Jika Anda sudah mempelajari CSS, lebih baik tulis di file terpisah, jangan di dalam atribut style.

Mari kita atur gaya gambar agar memiliki bingkai dan membentuk lingkarang seperti foto profil.

Contoh:

<img src="gambar.jpg" width="250" style="border: 3px solid blueviolet" />

<img
  src="gambar.jpg"
  width="120"
  height="120"
  style="border-radius: 100%; object-fit: cover"
/>

Hasil:

Perhatikan gambar kedua di atas, untuk membuat gambar berbentuk lingkarang, tidak cukup hanya menambahkan properti border-radius: 100%.

Kecuali, gambar yang digunakan sudah berbentuk persegi (lebar dan tinggi sama).

Karena lebar dan tinggi gambar yang saya gunakan tidak sama, maka saya harus memaksanya agar berbentu persegi dengan mengatur width="120" dan height="120".

Menariknya, di sini ukuran gambar tetap terlihat proporsional karena kita menggunakan properti object-fit: cover yang dapat mempertahankan aspek rasio gambar.

Ini akan kita pelajari lebih lanjut pada materi CSS, untuk saat ini kita hanya perlu tahu bahwa kita bisa menyisipkan CSS menggunkaan atribut style ke dalam tag <img>.

Gambar Sebagai Latar Belakang

Kita juga bisa menjadikan gambar sebaga latar belakang, tapi ini tidak ada hubungannya dengan tag <img>.

Kita bisa menggunakan properti CSS background-image dengan nilai url(pathGambar), dimana pathGambar adalah jalur ke gambar yang ingin digunakan.

Agar hasilnya lebih sesuai di sini saya menambahkan beberapa CSS tambahan.

Contoh:

<div style="height: 100vh">
  <div
    style="background-image: url('gambar.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 100%;
    "
  >
    <h1 style="color: rgb(218, 32, 162)">Belajar Gambar HTML</h1>
  </div>
</div>

Hasil:

Menambahkan Link pada Gambar

Bagaimana jika kita ingin membuat gambar yang bisa diklik? Jadi, ketika pengguna mengklik gambar, mereka harus diarahkan ke halaman tertentu?

Tentu saja bisa.

Kita hanya perlu membungkus tag <img> dengan tag link <a>.

Contoh:

<a href="https://pixabay.com/photos/notebook-typing-coffee-computer-1850613/">
  <img src="gambar.jpg" width="250" />
</a>

Hasil:

Membuat Link di Bagian Tertentu Pada Gambar

Kalau contoh sebelumnya menambahkan satu link untuk satu gambar, kali ini kita akan menambahkan beberapa link pada bagian-bagian tertentu dalam gambar.

Ini bisa kita buat menggunakan tag <map> dan <area>.

Anda bisa mencari alat yang dapat membuat gambar map secara otomatis, cari di Google menggunakan kata kunci "Image Map Generator", atau gunakan situs image-map.net.

Contoh:

<img src="gambar-sm.jpg" usemap="#image-map" />
<map name="image-map">
  <area
    title="kopi"
    href="https://id.wikipedia.org/wiki/Kopi"
    coords="326,178,31"
    shape="circle"
  />
  <area
    title="laptop"
    href="https://id.wikipedia.org/wiki/Laptop"
    coords="121,24,279,202"
    shape="rect"
  />
  <area
    title="kacamata"
    href="https://id.wikipedia.org/wiki/Kacamata"
    coords="290,85,355,111"
    shape="rect"
  />
  <area
    title="buku"
    href="https://id.wikipedia.org/wiki/Buku"
    coords="53,100,111,205"
    shape="rect"
  />
</map>

Hasil:

Tag Tambahan untuk Gambar

Ada beberapa tag pendukung <img> yang bisa kita gunakan di HTML, diantaranya:

• <figure>: untuk mewakili konten mandiri, semua elemen di dalamnya dianggap sebagai satu kesatuan.
• <figcaption>: untuk menambahkan deskripsi, biasanya dibuat di dalam tag <figure>.
• <picture>: untuk membungkus versi alternatif dari gambar.
• <source>: untuk menentukan sumber media atau gambar alternatif dengan format atau ukuran yang berbeda, untuk gambar biasanay ditulis di dalam tag <picture>.

Mari kita pelajar lebih lanjut.

Tag <figure> dan <figcaption>

Tag apa pun yang dibungkus dengan <figure> akan dianggap sebagai satu kesatuan, misalnya tag <img> dengan <figcaption>.

<figcaption> digunakan untuk menambahkan deskripsi atau caption gambar.

Contoh:

<figure>
  <img src="gambar.jpg" width="350" />
  <figcaption>Ngopi Sambil Mengolah Data</figcaption>
</figure>

Hasil:

Tag <picture> dan <source>

Tag <picture> adalah elemen yang membungkus versi alternatif dari suatu gambar, entah itu untuk ukuran layar tertentu, format tertentu, atau yang lainnya.

Sedangkan source adalah tag yang menyediakan versi alternatif gambar.

Misalnya, kita memiliki gambar dengan ukuran 1920 x 1173, lalu kita atur ukurannya melalu atribut, width="480" dan height="293".

Browser akan tetap menggunakan gambar asli yaitu 1920 x 1173, meskipun kita telah mengubahnya menggunakan atribut.

Artinya, pengguna harus mengunduh gambar yang besar meskipun mereka membukanya di ponsel. Ini tentunya menghabiskan bandwidth dan memperlambat waktu muat halaman.

Dengan tag <picture> dan <source> masalah ini bisa kita atasi, kita bisa menyediakan gambar dengan ukuran bervariasi sesuai dengan lebar layar.

Contoh:

<picture>
  <source srcset="gambar.jpg" media="(min-width: 600px)" />
  <source srcset="gambar-sm.jpg" media="(min-width: 400px)" />
  <img src="gambar.jpg" />
</picture>

Hasil:

Perhatikan contoh di atas, tag <source> yang ada di dalam <picture> adalah tag yang menyediakan gambar alternatif, gambar tersebut ditentukan dalam atribut srcset.

Atribut media pada tag <source> menentukan di layar dengan lebar berapa gambar akan ditampilkan.

Mari kita ambil bagian kode di atas:

<source srcset="gambar.jpg" media="(min-width: 600px)" />
<source srcset="gambar-sm.jpg" media="(min-width: 400px)" />

Kode di atas memberi tahu browser: jika lebar layar minimal 400px maka tampilan gambar gambar.jpg, jika lebarnya 600px gunakan gambar-sm.jpg.

Selain min-width, kita juga bisa menggunakan max-width.

Tag ini tidak hanya bisa digunakan untuk menyediakan versi gambar untuk berbagai lebar layar saja, tapi juga bisa kita gunakan untuk menyediakan gambar dalam format yang berbeda-beda.

Sedangkan gambar di dalam tag <img> digunakan sebagai cadangan, jika browser tidak mendukung versi yang disediakan maka gambar ini yang digunakan.

Selalu tambahkan tag <img> dan perhatikan urutan tag <source>.