Image HTML Sebuah gambar berbicara seribu kata, pepatah yang sering digunakan orang untuk menunjukkan terkadang gambar bisa berbicara lebih baik dari penjelasan yang panjang lebar. Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung suatu website. Umumnya website dilengkapi dengan gambar-gambar untuk membuat orang tertarik untuk melihat dan membaca isi yang ada di suatu website. Umumnya browser web dapat menampilkan inline image (yaitu, gambar yang disajikan bersamaan dengan teks), yang mempunyai format X Bitmap (XBM), GIF atau JPEG. Format-format gambar lain juga sedang ada yang digabungkan ke dalam browser web [misalnya: format PNG (Portable Network Graphic)]. Setiap gambar akan membutuhkan waktu tambahan untuk didownload dan memperlambat awal penampilan suatu dokumen dalam browser. Karena hati-hati memilih gambar dan menyertakannya ke dalam suatu dokumen. Untuk menyertakan sebuah inline image dalam dokumen web dan:
Dengan nama image adalah URL dari file image tersebut. Format file gambar dapat diketahui dari ekstensi nama file gambar tersebut. GIF menunjukkan format gambar GIF, XBM untuk format file gambar X Bitmap, JPG untuk format file gambar JPEG, dan .png untuk file Portable Network Graphics. Kriteria pemilihan file gambar berdasarkan jenis format file penyimpanan gambar. GIF (Graphics Interchange Format); Mungkin termasuk yang terbanyak digunakan dalam internet. Warna 8 bit (256), tidak digunakan untuk menyimpan file gambar berupa foto karena lebih dari 256 warna. Tidak cocok untuk gambar yang mengandung garis. Jenis file gif terdiri dari pertama; interlacing, gambar dapat terlihat dalam band (pita), gambar dapat ditampilkan secara bertahap tidak perlu harus semua file terkirim terlebih dahulu, kedua; transparent, background gambar transparan, ketiga; animated, beberapa gambar disatukan, ditampilkan secara bergantian menjadi seperti animasi. JPEG (Joint Photographichs Experts Group); Termasuk format file terbanyak pemakianya setelah gif. Warna terdir dari 24 bit, dioptimasi untuk menyimpan file gambar berupa foto, hasil seni natural dan bahan yang menyerupai dengan kompresi (4:1). Orang lebh sensitif terhadap keterangan (brightness) daripada warna. Digunakan untuk membuat warna grayscale. Tidak cocok untuk gambar yang mengandung garis atau gambar dengan sisi yang tajam. Jenis ini terdiri dari pertama; progressive JPEG – mirip seperti interlacing GIF. Optimasi gambar dengan mengurangi jumlah warna. Gunakan thumbnails, yaitu membuat file gambar dengan ukuran kecil yang mewakili gambar besar yang sebenarnya. Blur image sebelum membuat lebih kecil.Tambahkan teks ke dalam gambar yang telah dikonversi ke dalam format 256 warna. Animated GIF adalah sebuah format-format file gambar GIF. Di dalamnya tersimpan beberapa gambar GIF yang disatukan dalam satu file. File ini dibuat untuk membuat gambar yang bisa bergerak (animasi).
Atribut ukuran image, kita harus menambahkan 2 atribut tambahan untuk memberi tahu browser web ukuran image yang harus ditampilkan dalam browser. Atribut tersebut adalah height dan width, ukuran dinyatakan dalam pixel; height untuk menyatakan tinggi gambar dan width untuk menspesifikasikan lebar gambar. Ukuran gambar ini di dapat dengan menggunakan software untuk pemrosesan image. Catatan: Pada beberapa browser, atribut ukuran gambar (height dan width) digunakan untuk memperbesar atau memperkecil gambar. Akan tetapi sebaiknya jangan menggunakan teknik ini karena kurang baik, sebaiknya ukur dimensi ukurannya secara benar dengan menggunakan aplikasi yang bisa digunakan untuk mendapatkan ukuran gambar, Untuk mengatur penampilan gambaran (alignment), kita mempunyai kefleksibelan untuk pada saat menampilkan gambar. Kita dapat membuat gambar yang ditampilkan terpisah dari teksnya dan kemudian menaruhnya agar ditampilkan di kiri, tengah, atau kanan. Atau bisa juga gambar tersebut ditampilkan bersamaan dengan teks, kemudian diletakkan pada bagian atas, bawah, atau tengah paragraf. Untuk menampilkan gambar bersamaan dengan teksnya maka, pada gambar ditambahkan atribut align, yang bisa diisi nilai top, center, dan bottom. Agar gambar ditampilkan tanpa teks, dan kita ingin menampilkannya di tengah paragraf, seperti umumnya logo perusahaan, maka kita dapat menggunakan atribut align pada tag
untuk membuat agar gambarnya diletakkan di tengah.
Berikut merupakan contoh:
. Contoh ini mendemonstrasikan bagaimana menyisipkan gambar ke dalam dokumen HTML Anda.
Alignment Image Contoh ini mendemostrasikan bagaimana mengatur align image dengan teks.
Floating Image Contoh ini mendemonstrasikan bagaimana mebiarkan suatu image mengambang di kiri atau di kanan paragraf.
Image Adjustment Contoh ini mendemonstrasikan bagaimana menyesuaikan image dengan ukuran yang berbedabeda.
Image sebagai Suatu Link Contoh ini mendemostrasikan bagaimana membuat suatu image sebagai suatu link.
Menu dalam web page merupakan pilihan link informasi ke web page yang lain. Menu umumnya dibuat dalam bentuk list atau pun teks biasa yang mempunyai link. Kita pun dapat menggunakan image untuk membuat menu, dengan gambar amaka menu bisa lebih interaktif dan langsung member image tentang apa yang akan didapat kalau memilih menu tersebut.
