Cara Menampilkan Gambar di HTML dengan Tag <img>

Dalam pembuatan website modern, gambar adalah elemen visual yang sangat penting untuk menarik perhatian pengunjung. Cara menampilkan gambar di HTML menggunakan tag <img> adalah keterampilan fundamental yang harus dikuasai setiap web developer. Memahami cara menampilkan gambar di HTML dengan benar akan membuat website Anda lebih menarik, informatif, dan user-friendly.

Cara menampilkan gambar di HTML sangat mudah dipelajari, namun ada banyak atribut dan teknik yang perlu dipahami untuk mengoptimalkan gambar agar website loading cepat dan SEO-friendly. Artikel ini akan membahas secara lengkap tentang cara menampilkan gambar di HTML beserta best practices-nya.

Daftar isi

Apa Itu Tag HTML?
Struktur Dasar Tag
Atribut Penting Tag
Cara Menampilkan Gambar di HTML – Berbagai Metode
Format Gambar yang Didukung
Membuat Gambar Responsive
Styling Gambar dengan CSS
Gambar sebagai Link
Figure dan Figcaption
Image Maps (Gambar dengan Area Klik)
Best Practices Menampilkan Gambar di HTML
Optimasi Gambar untuk SEO
Kesalahan Umum dan Solusinya
Contoh Lengkap Implementasi
Kesimpulan

Apa Itu Tag HTML?

Tag <img> adalah elemen HTML yang digunakan untuk menampilkan gambar di halaman web. Cara menampilkan gambar di HTML menggunakan tag <img> yang merupakan self-closing tag (tidak memerlukan tag penutup). Tag ini memiliki atribut wajib src untuk menentukan lokasi file gambar dan alt untuk deskripsi alternatif.

Karakteristik Tag

Tag <img> memiliki karakteristik khusus:

Self-closing tag – Tidak memerlukan tag penutup
Inline element – Dapat ditempatkan dalam teks
Atribut src wajib – Menentukan sumber gambar
Atribut alt penting – Untuk accessibility dan SEO
Mendukung berbagai format – JPG, PNG, GIF, SVG, WebP

Struktur Dasar Tag

Cara menampilkan gambar di HTML dengan struktur dasar:

<img src="lokasi-gambar.jpg" alt="Deskripsi gambar">Code language: HTML, XML (xml)

Komponen tag img:

<img> – Tag untuk menampilkan gambar
src – Atribut sumber file gambar
alt – Atribut teks alternatif
Tidak ada tag penutup </img>

Contoh Sederhana

<img src="foto-profil.jpg" alt="Foto profil saya">
<img src="logo-perusahaan.png" alt="Logo Perusahaan ABC">Code language: HTML, XML (xml)

Atribut Penting Tag

1. Atribut `src` (Source)

Atribut src adalah atribut wajib yang menentukan lokasi file gambar. Cara menampilkan gambar di HTML dimulai dengan menentukan path yang benar.

Path Absolut (URL Lengkap)

<img src="https://example.com/images/foto.jpg" alt="Foto dari URL">Code language: HTML, XML (xml)

Path Relatif

<!-- Gambar di folder yang sama -->
<img src="gambar.jpg" alt="Gambar">

<!-- Gambar di subfolder -->
<img src="images/foto.jpg" alt="Foto">

<!-- Gambar di folder parent -->
<img src="../images/foto.jpg" alt="Foto">

<!-- Dari root directory -->
<img src="/assets/images/foto.jpg" alt="Foto">Code language: HTML, XML (xml)

2. Atribut `alt` (Alternative Text)

Atribut alt memberikan deskripsi teks alternatif untuk gambar. Sangat penting untuk accessibility dan SEO.

<img src="laptop-gaming.jpg" alt="Laptop gaming ASUS ROG dengan layar 15 inch">Code language: HTML, XML (xml)

Fungsi atribut alt:

Ditampilkan jika gambar gagal load
Dibaca oleh screen reader untuk tunanetra
Membantu SEO (search engine indexing)
Memberikan konteks gambar

Best practices alt text:

Deskriptif dan spesifik
Panjang 10-15 kata
Mengandung kata kunci (natural)
Tidak gunakan “gambar dari” atau “foto dari”

<!-- Kurang baik -->
<img src="laptop.jpg" alt="gambar">

<!-- Baik -->
<img src="laptop.jpg" alt="Laptop gaming dengan keyboard RGB dan layar 144Hz">Code language: HTML, XML (xml)

3. Atribut `width` dan `height`

Atribut width dan height menentukan ukuran gambar dalam pixel.

<img src="foto.jpg" alt="Foto" width="500" height="300">
Code language: HTML, XML (xml)

Keuntungan menentukan width dan height:

Mencegah layout shift saat loading
Meningkatkan Core Web Vitals
Browser dapat reserve space sebelum gambar load
Meningkatkan performa website

<!-- Dengan ukuran tetap -->
<img src="banner.jpg" alt="Banner promo" width="1200" height="400">

<!-- Responsive dengan CSS -->
<img src="foto.jpg" alt="Foto" width="800" height="600" style="max-width: 100%; height: auto;">Code language: HTML, XML (xml)

4. Atribut `title`

Atribut title memberikan tooltip saat hover.

<img src="produk.jpg" alt="Laptop gaming" title="Klik untuk melihat detail produk">Code language: HTML, XML (xml)

5. Atribut `loading`

Atribut loading untuk lazy loading gambar (HTML5).

<!-- Lazy loading -->
<img src="gambar.jpg" alt="Gambar" loading="lazy">

<!-- Eager loading (default) -->
<img src="hero-image.jpg" alt="Hero" loading="eager">Code language: HTML, XML (xml)

Nilai loading:

lazy – Load gambar saat mendekati viewport
eager – Load gambar segera (default)

6. Atribut `srcset` dan `sizes`

Untuk responsive images dengan berbagai resolusi.

<img 
    src="gambar-small.jpg" 
    srcset="gambar-small.jpg 400w,
            gambar-medium.jpg 800w,
            gambar-large.jpg 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1000px) 800px,
           1200px"
    alt="Gambar responsive">Code language: HTML, XML (xml)

Cara Menampilkan Gambar di HTML – Berbagai Metode

1. Gambar dari Folder Lokal

<!-- Folder yang sama dengan HTML -->
<img src="foto.jpg" alt="Foto">

<!-- Subfolder images -->
<img src="images/foto.jpg" alt="Foto">

<!-- Nested folder -->
<img src="assets/images/foto.jpg" alt="Foto">Code language: HTML, XML (xml)

2. Gambar dari URL Eksternal

<img src="https://example.com/images/foto.jpg" alt="Foto dari website lain">
<img src="https://via.placeholder.com/300x200" alt="Placeholder image">Code language: HTML, XML (xml)

3. Gambar Base64 (Inline)

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Gambar base64">Code language: HTML, XML (xml)

4. Gambar SVG Inline

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="blue" />
</svg>Code language: HTML, XML (xml)

Format Gambar yang Didukung

Cara menampilkan gambar di HTML mendukung berbagai format:

1. JPEG/JPG

<img src="foto.jpg" alt="Format JPEG">Code language: HTML, XML (xml)

Karakteristik:

Kompresi lossy
Ukuran file kecil
Cocok untuk foto
Tidak mendukung transparansi

2. PNG

<img src="logo.png" alt="Format PNG">Code language: HTML, XML (xml)

Karakteristik:

Kompresi lossless
Mendukung transparansi
Cocok untuk logo dan grafis
Ukuran file lebih besar

3. GIF

<img src="animasi.gif" alt="Format GIF animasi">Code language: HTML, XML (xml)

Karakteristik:

Mendukung animasi
Transparansi sederhana
Terbatas 256 warna
Cocok untuk animasi sederhana

4. WebP

<img src="gambar.webp" alt="Format WebP modern">Code language: HTML, XML (xml)

Karakteristik:

Format modern dari Google
Kompresi lebih baik dari JPEG/PNG
Mendukung transparansi dan animasi
Ukuran file 25-35% lebih kecil

5. SVG

<img src="icon.svg" alt="Format SVG vector">Code language: HTML, XML (xml)

Karakteristik:

Format vector (scalable)
Ukuran file sangat kecil
Tidak pecah saat diperbesar
Cocok untuk icon dan logo

Membuat Gambar Responsive

Cara menampilkan gambar di HTML yang responsive:

1. CSS Max-Width

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>

<img src="gambar.jpg" alt="Gambar responsive">Code language: HTML, XML (xml)

2. Menggunakan srcset

<img 
    src="gambar-400.jpg"
    srcset="gambar-400.jpg 400w,
            gambar-800.jpg 800w,
            gambar-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1000px) 800px,
           1200px"
    alt="Gambar dengan srcset">Code language: HTML, XML (xml)

3. Picture Element

<picture>
    <source media="(max-width: 600px)" srcset="gambar-small.jpg">
    <source media="(max-width: 1000px)" srcset="gambar-medium.jpg">
    <img src="gambar-large.jpg" alt="Gambar dengan picture element">
</picture>Code language: HTML, XML (xml)

4. Object-Fit CSS

<style>
    .cover-image {
        width: 300px;
        height: 200px;
        object-fit: cover;
    }
</style>

<img src="gambar.jpg" alt="Gambar" class="cover-image">Code language: HTML, XML (xml)

Nilai object-fit:

fill – Stretch gambar (default)
contain – Fit dalam container
cover – Cover container (crop jika perlu)
none – Ukuran asli
scale-down – Pilih yang lebih kecil antara none atau contain

Styling Gambar dengan CSS

1. Border dan Shadow

<style>
    .styled-image {
        border: 3px solid #3498db;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
</style>

<img src="foto.jpg" alt="Foto dengan style" class="styled-image">Code language: HTML, XML (xml)

2. Rounded Image

<style>
    .rounded {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        object-fit: cover;
    }
</style>

<img src="profile.jpg" alt="Foto profil" class="rounded">Code language: HTML, XML (xml)

3. Grayscale Filter

<style>
    .grayscale {
        filter: grayscale(100%);
    }
    
    .grayscale:hover {
        filter: grayscale(0%);
    }
</style>

<img src="foto.jpg" alt="Foto grayscale" class="grayscale">Code language: HTML, XML (xml)

4. Hover Effect

<style>
    .hover-zoom {
        transition: transform 0.3s;
    }
    
    .hover-zoom:hover {
        transform: scale(1.1);
    }
</style>

<img src="produk.jpg" alt="Produk" class="hover-zoom">Code language: HTML, XML (xml)

Gambar sebagai Link

Cara menampilkan gambar di HTML yang dapat diklik:

<a href="halaman-detail.html">
    <img src="produk.jpg" alt="Klik untuk detail produk">
</a>

<!-- Link eksternal -->
<a href="https://example.com" target="_blank">
    <img src="banner.jpg" alt="Banner promo">
</a>Code language: HTML, XML (xml)

Figure dan Figcaption

Untuk gambar dengan caption:

<figure>
    <img src="pemandangan.jpg" alt="Pemandangan gunung">
    <figcaption>Pemandangan Gunung Bromo saat sunrise</figcaption>
</figure>Code language: HTML, XML (xml)

Dengan styling:

<style>
    figure {
        margin: 20px 0;
        text-align: center;
    }
    
    figure img {
        max-width: 100%;
        border-radius: 8px;
    }
    
    figcaption {
        margin-top: 10px;
        font-style: italic;
        color: #666;
    }
</style>

<figure>
    <img src="foto.jpg" alt="Foto dokumentasi">
    <figcaption>Dokumentasi acara peluncuran produk 2024</figcaption>
</figure>Code language: HTML, XML (xml)

Image Maps (Gambar dengan Area Klik)

<img src="peta.jpg" alt="Peta Indonesia" usemap="#peta-indonesia">

<map name="peta-indonesia">
    <area shape="rect" coords="34,44,270,350" href="jakarta.html" alt="Jakarta">
    <area shape="circle" coords="337,300,44" href="surabaya.html" alt="Surabaya">
    <area shape="poly" coords="130,147,200,107,254,219,130,147" href="bandung.html" alt="Bandung">
</map>Code language: HTML, XML (xml)

Best Practices Menampilkan Gambar di HTML

1. Selalu Gunakan Atribut alt

<!-- Wajib -->
<img src="foto.jpg" alt="Deskripsi yang jelas dan spesifik">

<!-- Untuk gambar dekoratif -->
<img src="decoration.png" alt="">Code language: HTML, XML (xml)

2. Optimalkan Ukuran File

<!-- Gunakan format yang tepat -->
<img src="foto.jpg" alt="Foto"> <!-- JPEG untuk foto -->
<img src="logo.png" alt="Logo"> <!-- PNG untuk logo -->
<img src="icon.svg" alt="Icon"> <!-- SVG untuk icon -->Code language: HTML, XML (xml)

Tips optimasi:

Compress gambar sebelum upload
Gunakan WebP untuk browser modern
Resize gambar sesuai kebutuhan
Target ukuran < 100KB untuk web

3. Tentukan Width dan Height

<img src="banner.jpg" alt="Banner" width="1200" height="400">Code language: HTML, XML (xml)

4. Gunakan Lazy Loading

<img src="gambar.jpg" alt="Gambar" loading="lazy">Code language: HTML, XML (xml)

5. Responsive Images

<img 
    src="gambar.jpg" 
    alt="Gambar responsive"
    style="max-width: 100%; height: auto;">Code language: HTML, XML (xml)

6. Accessibility

<!-- Alt text yang baik -->
<img src="laptop.jpg" alt="Laptop gaming ASUS ROG dengan keyboard RGB">

<!-- Bukan -->
<img src="laptop.jpg" alt="laptop">Code language: HTML, XML (xml)

Optimasi Gambar untuk SEO

1. Nama File yang Deskriptif

<!-- Baik -->
<img src="laptop-gaming-asus-rog-2024.jpg" alt="Laptop gaming ASUS ROG 2024">

<!-- Kurang baik -->
<img src="IMG_1234.jpg" alt="Laptop">Code language: HTML, XML (xml)

2. Alt Text yang Optimal

<img src="tutorial-html.jpg" alt="Tutorial lengkap belajar HTML untuk pemula web development">Code language: HTML, XML (xml)

Best practices alt text:

Deskriptif dan natural
Mengandung kata kunci (tidak stuffing)
Panjang 10-15 kata
Relevan dengan konten

3. Ukuran File yang Optimal

Hero image: < 200KB
Content image: < 100KB
Thumbnail: < 50KB
Icon: < 10KB

4. Format Modern

<picture>
    <source srcset="gambar.webp" type="image/webp">
    <source srcset="gambar.jpg" type="image/jpeg">
    <img src="gambar.jpg" alt="Gambar dengan fallback">
</picture>Code language: HTML, XML (xml)

5. Structured Data

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/images/foto.jpg",
  "description": "Deskripsi gambar untuk SEO"
}
</script>Code language: HTML, XML (xml)

Kesalahan Umum dan Solusinya

1. Gambar Tidak Muncul

Penyebab:

Path file salah
File tidak ada
Typo nama file
Permission denied

Solusi:

<!-- Periksa path dengan benar -->
<img src="images/foto.jpg" alt="Foto">

<!-- Gunakan path absolut untuk testing -->
<img src="https://example.com/images/foto.jpg" alt="Foto">Code language: HTML, XML (xml)

2. Gambar Terlalu Besar

Solusi:

<style>
    img {
        max-width: 100%;
        height: auto;
    }
</style>Code language: HTML, XML (xml)

3. Gambar Pecah/Blur

Penyebab:

Resolusi terlalu kecil
Diperbesar terlalu besar

Solusi:

Gunakan gambar dengan resolusi tinggi
Atau gunakan SVG untuk icon/logo

4. Loading Lambat

Solusi:

<!-- Lazy loading -->
<img src="gambar.jpg" alt="Gambar" loading="lazy">

<!-- Compress gambar -->
<!-- Gunakan WebP -->
<!-- Gunakan CDN -->Code language: HTML, XML (xml)

5. Tidak Ada Alt Text

<!-- Salah -->
<img src="foto.jpg">

<!-- Benar -->
<img src="foto.jpg" alt="Deskripsi foto yang jelas">Code language: HTML, XML (xml)

Contoh Lengkap Implementasi

Berikut ini adalah contoh lengkap implementasi pembuatan gambar menggunakan tag <img> di HTML, contoh kode di bawah ini mungkin bisa anda gunakan sebagai bahan pembelajaran, dan jangan lupa untuk melakukan kustomisasi atau modifikasi agar dapat melatih keterampilan koding HTML.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeri Foto - Contoh Gambar HTML</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .hero-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 10px;
        }
        
        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        
        .gallery-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .gallery-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.3s;
        }
        
        .gallery-item:hover img {
            transform: scale(1.1);
        }
        
        .profile-image {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #3498db;
        }
        
        figure {
            margin: 30px 0;
            text-align: center;
        }
        
        figcaption {
            margin-top: 10px;
            font-style: italic;
            color: #666;
        }
    </style>
</head>
<body>
    <header>
        <h1>Galeri Foto Website</h1>
    </header>

    <!-- Hero Image -->
    <section>
        <img 
            src="https://fastly.picsum.photos/id/866/1200/400.jpg?hmac=V0hqejFNTg6y8iVymlNIBWVbLrbAyc4hxrT8jWrcfbE" 
            alt="Banner utama website dengan pemandangan indah"
            class="hero-image"
            width="1200"
            height="400"
            loading="eager">
    </section>

    <!-- Profile Section -->
    <section style="text-align: center; margin: 40px 0;">
        <img 
            src="https://avatar.iran.liara.run/public/14" 
            alt="Foto profil John Doe - Web Developer"
            class="profile-image"
            width="150"
            height="150">
        <h2>John Doe</h2>
        <p>Web Developer & Designer</p>
    </section>

    <!-- Gallery with Figure -->
    <section>
        <h2>Portfolio Pekerjaan</h2>
        
        <figure>
            <img 
                src="https://fastly.picsum.photos/id/569/800/500.jpg?hmac=2_br_TJa8V5SsqcPncnWCQ879Zklv96L_nyCirhvNV8" 
                alt="Website e-commerce modern dengan design minimalis"
                width="800"
                height="500"
                loading="lazy"
                style="max-width: 100%; height: auto;">
            <figcaption>Project E-commerce - Website toko online modern</figcaption>
        </figure>

        <figure>
            <img 
                src="https://fastly.picsum.photos/id/926/800/500.jpg?hmac=YzxjYlS_rA_VZb6N2Cr0oXocPe5YX4tqqJZrM5fxBbg" 
                alt="Aplikasi mobile banking dengan UI/UX yang user-friendly"
                width="800"
                height="500"
                loading="lazy"
                style="max-width: 100%; height: auto;">
            <figcaption>Project Mobile Banking - Aplikasi perbankan digital</figcaption>
        </figure>
    </section>

    <!-- Image Gallery Grid -->
    <section>
        <h2>Galeri Foto</h2>
        <div class="gallery">
            <div class="gallery-item">
                <a href="detail-1.html">
                    <img 
                        src="https://fastly.picsum.photos/id/288/1000/1000.jpg?hmac=g45YxmYKZYl0LSLl-kB2Z8YcbUA9F2VJTiPRfbs3pLE" 
                        alt="Pemandangan gunung dengan sunrise yang indah"
                        loading="lazy">
                </a>
            </div>
            
            <div class="gallery-item">
                <a href="detail-2.html">
                    <img 
                        src="https://fastly.picsum.photos/id/413/1000/1000.jpg?hmac=wZStJqqRP0qk9JveyCpauLtm3OTGI1Dt7EMoOAI513Y" 
                        alt="Pantai dengan pasir putih dan air laut biru jernih"
                        loading="lazy">
                </a>
            </div>
            
            <div class="gallery-item">
                <a href="detail-3.html">
                    <img 
                        src="https://fastly.picsum.photos/id/313/1000/1000.jpg?hmac=qcCfVVUPWJC7efOGV1TQf3JUMQfy05hJGy7w_t5XThQ" 
                        alt="Kota metropolitan dengan gedung pencakar langit"
                        loading="lazy">
                </a>
            </div>
            
            <div class="gallery-item">
                <a href="detail-4.html">
                    <img 
                        src="https://fastly.picsum.photos/id/189/1000/1000.jpg?hmac=ASUSlzh4Qkll_0z4acMnIzFkiUnHY5oEvixRAaPyGD8" 
                        alt="Hutan tropis dengan pepohonan hijau lebat"
                        loading="lazy">
                </a>
            </div>
        </div>
    </section>

    <!-- Responsive Image with srcset -->
    <section style="margin-top: 40px;">
        <h2>Gambar Responsive</h2>
        <img 
            src="https://fastly.picsum.photos/id/877/1000/500.jpg?hmac=ZC1qcgHZEx4Z_n9G42JPyuuN96CqYXPn-lBCPeoF0wI"
            srcset="https://fastly.picsum.photos/id/877/1000/500.jpg?hmac=ZC1qcgHZEx4Z_n9G42JPyuuN96CqYXPn-lBCPeoF0wI 400w,
                    https://fastly.picsum.photos/id/877/1000/500.jpg?hmac=ZC1qcgHZEx4Z_n9G42JPyuuN96CqYXPn-lBCPeoF0wI 800w,
                    https://fastly.picsum.photos/id/877/1000/500.jpg?hmac=ZC1qcgHZEx4Z_n9G42JPyuuN96CqYXPn-lBCPeoF0wI 1200w"
            sizes="(max-width: 600px) 400px,
                   (max-width: 1000px) 800px,
                   1200px"
            alt="Gambar responsive yang menyesuaikan ukuran layar"
            loading="lazy"
            style="max-width: 100%; height: auto;">
    </section>

    <!-- Picture Element for Art Direction -->
    <section style="margin-top: 40px;">
        <h2>Art Direction</h2>
        <picture>
            <source media="(max-width: 600px)" srcset="https://fastly.picsum.photos/id/583/600/400.jpg?hmac=0iIs0bCBwDuhILxxqK5cWksFXGvoery6Qfnkgs5hMuc">
            <source media="(max-width: 1000px)" srcset="https://fastly.picsum.photos/id/908/1000/400.jpg?hmac=OtmPNj0Sv9eE-ON2uD-PKwqFynyLnagFfYIi8y_9Lao">
            <img 
                src="https://fastly.picsum.photos/id/1063/1200/400.jpg?hmac=HjIxFd8eoKa0McHIQvQE4gbnoVNMhCo1ueh-_sOyx6I" 
                alt="Banner yang berbeda untuk setiap ukuran layar"
                style="width: 100%; height: auto;">
        </picture>
    </section>

    <footer style="margin-top: 60px; text-align: center; padding: 20px; background: #f5f5f5;">
        <p>&copy; 2024 Website Galeri. All rights reserved.</p>
    </footer>
</body>
</html>Code language: HTML, XML (xml)

Kesimpulan

Cara menampilkan gambar di HTML menggunakan tag <img> adalah keterampilan fundamental dalam web development. Dengan memahami cara menampilkan gambar di HTML dengan benar, Anda dapat membuat website yang lebih menarik, cepat, dan SEO-friendly.

Poin-poin penting:

Gunakan tag <img> dengan atribut src dan alt
Atribut alt wajib untuk accessibility dan SEO
Tentukan width dan height untuk performa
Gunakan loading="lazy" untuk lazy loading
Optimalkan ukuran file gambar
Buat gambar responsive dengan CSS
Gunakan format yang tepat (JPEG, PNG, WebP, SVG)
Nama file dan alt text yang SEO-friendly
Implementasikan srcset untuk responsive images
Gunakan <figure> dan <figcaption> untuk gambar dengan caption

Dengan menguasai cara menampilkan gambar di HTML, Anda dapat membuat website dengan visual yang menarik, loading cepat, dan optimal untuk SEO!

Cara Menampilkan Gambar di HTML dengan Tag <img>

Daftar isi

Apa Itu Tag HTML?

Karakteristik Tag

Struktur Dasar Tag

Contoh Sederhana

Atribut Penting Tag

1. Atribut src (Source)

Path Absolut (URL Lengkap)

Path Relatif

2. Atribut alt (Alternative Text)

3. Atribut width dan height

4. Atribut title

5. Atribut loading

6. Atribut srcset dan sizes

Cara Menampilkan Gambar di HTML – Berbagai Metode

1. Gambar dari Folder Lokal

2. Gambar dari URL Eksternal

3. Gambar Base64 (Inline)

4. Gambar SVG Inline

Format Gambar yang Didukung

1. JPEG/JPG

2. PNG

3. GIF

4. WebP

5. SVG

Membuat Gambar Responsive

1. CSS Max-Width

2. Menggunakan srcset

3. Picture Element

4. Object-Fit CSS

Styling Gambar dengan CSS

1. Border dan Shadow

2. Rounded Image

3. Grayscale Filter

4. Hover Effect

Gambar sebagai Link

Figure dan Figcaption

Image Maps (Gambar dengan Area Klik)

Best Practices Menampilkan Gambar di HTML

1. Selalu Gunakan Atribut alt

2. Optimalkan Ukuran File

3. Tentukan Width dan Height

4. Gunakan Lazy Loading

5. Responsive Images

6. Accessibility

Optimasi Gambar untuk SEO

1. Nama File yang Deskriptif

2. Alt Text yang Optimal

3. Ukuran File yang Optimal

4. Format Modern

5. Structured Data

Kesalahan Umum dan Solusinya

1. Gambar Tidak Muncul

2. Gambar Terlalu Besar

3. Gambar Pecah/Blur

4. Loading Lambat

5. Tidak Ada Alt Text

Contoh Lengkap Implementasi

Kesimpulan

1 HTML Dasar (Pemula)

2 HTML Menengah

3 HTML Lanjutan

4 HTML Mahir

5 HTML Ahli (Bonus & Tips)

Related article!

Comments

Leave comment

1. Atribut `src` (Source)

2. Atribut `alt` (Alternative Text)

3. Atribut `width` dan `height`

4. Atribut `title`

5. Atribut `loading`

6. Atribut `srcset` dan `sizes`