Lihatlah halaman web online hari ini dan Anda akan melihat bahwa mereka berbagi hal-hal tertentu yang sama. Salah satu sifat yang dibagikan adalah gambar. Gambar yang tepat menambahkan begitu banyak ke presentasi situs web. Beberapa gambar tersebut, seperti logo perusahaan, membantu merek situs tersebut dan menghubungkan entitas digital tersebut dengan perusahaan fisik Anda.
Untuk menambahkan gambar, ikon, atau grafik ke halaman web Anda, Anda perlu menggunakan tag dalam kode HTML halaman. Anda menempatkan tag IMG di HTML Anda tepat di mana Anda ingin menampilkan grafik. Peramban web yang menampilkan kode halaman akan menggantikan tag ini dengan grafik yang sesuai setelah halaman dilihat. Kembali ke contoh logo perusahaan kami, di sini adalah bagaimana Anda dapat menambahkan gambar itu ke situs Anda:
Atribut Gambar
Melihat kode HTML di atas, Anda akan melihat bahwa elemen mencakup dua atribut. Masing-masing diperlukan untuk gambar.
Atribut pertama adalah "src". Ini benar-benar file gambar yang ingin Anda tampilkan di halaman. Dalam contoh kita adalah kita menggunakan file bernama "logo.png". Ini adalah grafik yang akan ditampilkan oleh browser web saat menampilkan situs.
Anda juga akan melihat bahwa sebelum nama file ini, kami menambahkan beberapa informasi tambahan, "/ images /". Ini adalah jalur file. Garis miring awal memberi tahu server untuk melihat ke dalam akar direktori. Kemudian akan mencari folder bernama "images" dan akhirnya file bernama "logo.png". Menggunakan folder bernama "images" untuk menyimpan semua grafik situs adalah praktik yang cukup umum, tetapi jalur file Anda akan diubah menjadi apa pun yang relevan untuk situs Anda.
Atribut yang diperlukan kedua adalah teks "alt". Ini adalah "teks alternatif" yang ditampilkan jika gambar gagal dimuat karena suatu alasan. Teks ini, yang dalam contoh kita membaca "Logo Perusahaan" akan ditampilkan jika gambar gagal dimuat. Kenapa itu terjadi? Berbagai alasan:
- Jalur file salah
- Nama file salah atau salah eja
- Kesalahan transmisi
- File dihapus dari server
Ini hanya beberapa kemungkinan mengapa gambar yang kami tentukan mungkin hilang. Dalam kasus ini, teks alt kami akan ditampilkan sebagai gantinya.
Teks Alt juga digunakan oleh perangkat lunak pembaca layar untuk "membaca" gambar untuk pengunjung yang memiliki gangguan penglihatan. Karena mereka tidak dapat melihat gambar seperti yang kita lakukan, teks ini memungkinkan mereka mengetahui apa itu gambar itu sendiri. Inilah sebabnya mengapa teks alt diperlukan dan mengapa harus jelas menyatakan apa gambarnya!
Kesalahpahaman umum teks alt adalah bahwa itu dimaksudkan untuk tujuan mesin pencari. Ini tidak benar. Sementara Google dan mesin pencari lainnya memang membaca teks ini untuk menentukan apa gambarnya (ingat, mereka tidak dapat "melihat" gambar Anda), Anda tidak boleh menulis teks alt untuk menarik semata-mata ke mesin pencari. Teks yang jelas bagi penulis yang dimaksudkan untuk manusia. Jika Anda juga dapat menambahkan beberapa kata kunci ke dalam tag yang menarik bagi mesin telusur, itu bagus, tetapi selalu pastikan teks alt melayani tujuan utamanya dengan menyatakan apa gambar tersebut bagi siapa saja yang tidak dapat melihat file grafik.
Atribut lainnya
Tag IMG juga memiliki dua atribut lain yang mungkin Anda lihat ketika Anda meletakkan grafik di halaman web Anda - lebar dan tinggi. Misalnya, jika Anda menggunakan editor WYSIWYG seperti Dreamweaver, itu secara otomatis menambahkan info ini untuk Anda. Inilah contohnya:
Atribut WIDTH dan HEIGHT memberi tahu browser ukuran gambar. Browser kemudian tahu persis berapa banyak ruang di tata letak untuk mengalokasikan, dan itu dapat berpindah ke elemen berikutnya di halaman saat unduhan gambar. Masalah dengan menggunakan informasi ini di HTML Anda adalah bahwa Anda mungkin tidak selalu ingin gambar Anda ditampilkan pada ukuran yang tepat. Misalnya, jika Anda memiliki situs web responsif yang mengubah ukuran berdasarkan layar dan ukuran perangkat pengunjung, Anda juga ingin gambar Anda menjadi fleksibel. Jika Anda menyatakan dalam HTML Anda apa ukuran tetapnya, Anda akan merasa sangat sulit untuk mengganti dengan kueri media CSS yang responsif. Untuk alasan ini, dan untuk mempertahankan pemisahan gaya (CSS) dan struktur (HTML), disarankan agar Anda TIDAK menambahkan atribut lebar dan tinggi ke kode HTML Anda.
Satu catatan: Jika Anda membiarkan petunjuk ukuran ini tidak aktif dan tidak menentukan ukuran dalam CSS, peramban akan menampilkan gambar pada asalnya, ukuran asli.
Diedit oleh Jeremy Girard