Cara menampilkan gambar di HTML

Cara menampilkan gambar di HTML adalah keterampilan dasar yang wajib kalian kuasai untuk membuat halaman web terlihat hidup dan informatif.

Halo teman-teman, semoga kalian dalam keadaan semangat belajar web! Pada artikel ini kodelyly.com akan membahas cara kerja tag gambar, sumber file, pengaturan ukuran, hingga tips optimasi agar halaman tetap cepat dan SEO‑friendly.

Cara Menampilkan Gambar Di HTML

Tag utama untuk menampilkan gambar adalah <img>. Tag ini bersifat self-closing dan paling tidak membutuhkan atribut src (sumber file) serta alt (teks alternatif).

<img src="https://example.com/foto/produk.jpg" alt="Foto produk terbaru" />

Teks pada alt akan ditampilkan jika gambar gagal dimuat dan membantu mesin telusur memahami konteks gambar. Pastikan deskriptif, ringkas, dan relevan.

Mengatur Sumber Gambar: Relatif Vs Absolut

Kalian bisa memakai path relatif (untuk file di proyek yang sama) atau URL absolut (untuk file di domain lain/CDN). Contoh struktur proyek sederhana:

project/
  index.html
  assets/
    images/
      logo.png

Pemanggilan dengan path relatif di index.html:

<img src="./assets/images/logo.png" alt="Logo perusahaan" />

Sedangkan URL absolut cocok untuk CDN atau gambar lintas domain:

<img src="https://cdn.contoh.com/images/hero.webp" alt="Banner promosi" />

Alt Text, Ukuran, Dan Rasio

Gunakan alt untuk aksesibilitas dan SEO. Tentukan width dan height agar browser bisa memesan ruang sebelum gambar selesai dimuat, mengurangi layout shift. Untuk memastikan tetap responsif, kombinasikan atribut ukuran dengan CSS:

<img src="/assets/images/galeri-1.jpg" alt="Pemandangan pantai" width="800" height="533" style="max-width:100%; height:auto;" loading="lazy" />

Tabel ringkas atribut penting pada <img>:

Optimasi Performa Dan SEO Gambar

Pilih format efisien seperti WebP atau AVIF untuk ukuran file lebih kecil. Kalian dapat menyediakan fallback JPEG/PNG dengan elemen <picture> sehingga browser memilih format terbaik yang didukung.

<picture>
  <source srcset="/assets/images/hero.avif" type="image/avif" />
  <source srcset="/assets/images/hero.webp" type="image/webp" />
  <img src="/assets/images/hero.jpg" alt="Hero halaman produk" width="1200" height="630" loading="lazy" />
</picture>

Tambahkan juga kompresi gambar, gunakan dimensi sesuai kebutuhan, dan manfaatkan CDN bila trafik tinggi. Nama file yang deskriptif serta atribut alt yang jelas membantu image SEO dan aksesibilitas.

FAQ Cara Menampilkan Gambar Di HTML

1. Bagaimana menampilkan gambar lokal di folder proyek? Letakkan file di dalam folder (misal assets/images) lalu panggil dengan path relatif seperti src="./assets/images/nama-file.webp".
2. Kapan memakai <picture> dibanding <img> biasa? Gunakan <picture> saat butuh format/ukuran berbeda untuk kondisi berbeda, misalnya AVIF/WebP dengan fallback JPEG atau art direction untuk layar kecil.
3. Apakah alt wajib? Sangat disarankan. Tanpa alt, pembaca layar kehilangan konteks, dan mesin telusur sulit memahami isi gambar.
4. Cara membuat gambar responsif? Set style="max-width:100%; height:auto;" atau atur di CSS. Sertakan juga dimensi width dan height agar tata letak stabil.
5. Apa beda path relatif ./ dan absolut /? ./ relatif terhadap file saat ini, sedangkan / relatif ke akar domain. Pilih sesuai struktur proyek dan server.
6. Bagaimana mengoptimasi kecepatan muat? Gunakan format modern, kompresi, loading="lazy", dimensi tepat, dan pertimbangkan CDN.

Kesimpulan

Intinya, cara menampilkan gambar di HTML adalah dengan tag <img> yang memiliki src dan alt, ditambah pengaturan ukuran agar tata letak stabil, serta optimasi seperti lazy loading dan format modern untuk performa. Sekian artikel dari kodelyly.com, semoga bermanfaat untuk kalian yang sedang membangun website. Kalau ingin bahasan lanjutan seperti responsive images tingkat lanjut atau otomatisasi kompresi, beri tahu ya!