Published · Minggu, 27 April 2025

Menambahkan Gambar

Mengapa Gambar Penting dalam Halaman Web?

Gambar adalah salah satu elemen yang tidak hanya mempercantik tampilan web, tetapi juga membantu menyampaikan informasi dengan lebih efektif. Visual seperti gambar, grafik, atau ikon, dapat menjelaskan sesuatu yang lebih sulit dijelaskan dengan kata-kata. Gambar juga meningkatkan pengalaman pengguna dan membuat halaman web lebih menarik.

Di HTML, untuk menambahkan gambar ke halaman, kita menggunakan tag <img>. Tag ini memungkinkan kita untuk menampilkan gambar baik dari file lokal (yang ada di komputer atau server) maupun gambar yang terletak di URL eksternal.

Struktur Dasar Tag `<img>`

Tag <img> tidak memiliki elemen penutup. Cukup dengan menulis tag pembuka saja, gambar akan muncul di halaman. Namun, untuk memastikan gambar ditampilkan dengan benar, ada beberapa atribut yang harus disertakan, seperti src, alt, width, dan height.

Berikut adalah struktur dasar tag <img>:

<img src="gambar.jpg" alt="Deskripsi gambar">

Penjelasan atribut-atribut di atas:

src (source): Atribut ini menunjukkan lokasi gambar yang ingin ditampilkan. Bisa berupa path relatif (file lokal) atau URL gambar dari web.
alt (alternative text): Atribut ini memberikan deskripsi gambar yang akan ditampilkan jika gambar gagal dimuat atau bagi pengguna dengan keterbatasan penglihatan yang menggunakan pembaca layar. Menulis alt text yang baik juga penting untuk SEO.

Atribut Penting pada Tag `<img>`

src (Source):
Atribut src menunjukkan lokasi gambar yang ingin dimuat. Gambar bisa berada di server yang sama dengan halaman web atau di tempat lain (misalnya, menggunakan gambar dari URL eksternal).
Contoh:
```
<img src="logo.png" alt="Logo Website">
```
Jika gambar berada di server lain, gunakan URL penuh:
```
<img src="https://www.example.com/images/gambar.jpg" alt="Gambar Eksternal">
```
alt (Alternative Text):
Atribut alt memberikan deskripsi singkat tentang gambar. Ini sangat penting untuk meningkatkan aksesibilitas dan SEO. Jika gambar tidak dapat dimuat, teks alternatif ini akan muncul menggantikannya. Deskripsi ini juga membantu mesin pencari memahami gambar, yang berkontribusi pada peringkat SEO halaman.
Contoh:
```
<img src="gambar.jpg" alt="Foto pantai di sore hari">
```
width dan height (Ukuran Gambar):
Untuk mengontrol ukuran gambar, kamu bisa menggunakan atribut width dan height. Atribut ini memungkinkan kita untuk menetapkan dimensi gambar dalam piksel. Namun, disarankan untuk menjaga proporsi gambar agar tetap terjaga dengan menggunakan salah satu atribut saja (biasanya lebar) dan membiarkan browser menghitung tinggi secara otomatis.
Contoh:
```
<img src="gambar.jpg" alt="Gambar contoh" width="500">
```
title (Title Tooltip):
Atribut title memberikan informasi tambahan tentang gambar saat pengguna mengarahkan kursor di atas gambar. Ini berguna untuk memberikan konteks lebih lanjut mengenai gambar tersebut.
Contoh:
```
<img src="gambar.jpg" alt="Gambar contoh" title="Klik untuk melihat gambar lebih besar">
```

Menampilkan Gambar dari File Lokal dan URL

Gambar dapat diambil dari berbagai sumber, baik dari file lokal yang ada di server atau dari URL eksternal. Jika gambar ada dalam folder yang sama dengan file HTML, kamu cukup menulis nama file gambar dalam atribut src.

Contoh gambar dari file lokal:

<img src="images/gambar.jpg" alt="Gambar Lokasi Lokal">

Jika gambar berada di lokasi yang berbeda, gunakan path lengkap:

<img src="https://www.example.com/images/gambar.jpg" alt="Gambar dari URL Eksternal">

Optimasi Gambar untuk Web

Sebelum mengunggah gambar ke halaman web, sangat penting untuk memastikan gambar tersebut dioptimalkan agar halaman tetap cepat dimuat. Gambar yang terlalu besar dapat memperlambat waktu loading dan membuat pengalaman pengguna terganggu.

Beberapa tips optimasi gambar:

Kompresi gambar: Gunakan alat kompresi gambar seperti TinyPNG atau ImageOptim untuk mengecilkan ukuran file gambar tanpa mengurangi kualitas secara signifikan.
Gunakan format yang tepat: JPEG cocok untuk foto dan gambar dengan banyak warna, sementara PNG cocok untuk gambar dengan latar belakang transparan atau grafik.
Responsif: Gunakan gambar yang responsif dengan atribut srcset atau CSS untuk menyesuaikan ukuran gambar dengan ukuran layar perangkat yang digunakan.

Contoh optimasi gambar responsif:

<img src="gambar-small.jpg" srcset="gambar-medium.jpg 600w, gambar-large.jpg 1200w" alt="Gambar Responsif">

Menambahkan Gambar dengan Link

Kamu juga dapat menambahkan gambar dalam sebuah hyperlink, misalnya untuk mengarahkan pengunjung ke halaman tertentu ketika mereka mengklik gambar.

Contoh:

<a href="https://www.example.com">
  <img src="logo.png" alt="Logo" width="100" height="100">
</a>

Dengan kode ini, gambar logo.png akan menjadi link yang mengarahkan pengguna ke halaman www.example.com saat diklik.

Menyambung ke Elemen HTML Selanjutnya: Membuat List

Setelah memahami cara menambahkan gambar ke halaman, langkah selanjutnya adalah mengorganisir konten dengan menggunakan list. List atau daftar sangat berguna untuk menyusun informasi secara rapi, baik itu daftar terurut, tidak terurut, atau deskripsi. Pada bagian berikutnya, kita akan membahas cara membuat ordered list, unordered list, dan description list di HTML, serta bagaimana penggunaannya untuk mengorganisir konten di halaman web.