HTML Images: Panduan Lengkap dari Dasar sampai Expert! (Tutorial HTML Part 17)

Kamu lagi belajar HTML dan bingung soal gambar? Tenang, di artikel ini kita bakal bahas tuntas tentang HTML Images, mulai dari cara pakainya, atribut penting, sampai trik biar gambar di websitemu makin kece. Yuk, langsung kita kupas semuanya!

Apa Itu HTML Images?

HTML images adalah elemen penting buat bikin website jadi lebih hidup. Gambar bisa dipakai buat menambah estetika, menjelaskan konten, atau bahkan jadi tombol/link. Di HTML, elemen <img> dipakai buat menampilkan gambar.

HTML Images Syntax

Cara nulis syntax gambar di HTML simpel banget. Contohnya kayak gini:

<img src="gambar.jpg" alt="Deskripsi gambar">

Penjelasan:

• <img> adalah tag buat gambar.
• src (source) menunjuk lokasi file gambar.
• alt (alternative text) buat deskripsi kalau gambarnya gagal dimuat.

Note: Tag <img> itu self-closing, jadi nggak perlu ada penutup kayak </img>.

The src Attribute

Atribut src adalah alamat file gambar yang pengen ditampilkan. Bisa berupa:

1. Relative Path (file ada di folder project):

<img src="images/foto.jpg" alt="Foto keren">

2. Absolute Path (gambar dari internet atau server lain):

<img src="https://www.website.com/foto.jpg" alt="Gambar dari server lain">

The alt Attribute

Atribut alt wajib banget ada karena:

1. SEO Friendly: Mesin pencari seperti Google pakai teks di alt buat memahami gambar.
2. Aksesibilitas: Buat membantu pengguna dengan keterbatasan visual (screen reader).
3. Fallback: Kalau gambar nggak muncul, teks ini akan tampil.

Contoh:

<img src="gambar-tidak-ada.jpg" alt="Gambar tidak ditemukan">

Image Size – Width dan Height

Lo bisa atur ukuran gambar pakai atribut width dan height. Ukurannya bisa pakai pixel atau persentase.

Contoh:

<img src="gambar.jpg" alt="Gambar ukuran kecil" width="300" height="200">

Width dan Height atau Style?

Selain atribut bawaan, lo juga bisa atur ukuran gambar pakai CSS. Mana yang lebih baik?

1. Atribut Width & Height: Simpel, tapi kurang fleksibel.
2. CSS: Lebih powerful dan modern.

Contoh pakai CSS:

<img src="gambar.jpg" alt="Gambar dengan CSS" style="width: 100px; height: auto;">

Tips:
Selalu pakai height: auto biar gambar tetap proporsional.

Images di Folder Lain

Kalau file gambar ada di folder lain, lo harus tunjukin path-nya.

Contoh:

<img src="folderku/gambar.jpg" alt="Gambar di folder lain">

Images di Server atau Website Lain

Gambar nggak harus disimpan di project lo. Lo juga bisa pakai gambar dari server lain.

Contoh:

<img src="https://www.website.com/foto.jpg" alt="Gambar dari server lain">

Note: Pastikan punya izin kalau pakai gambar dari website lain, ya!

Animated Images

GIF adalah format gambar animasi yang bikin website lebih interaktif. Cara pakainya sama kayak gambar biasa:

Contoh:

<img src="animasi.gif" alt="Animasi GIF lucu">

Image as a Link

Lo bisa bikin gambar jadi link interaktif. Gimana caranya? Bungkus elemen <img> di dalam <a>.

Contoh:

<a href="https://www.website.com">
  <img src="gambar.jpg" alt="Klik gambar ini">
</a>

Image Floating

Floating dipakai buat bikin gambar nempel ke kiri atau kanan teks.

Contoh:

<img src="gambar.jpg" alt="Floating image" style="float: left; margin-right: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Hasilnya? Gambar akan nempel di sebelah kiri teks.

Common Image Formats

Format gambar itu ada banyak, tapi yang umum dipakai di web adalah:

1. JPEG/JPG: Kecil, cocok buat foto.
2. PNG: Mendukung transparansi, cocok buat logo atau ilustrasi.
3. GIF: Untuk animasi sederhana.
4. SVG: Vector, cocok buat icon atau gambar yang skalanya besar.
5. WebP: Format modern yang lebih ringan tapi kualitasnya tetap bagus.

Tips dan Trik Biar HTML Images Lo Kece

1. Gunakan Gambar yang Optimasi
Compress gambar pakai tools kayak TinyPNG biar load lebih cepat.

2. Pastikan Responsif
Tambahkan CSS kayak ini:

<img src="gambar.jpg" alt="Gambar responsif" style="max-width: 100%; height: auto;">

3. Gunakan Deskripsi Alt yang Relevan
Teks alt harus sesuai dengan konten gambarnya.

4. Pilih Format yang Tepat
Gunakan format yang sesuai dengan kebutuhan (JPEG buat foto, PNG buat logo, dll).

Kesimpulan

Gambar di HTML itu elemen yang sederhana tapi powerful. Dengan paham atribut kayak src, alt, ukuran, dan format gambar, lo bisa bikin website yang nggak cuma cantik tapi juga fungsional. Jangan lupa optimasi gambar buat SEO dan kecepatan website, ya!

Semangat ngoding, bestie coder!