Skip to HeaderSkip to PostSkip to Footer

HTML Images

Daftar Isi

    HTML Images - Berikut ini adalah rangkuman tentang tag/ elemen HTML IMG.

    Apa itu HTML Images?

    HTML Images atau <img> adalah sebuah elemen HTML yang berfungsi untuk menampilkan gambar di halaman website.

    Tag atau elemen ini tidak perlu mempunyai isi (hanya memerlukan atribut) dan tidak memerlukan tag penutup (</img>).

    Atribut penting yang wajib ada pada tag <img> adalah:

    1. src - berisi alamat dari gambar.
    2. alt - berisi teks yang mendeskripsikan gambar.
    3. title - berisi teks yang mendeskripsikan gambar saat disorot.

    Atribut alt dan title menjadi penting karena menjadi nilai tambah untuk SEO gambar dan membantu screen reader memahami konteks dari gambar.

    Atribut dan Fungsi

    Atribut Fungsi Value Contoh
    src Berisikan alamat dari gambar yang akan ditampilkan. URL https://www.ninura.com/main/img/logo.png
    width Berisikan ukuran lebar dari gambar. angka dalam satuan piksel/ persentase / auto 100 / 100px / 100% / auto
    height Berisikan ukuran tinggi dari gambar. angka dalam satuan piksel/ persentase / auto 100 / 100px / 100% / auto
    align Berisikan posisi dari gambar pada saat muncul. left / right/ center center
    alt Berisikan teks alternatif jika gambar gagal dimuat. Teks Gambar Hewan
    title Berisikan teks yang akan tampil pada saat gambar ditunjuk (hover) atau difokuskan. Teks Gambar Hewan
    style Berisikan code styling CSS untuk gambar. CSS Value width:100%;height:auto;float:left;
    loading Menentukan bagaimana gambar akan dimuat. Ini adalah atribut baru, untuk lebih jelasnya tentang atribut ini, silahkan baca artikel tentang Atribut Loading. eager / lazy / auto lazy

    Format Gambar yang Didukung

    Ekstensi File Format
    .apng Animated Portable Network Graphics
    .gif Graphics Interchange Format
    .ico, .cur Microsoft Icon
    .jpg, .jpeg, .jfif, .pjpeg, .pjp Joint Photographic Expert Group image
    .png Portable Network Graphics
    .svg Scalable Vector Graphics

    Contoh Penerapan

    <img src='https://1.bp.blogspot.com/-_UWhBEd5l9E/X7XC1q-fyvI/AAAAAAAAAsM/aAMVvE38FiEKvVpL0GOlFV-L4JkubqkSgCK4BGAYYCw/s200-rw/android-chrome-512x512.png' title='Logo Ninura' alt='Logo Ninura' width='200' height='200' loading='lazy'/>

    Hasil

    Catatan

    • Elemen IMG bersifat void dan tidak memerlukan tag penutup "</img>".
    • Atribut ALT akan tampil jika gambar tidak bisa dimuat.
    • Jika atribut width dan height digunakan keduanya, maka gambar akan ditekan agar sesuai dengan ukuran yang telah ditentukan.
    • Jika atribut width atau height digunakan salah satunya, maka ukuran yang tidak digunakan akan disesuaikan secara otomatis. Contohnya, kita menggunakan atribut width saja pada gambar dengan resolusi 100x100 piksel. Maka, jika width diatur dengan nilai 50, height-nya juga akan secara otomatis berubah menjadi 50.
    • Atribut loading hanya berfungsi pada beberapa browser yang sudah mendukung atribut tersebut.
    • Penggunaan gambar dapat membuat loading page menjadi berat, terutama untuk gambar berkualitas High Definition (HD). Gunakan elemen gambar dengan bijak.
    • Gambar dari pihak ketiga bisa saja memiliki hak cipta, jika kamu menggunakan gambar dari pihak lain, pastikan kamu tidak melanggar hukum hak cipta yang ada.

    Penutup

    Itulah sedikit rangkuman tentang HTML Images yang bisa saya bagikan. Jika ada yang kurang, kurang jelas, atau salah silahkan beritahukan atau tanyakan saja melalui kolom komentar di bawah. Semoga bermanfaat dan sampai jumpa di tulisan saya lainnya.

    Gambar adalah elemen yang dapat menambah nilai dari tampilan dan konten dari sebuah halaman web.Ninura

    Komentar

    Posting Komentar

    Harap berikan komentar yang relevan dengan topik tulisan.
    Jangan menyertakan link yang tidak berhubungan dengan konten tulisan. Apabila komentar mengandung link (apalagi yang tidak relevan), maka komentar akan dihapus.
    Budayakan sopan santun, hindari penggunaan bahasa yang provokatif, SARA, pornografi.
    Kritik dan saran yang membangun untuk konten ataupun untuk blog sangat berarti bagi Ninura.