Menambah gambar pada halaman HTML

Cara menambahkan perhatian pada halaman dengan gambar-gambar. Gambar-gambar dapat digunakan untuk membuat halaman Web anda berbeda dengan yang lain dan sangat membantu anda dalam menyampaikan pesan anda. Cara mudah untuk menambahkan gambar adalah dengan menggunakan tag <img>. Mari assumsikan bahwa anda memiliki sebuah gambar dengan bernama "kucing.jpg" di folder/directory file HTML anda. Gambar tersebut tingginya 200 pixel dan lebar 150 pixel.Maka cara penulisannya adalah sebagai berikut :

<img src="kucing.jpg" width="200" height="150">

Attribut src anda beri nama file gambar tersebut. width dan height tidak diwajibkan tetapi membantu mempercepat tampilannya di halaman Web anda. Sesuatu masih kurang! Orang yang tidak dapat melihat gambar membutuhkan deskripsi yang mereka bisa baca sebagai penggantinya. Anda bisa menambahkan penjelasan singkat sebagai berikut:

<img src="kucing.jpg" width="200" height="150"
alt="Teman saya kucing">

Atribut alt digunakan untuk memberikan deskripsi singkat, dalam hal ini "My friend Peter". Untuk gambar yang kompleks, anda mungkin perlu menambahkan deskripsi yang lebih panjang. Dengan asumsi bahwa hal ini telah tertulis pada file "peter.html", anda dapat menambahkan hal berikut menggunakan atribut longdesc:

<img src="kucing.jpg" width="200" height="150"
alt="Teman saya kucing" longdesc="kucing.html">

Anda dapat membuat gambar dengan berbagai cara, sebagai contoh dengan sebuah digital kamera, dengan mengscan sebuah gambar, atau membuatnya dengan menggunakan program untuk menggambar atau melukis. Kebanyakan browser mengerti format gambar GIF dan JPEG, browser baru juga mengerti format gambar PNG. Untuk menghindari waktu yang lama ketika gambar tersebut di download melewati jaringan, anda sebaiknya menghindari penggunaan file gambar yang besar.

Secara umum, JPEG paling baik digunakan untuk photo dan gambar lain yang sejenis, segankan GIF dan PNG baik untuk gambar seni yang melibatkan warna yang datar, garis dan tulisan. Ketiga format mendukung opsi untuk di render secara bertahap (progressive rendering) dimana gambar kasarnya diperlihatkan dahulu lalu secara perlahan di haluskan.