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