Penggunaan Tag IMG HTML untuk Gambar dan Objek
Tag HTML IMG mengatur penyisipan gambar dan objek grafis statis lainnya di dalam halaman web. Tag umum ini mendukung beberapa atribut wajib dan opsional yang menambah kekayaan bagi kemampuan Anda untuk mendesain situs web yang menarik dan berfokus pada gambar.
Contoh dari tag IMG HTML yang dibentuk sepenuhnya terlihat seperti ini:
Atribut Tag IMG yang Diperlukan
SRC. Satu-satunya atribut yang Anda butuhkan untuk mendapatkan gambar untuk ditampilkan pada halaman web adalah atribut SRC. Atribut ini mengidentifikasi nama dan lokasi file gambar yang akan ditampilkan.
ALT. Untuk menulis valid XHTML dan HTML4, atribut ALT juga diperlukan. Atribut ini digunakan untuk menyediakan browser nonvisual dengan teks yang menggambarkan gambar. Browser menampilkan teks alternatif dengan cara berbeda. Beberapa menampilkannya sebagai pop-up ketika Anda meletakkan mouse di atas gambar, yang lain menampilkannya di properti ketika Anda mengklik kanan pada gambar, dan beberapa tidak menampilkannya sama sekali.
Gunakan teks alt untuk memberikan detail tambahan tentang gambar yang tidak relevan atau penting untuk teks halaman Web. Tetapi ingat bahwa di pembaca layar dan peramban teks-satunya lainnya, teks akan dibaca sejajar dengan bagian teks lainnya di halaman. Untuk menghindari kebingungan, gunakan teks alt deskriptif yang mengatakan (misalnya), "Tentang Desain Web dan HTML" bukan hanya "logo."
Di HTML5, atribut ALT tidak selalu diperlukan, karena Anda dapat menggunakan keterangan untuk menambahkan lebih banyak deskripsi untuk itu. Anda juga dapat menggunakan atribut ARIA-DESCRIBEDBY untuk menunjukkan ID yang berisi deskripsi lengkap.
Teks Alt juga tidak diperlukan jika gambar sepenuhnya dekoratif, seperti grafik di bagian atas halaman web atau ikon. Tetapi jika Anda tidak yakin, sertakan teks alt untuk berjaga-jaga.
Atribut IMG yang Direkomendasikan
LEBAR dan TINGGI . Anda harus terbiasa selalu menggunakan atribut WIDTH dan HEIGHT. Dan Anda harus selalu menggunakan ukuran sebenarnya dan tidak mengubah ukuran gambar Anda dengan browser.
Atribut-atribut ini mempercepat rendering halaman karena browser dapat mengalokasikan ruang dalam desain untuk gambar, dan kemudian melanjutkan pengunduhan sisa konten, daripada menunggu seluruh gambar untuk diunduh.
Atribut IMG Berguna Lainnya
TITLE . Atribut adalah atribut global yang dapat diterapkan ke elemen HTML apa pun. Selain itu, atribut TITLE memungkinkan Anda menambahkan informasi tambahan tentang gambar.
Sebagian besar browser mendukung atribut TITLE, tetapi mereka melakukannya dengan cara yang berbeda. Beberapa menampilkan teks sebagai pop-up sementara yang lain menampilkannya di layar informasi ketika pengguna mengklik kanan pada gambar. Anda dapat menggunakan atribut TITLE untuk menulis informasi tambahan tentang gambar, tetapi jangan berharap informasi ini disembunyikan atau terlihat. Anda pasti tidak menggunakan ini untuk menyembunyikan kata kunci untuk mesin pencari. Praktek ini sekarang dihukum oleh sebagian besar mesin pencari.
USEMAP dan ISMAP . Kedua atribut ini mengatur peta gambar sisi-klien () dan sisi-server (ISMAP) ke gambar Anda.
LONGDESC . Atribut mendukung URL untuk deskripsi gambar yang lebih panjang. Fitur ini membuat gambar Anda lebih mudah diakses.
Atribut IMG Tidak Terpakai dan Usang
Beberapa atribut sekarang sudah usang dalam HTML5 atau tidak digunakan lagi dalam HTML4. Untuk HTML terbaik, Anda harus mencari solusi lain daripada menggunakan atribut ini.
BORDER . Atribut mendefinisikan lebar dalam piksel dari setiap perbatasan di sekitar gambar. Sudah usang dalam mendukung CSS di HTML4 dan usang dalam HTML5.
ALIGN . Atribut ini memungkinkan Anda untuk menempatkan gambar di dalam teks dan memiliki aliran teks di sekitarnya. Anda dapat menyelaraskan gambar ke kanan atau ke kiri. Ini telah ditinggalkan dalam mendukung properti CSS float di HTML4 dan usang dalam HTML5.
HSPACE dan VSPACE . The HSPACE dan atribut VSPACE menambahkan spasi putih secara horizontal (HSPACE) dan vertikal (VSPACE). Ruang putih akan ditambahkan ke kedua sisi grafik (atas dan bawah atau kiri dan kanan), jadi jika Anda hanya membutuhkan ruang di satu sisi, Anda harus menggunakan CSS. Atribut-atribut ini telah ditinggalkan dalam HTML4 yang mendukung properti margin CSS, dan mereka sudah usang dalam HTML5.
LOWSRC . Atribut LOWSRC menyediakan gambar alternatif ketika sumber gambar Anda begitu besar sehingga unduhannya sangat lambat. Misalnya, Anda mungkin memiliki gambar yang 500KB yang ingin Anda tampilkan di halaman web Anda, tetapi 500KB akan membutuhkan waktu lama untuk diunduh. Jadi, Anda membuat salinan gambar yang jauh lebih kecil, mungkin hitam putih atau hanya sangat dioptimalkan, dan meletakkannya di atribut LOWSRC. Gambar yang lebih kecil akan mengunduh dan menampilkan lebih dulu, dan kemudian ketika gambar yang lebih besar muncul itu akan menggantikan sumber rendah.
Atribut LOWSRC ditambahkan ke Netscape Navigator 2.0 ke tag IMG. Itu adalah bagian dari DOM level 1 tetapi kemudian dihapus dari level DOM 2. Dukungan browser telah samar untuk atribut ini, meskipun banyak situs mengklaim bahwa itu didukung oleh semua browser modern. Itu tidak ditinggalkan dalam HTML4 atau usang dalam HTML5 karena itu tidak pernah menjadi bagian resmi dari salah satu spesifikasi.
Hindari menggunakan atribut ini dan sebagai gantinya optimalkan gambar Anda sehingga mereka memuat dengan cepat. Kecepatan pemuatan halaman adalah bagian penting dari desain Web yang bagus, dan gambar-gambar besar memperlambat halaman sangat menurun — bahkan jika Anda menggunakan atribut LOWSRC.