Lompat ke konten Lompat ke sidebar Lompat ke Berlangganan Lompat ke footer

HTML Images

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

Anda mungkin menyukai postingan ini:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar