Menampilkan Gambar di HTML: Tag <img> dan Atribut Penting

Menambahkan gambar ke halaman web Anda adalah cara yang efektif untuk membuat konten lebih menarik secara visual dan mudah dipahami. Di HTML, Anda menggunakan tag <img> untuk menyisipkan gambar. Penting untuk diingat bahwa <img> adalah tag kosong (self-closing tag), yang berarti ia tidak memerlukan tag penutup (</img>). Semua informasi yang diperlukan untuk menampilkan gambar diberikan melalui atribut-atribut di dalam tag pembuka itu sendiri.

1. Atribut Wajib: src (Source)

Atribut src adalah atribut yang paling penting dan wajib ada dalam tag <img>. Atribut ini menentukan jalur (path) atau URL dari file gambar yang ingin ditampilkan.

Jalur Relatif: Ini adalah cara yang direkomendasikan untuk gambar yang berada di folder yang sama atau di sub-folder dalam struktur situs Anda.

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

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

Jalur Absolut (URL Lengkap): Digunakan untuk mengambil gambar dari lokasi di internet (misalnya, dari situs web lain). Anda harus menyertakan protokolnya (http:// atau https://).

<img src="https://www.websiteeksternal.com/gambar/ilustrasi.gif" alt="Ilustrasi eksternal">

2. Atribut Kritis: alt (Alternative Text)

Atribut alt (singkatan dari "alternative text") menyediakan deskripsi teks untuk gambar. Meskipun secara teknis opsional, atribut ini sangat direkomendasikan dan dianggap sebagai praktik terbaik karena beberapa alasan penting:

Aksesibilitas: Pembaca layar (screen readers) yang digunakan oleh tunanetra akan membaca teks alt ini untuk menjelaskan gambar kepada pengguna. Ini krusial agar situs web Anda dapat diakses oleh semua orang.
SEO (Search Engine Optimization): Mesin pencari menggunakan teks alt untuk memahami konten gambar, yang dapat membantu gambar Anda muncul dalam hasil pencarian gambar.
Pengalaman Pengguna: Jika gambar gagal dimuat (misalnya, karena koneksi internet lambat, kesalahan jalur, atau file gambar rusak), teks alt akan ditampilkan sebagai pengganti, memberikan konteks kepada pengguna.

Contoh:

<img src="pemandangan.jpg" alt="Pegunungan bersalju dengan danau di bawahnya saat matahari terbit">

3. Atribut Ukuran: width dan height

Atribut width dan height digunakan untuk menentukan lebar dan tinggi gambar, biasanya dalam piksel (px).

Pentingnya: Dengan menentukan width dan height, browser dapat mengalokasikan ruang yang tepat untuk gambar bahkan sebelum gambar tersebut selesai dimuat. Ini mencegah pergeseran tata letak (layout shift) yang dapat mengganggu pengalaman pengguna saat halaman dimuat. Pergeseran tata letak ini juga merupakan faktor penting dalam metrik Core Web Vitals (Cumulative Layout Shift - CLS) yang memengaruhi SEO.
Catatan: Meskipun Anda bisa mengontrol ukuran dengan atribut ini, sangat disarankan untuk menggunakan CSS (width, height, max-width, object-fit) untuk kontrol ukuran yang lebih responsif dan fleksibel. Jika Anda hanya menentukan width (atau height) di HTML, browser akan secara otomatis menghitung rasio aspek untuk menjaga proporsi gambar agar tidak terdistorsi.

Contoh:

<img src="logo.png" alt="Logo Aplikasi Keluhan" width="100" height="100">

Contoh Lengkap Penggunaan <img>:

<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Halaman dengan Gambar</title>

    <style>

        /* CSS untuk membuat gambar responsif agar tampil baik di berbagai ukuran layar */

        img {

            max-width: 100%; /* Gambar tidak akan melebihi lebar elemen induknya */

            height: auto;    /* Tinggi akan disesuaikan secara proporsional */

            display: block;  /* Menghilangkan sedikit ruang kosong di bawah gambar */

            margin-top: 20px;

            border: 1px solid #ddd;

            padding: 5px;

            border-radius: 5px;

        }

    </style>

</head>

<body>

    <h1>Galeri Foto Proyek</h1>

    <h2>Ilustrasi Dashboard Aplikasi</h2>

    <img src="images/dashboard-aplikasi.jpg" alt="Tampilan dashboard aplikasi keluhan mahasiswa dengan grafik statistik" width="800" height="450">

    <p>Ini adalah ilustrasi antarmuka dashboard admin untuk memantau keluhan.</p>

    <h2>Logo Resmi Kampus</h2>

    <img src="https://via.placeholder.com/150x150?text=Logo+Kampus" alt="Logo Universitas ABC" width="150" height="150">

    <p>Logo resmi yang digunakan pada setiap halaman web.</p>

</body>

</html>

Memahami penggunaan tag <img> beserta atribut src dan alt adalah dasar penting dalam pengembangan web untuk menampilkan konten visual secara efektif, sekaligus memastikan aksesibilitas dan kinerja yang baik.

# HTML # Tutorial

Postingan

Menampilkan Gambar di HTML: Tag <img> dan Atribut Penting