Home / HTML / Cara Menampilkan Gambar di HTML dengan Tag <img>

Cara Menampilkan Gambar di HTML dengan Tag <img>

Created at by Aris Munandar
Share on

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

Baca juga: Cara Membuat Link di HTML Menggunakan Tag

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)

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!

Share on

Related article!

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Bahasaweb.com

Subscribe now to keep reading and get access to the full archive.

Continue reading