Gambar adalah elemen yang cukup penting dalam sebuah website, bisa anda bayangkan jika website tidak terdapat gambar sama sekali pasti akan sangat membosankan.
Setiap gambar akan butuh waktu tambahan untuk didownload dan memperlambat awal penampilan suatu dokumen dalam browser. Karenanya perlu hati-hati untuk menyertakan gambar dalam dokumen web site.
HTML memiliki tag <img> yang dapat digunakan untuk menambahkan gambar di HTML. Untuk menyertakan sebuah image dalam dokumen web adalah : <img src=”nama_image”>. Atribut src (source) ini digunakan untuk menspesifikasikan URL dari file image.
1. Attribute src di tag <img>
Attribute src merupakan singkatan dari source, attribute ini sangat penting di tag <img>. Attribute src digunakan untuk memberikan alamat dari gambar yang akan ditampilkan di HTML, kita dapat menampilkan gambar dari website lain (server lain), ataupun didalam website kita sendiri konsepnya sama seperti membuat link di HTML. Alamat ini bisa relatif atau absolute (bahasan tentang alamat relatif dan alamat absolute di bahas pada materi Cara Membuat link di HTML).
Untuk contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman HTML yang kita buat, gambar dapat berupa JPEG, PNG, maupun GIF.
Pada contoh dibawah ini menggunakan sebuah gambar dengan file name kupu2.jpg yang berada dalam satu folder dengan halaman HTML saat ini. File HTML tersebut kita Save as dengan nama latihangambar.html .
Contoh penggunaan tag <img> :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Image</title>
</head>
<body>
<h1>Belajar Tag Image di HTML</h1>
<img src="kupu2.jpg" />
</body>
</html>
Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan />
Hasilnya :
Selanjutnya untuk kerapihan administrasi file, file-file gambar dengan file HTML kita pisahkan dalam folder berbeda. Contoh dibuatkan folder gambar sebagai folder untuk menyimpan file-file gambar, jadi file kupu2.jpg jadi ada di folder gambar.
Karena file kupu2.jpg pindah ke folder gambar, maka sintak HTML pada alamat src pun harus berubah seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Image</title>
</head>
<body>
<h1>Belajar Tag Image di HTML</h1>
<img src="gambar/kupu2.jpg" />
</body>
</html>
Untuk hasilnya akan sama saja dengan sintak sebelumnya.
2. Atribut alt dalam tag <img>
Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web browser telah disetting untuk tidak menampilkan gambar.
Atribut alt juga berperan penting untuk mesin pencari seperti Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses tulisan yang ada, mesin pencari ‘tidak mengerti’ isi dari gambar tanpa bantuan deskripsi yang ditulis dalam atribut alt. Hal ini menambah pentingnya menambahkan atribut alt.
Contoh penggunaan atribut alt pada tag <img>:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Image</title>
</head>
<body>
<h1>Belajar Tag Image di HTML</h1>
<img alt="gambar kupu-kupu" src="kupu2.jpg"/>
</body>
</html>
Hasilnya ketika gambar tidak bisa ditampilkan deskripsi gambar kupu-kupu sebagai berikut :
3. Atribut width dan height dalam tag <img>
Atribut lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan height. Seperti artinya Width (lebar) dan Height(Tinggi) kedua attribute ini digunakan untuk mengatur ukuran gambar yang ditampilkan, satuan yang digunakan untuk ukuran ini adalah pixel.
Meskipun dari HTML menyediakan 2 attribute untuk mengatur ukuran gambar, jika kita menggunakan kedua attribute tersebut secara bersamaan ada kemungkinan gambar akan ditampilkan dengan ukuran yang tidak proposional.
Jadi ada baiknya anda hanya menggunakan salah satu attribute tersebut, baik itu width ataupun height saja, jadi misalnya bila kita menggunakan attribute width saja maka ukuran tinggi akan otomatis menyesuaikan sehingga gambarnya ditampilkan dengan ukuran yang proposional.
Kita coba untuk menampilkan gambarnya dengan mengatur kedua attribute tersebut, kita telah menyiapkan di contoh skrip html.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Image</title>
</head>
<body>
<img width="500" height="200" alt="gambar kupu-kupu" src="gambar/kupu2.jpg"/>
</body>
</html>
Jika kita tampilkan di browser maka hasilnya gambarnya ditampilkan dengan ukuran yang tidak proposional.
Lalu kita coba ubah yang kita atur hanya widthnya saja
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Image</title>
</head>
<body>
<img width="500" alt="gambar kupu-kupu" src="gambar/kupu2.jpg"/>
</body>
</html>
Lalu ditampilkan di browser, terlihat gambar yang ditampilkan memiliki ukuran yang proposional, hal tersebut dikarenakan ukuran tingginya otomatis menyesuaikan dari ukuran lebarnya.
Biasanya web server akan menampilkan text terlebih dahulu, baru mengirim gambar setelahnya. Untuk web server yang sibuk, atau gambar dengan ukuran besar, hal ini akan menyebabkan text berpindah tempat karena gambar yang terlambat ditampilkan. Mencantumkan ukuran dari gambar dengan atribut width dan height akan memberikan kesempatan kepada browser untuk mempersiapkan ukuran tersebut untuk gambar, dan text tidak akan berpindah.