Panduan Lengkap Atribut Gambar HTML (src, alt, width, height) untuk Pemula hingga Mahir

Gambar adalah salah satu elemen paling penting dalam pembuatan website modern. Tanpa gambar, sebuah halaman web sering kali terlihat membosankan, kurang informatif, dan kurang menarik bagi pengunjung.

Dalam HTML, gambar ditampilkan menggunakan tag <img>. Namun menampilkan gambar saja tidak cukup. Agar gambar dapat bekerja dengan baik di halaman web, kita perlu memahami atribut-atribut penting yang dimiliki oleh tag tersebut.

Beberapa atribut gambar HTML yang paling sering digunakan adalah:

src – menentukan sumber gambar
alt – memberikan teks alternatif
width – menentukan lebar gambar
height – menentukan tinggi gambar

Memahami atribut ini sangat penting bagi siapa pun yang sedang belajar membuat website. Jika Anda masih baru belajar HTML, Anda bisa membaca terlebih dahulu artikel apa itu HTML dan fungsinya untuk memahami dasar-dasar bahasa markup ini.

Selain itu, jika Anda ingin memahami struktur dasar HTML secara lebih lengkap, Anda juga bisa membaca panduan struktur dasar HTML.

Pada artikel ini kita akan membahas secara lengkap dan mendalam tentang atribut gambar HTML, mulai dari pengertian, fungsi, cara penggunaan, contoh kode, hingga kesalahan yang sering dilakukan oleh pemula.

Artikel ini dibuat sebagai panduan lengkap sehingga Anda dapat memahami cara menggunakan atribut gambar HTML dengan benar dan profesional.

Pengertian Atribut Gambar HTML

Dalam HTML, atribut adalah informasi tambahan yang ditambahkan ke dalam tag HTML untuk mengatur bagaimana elemen tersebut bekerja.

Jika Anda ingin memahami konsep atribut secara lebih luas, Anda dapat membaca panduan lengkap belajar atribut HTML.

Pada tag <img>, atribut digunakan untuk:

Menentukan lokasi gambar
Menyediakan deskripsi gambar
Mengatur ukuran gambar
Membantu aksesibilitas website
Meningkatkan SEO halaman web

Berikut adalah contoh sederhana penggunaan atribut pada tag gambar:

<img src="gambar.jpg" alt="Contoh gambar" width="300" height="200">

Dalam kode di atas:

src menentukan file gambar
alt memberikan teks alternatif
width menentukan lebar
height menentukan tinggi

Keempat atribut ini merupakan atribut dasar yang hampir selalu digunakan ketika menampilkan gambar di HTML.

Mengenal Tag IMG dalam HTML

Sebelum membahas atribut gambar lebih jauh, penting untuk memahami terlebih dahulu bagaimana tag <img> bekerja dalam HTML.

Tag ini digunakan untuk menampilkan gambar di halaman web.

<img src="gambar.jpg">

Tag ini termasuk dalam kategori self-closing tag, artinya tidak memiliki tag penutup seperti elemen HTML lainnya.

Jika Anda ingin mempelajari lebih lanjut tentang penggunaan tag ini secara dasar, Anda dapat membaca artikel cara menampilkan gambar dengan tag img.

Selain itu, pemahaman tentang elemen HTML juga sangat penting. Untuk itu Anda bisa membaca artikel panduan lengkap belajar elemen HTML.

Setelah memahami dasar tag gambar, sekarang kita akan membahas atribut-atribut utamanya secara lebih mendalam.

Atribut SRC pada Gambar HTML

Atribut src adalah atribut paling penting dalam tag gambar HTML.

Atribut ini digunakan untuk menentukan lokasi file gambar yang ingin ditampilkan pada halaman web.

Contoh penggunaan atribut src

<img src="foto.jpg">

Dalam contoh tersebut, browser akan mencari file bernama foto.jpg pada folder yang sama dengan file HTML.

Sumber gambar dapat berasal dari berbagai lokasi

1. Gambar dari folder yang sama

<img src="gambar.jpg">

2. Gambar dari folder lain

<img src="images/gambar.jpg">

3. Gambar dari website lain

<img src="https://example.com/gambar.jpg">

Namun dalam praktik terbaik pengembangan website, sebaiknya Anda menyimpan gambar di dalam folder proyek website agar performa website lebih stabil.

Jika Anda ingin belajar lebih lanjut tentang media pada HTML, Anda dapat membaca artikel cara menggunakan media pada HTML.

[Tempat gambar ilustrasi]

Atribut ALT pada Gambar HTML

Atribut alt adalah atribut yang digunakan untuk memberikan teks alternatif pada gambar.

Teks ini akan muncul jika gambar gagal dimuat oleh browser.

Contoh penggunaan atribut alt

<img src="kucing.jpg" alt="Foto kucing sedang tidur">

Jika gambar tidak dapat ditampilkan, browser akan menampilkan teks "Foto kucing sedang tidur".

Fungsi atribut alt

Membantu pengguna dengan keterbatasan penglihatan
Meningkatkan SEO gambar
Menjelaskan isi gambar
Membantu mesin pencari memahami konten gambar

Mesin pencari seperti Google menggunakan atribut alt untuk memahami isi gambar karena mereka tidak dapat melihat gambar secara langsung.

Oleh karena itu, penggunaan atribut alt yang baik dapat membantu meningkatkan SEO website Anda.

Jika Anda ingin mempelajari lebih lanjut tentang bagaimana website bekerja secara keseluruhan, Anda bisa membaca artikel panduan cara membuat website dengan HTML.

[Tempat gambar ilustrasi]

Atribut WIDTH pada Gambar HTML

Atribut width digunakan untuk menentukan lebar gambar pada halaman web.

Contoh penggunaan atribut width

<img src="gambar.jpg" width="300">

Kode tersebut akan menampilkan gambar dengan lebar 300 piksel.

Mengapa atribut width penting?

Mengatur ukuran tampilan gambar
Mencegah layout halaman berubah
Membantu performa loading

Namun dalam pengembangan web modern, pengaturan ukuran gambar sering kali dilakukan menggunakan CSS.

Jika Anda ingin memahami cara menggunakan CSS untuk mengatur tampilan website, Anda bisa membaca artikel cara menggunakan CSS untuk mempercantik website.

Atribut HEIGHT pada Gambar HTML

Atribut height digunakan untuk menentukan tinggi gambar pada halaman web.

Contoh penggunaan atribut height

<img src="gambar.jpg" height="200">

Kode tersebut akan menampilkan gambar dengan tinggi 200 piksel.

Menggabungkan width dan height

<img src="gambar.jpg" width="300" height="200">

Dengan menentukan kedua atribut ini, browser dapat menyiapkan ruang tampilan gambar sebelum gambar selesai dimuat.

Hal ini membantu mengurangi pergeseran layout halaman.

Dalam desain website modern, pengaturan ukuran gambar juga berkaitan erat dengan konsep website responsif.

Website responsif memastikan tampilan website tetap baik di berbagai perangkat seperti komputer, tablet, dan smartphone.

Contoh Penggunaan Atribut Gambar HTML

Berikut contoh penggunaan atribut gambar HTML secara lengkap.

<img 
src="pemandangan.jpg"
alt="Pemandangan gunung saat matahari terbit"
width="600"
height="400"
>

Penjelasan:

src menentukan file gambar
alt menjelaskan isi gambar
width menentukan lebar gambar
height menentukan tinggi gambar

Contoh ini merupakan praktik dasar yang sangat penting dalam pembuatan halaman web.

Kesalahan yang Sering Dilakukan Pemula

Tidak menggunakan atribut alt

Banyak pemula lupa menambahkan atribut alt pada gambar.

Padahal atribut ini penting untuk SEO dan aksesibilitas.

Menggunakan ukuran gambar yang terlalu besar

Gambar berukuran besar dapat memperlambat loading website.

Salah menuliskan path gambar

Jika path gambar salah, maka gambar tidak akan muncul.

Jika Anda sering mengalami kesalahan HTML seperti ini, Anda dapat membaca panduan cara memperbaiki kesalahan pada HTML.

Tips Penting Menggunakan Gambar di Website

Gunakan ukuran gambar yang optimal
Selalu gunakan atribut alt
Simpan gambar di folder khusus
Gunakan format gambar yang tepat
Optimalkan gambar untuk SEO

Dalam pengembangan website modern, gambar juga sering digunakan bersama berbagai teknologi seperti JavaScript dan framework front-end.

Jika Anda ingin mempelajari teknologi tersebut, Anda dapat membaca artikel berikut:

Kesimpulan

Atribut gambar HTML merupakan bagian penting dalam pembuatan website modern. Empat atribut utama yang harus dipahami oleh setiap developer web adalah:

src untuk menentukan sumber gambar
alt untuk memberikan teks alternatif
width untuk mengatur lebar gambar
height untuk mengatur tinggi gambar

Dengan memahami dan menggunakan atribut-atribut ini secara benar, Anda dapat membuat halaman web yang lebih profesional, mudah diakses, dan ramah mesin pencari.

Penggunaan gambar yang tepat juga akan membuat website terlihat lebih menarik dan informatif bagi pengunjung.

Jika Anda ingin belajar HTML secara lebih mendalam, Anda dapat membaca berbagai panduan lainnya seperti:

Dengan terus belajar dan berlatih, Anda akan semakin mahir dalam membuat website menggunakan HTML.

Referensi

W3C. (2023). HTML Living Standard. World Wide Web Consortium.

Mozilla Developer Network. (2024). HTML Image Element Documentation.

Nielsen, J. (2022). Web Usability Principles for Modern Websites.

Google Web Fundamentals. (2023). Image Optimization and Accessibility.