Gambar

Tujuan: Modul ini merupakan ringkasan umum dari berbagai kasus penggunaan gambar dalam HTML. Jika Anda ingin mempelajari topik tersebut secara mendalam, kunjungi kursus Mempelajari Gambar.

Gambar dekoratif, seperti gradasi latar belakang pada tombol atau gambar latar pada bagian konten atau halaman penuh, bersifat presentasional dan harus diterapkan dengan CSS. Ketika sebuah gambar menambahkan konteks ke dokumen, itu adalah konten dan seharusnya disematkan dengan HTML.

Metode utama untuk menyertakan gambar adalah tag <img> dengan src yang merujuk ke resource gambar dan atribut alt yang menjelaskan gambar tersebut.

<img src="images/eve.png" alt="Eve">

Baik atribut srcset pada <img> dan elemen <picture> memberikan cara untuk menyertakan beberapa sumber gambar dengan setiap kueri media yang terkait, masing-masing dengan sumber gambar pengganti, sehingga memungkinkan penayangan file gambar yang paling sesuai berdasarkan resolusi, kemampuan browser, dan ukuran area pandang. Atribut srcset memungkinkan penyediaan beberapa versi gambar berdasarkan resolusi dan, bersama dengan atribut sizes, ukuran area pandang browser.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

Hal ini juga dapat dilakukan dengan elemen <picture>, bersama dengan turunan <source>, yang menggunakan <img> sebagai sumber default.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

Selain metode gambar responsif HTML bawaan ini, HTML juga mengaktifkan gambar performa rendering yang harus ditingkatkan melalui berbagai atribut. Tag <img>, dan karenanya, tombol kirim grafis <input type="image">, dapat menyertakan atribut height dan width untuk menyetel rasio aspek gambar guna mengurangi pergeseran tata letak konten. Atribut lazy memungkinkan pemuatan lambat.

HTML juga mendukung penyertaan gambar SVG menggunakan <svg> secara langsung, meskipun SVG gambar dengan ekstensi .svg (atau sebagai data-uri) dapat disematkan menggunakan elemen <img>.

Catatan: Elemen <figure>, bersama dengan elemen <figcaption> bertingkat, memungkinkan penyertaan gambar dengan deskripsi terkait. Gambar tidak terbatas hanya pada gambar. Ini adalah cara semantik yang mereferensikan gambar, cuplikan kode, contoh teks, atau konten lainnya, bersama dengan teks untuk konten tersebut, sebagai unit tunggal. Saat menyertakan <figcaption>, pastikan itu adalah turunan pertama atau terakhir yang disusun bertingkat dalam <figure>.

Setidaknya, setiap gambar latar depan harus menyertakan atribut src dan alt.

File src adalah jalur dan nama file dari gambar yang disematkan. Atribut src digunakan untuk memberikan URL gambar. Selanjutnya, browser mengambil aset dan merendernya ke halaman. Atribut ini diwajibkan oleh <img>; tanpa itu, tidak ada yang akan dirender.

Atribut alt memberikan teks alternatif untuk gambar, yang memberikan deskripsi tentang gambar bagi pengguna yang tidak dapat melihat (seperti mesin telusur dan teknologi pendukung, dan bahkan Alexa, Siri, dan Google Assistant), serta dapat ditampilkan oleh browser jika gambar tidak dimuat. Selain untuk pengguna dengan jaringan lambat atau bandwidth terbatas, teks alt juga sangat berguna dalam HTML email, karena banyak pengguna yang memblokir gambar di aplikasi email mereka.

<img src="path/filename" alt="descriptive text" />

Jika gambar berjenis file SVG, sertakan juga role="img", yang diperlukan akibat VoiceOver.

<img src="switch.svg" alt="light switch" role="img" />

Catatan: Contoh ini menyertakan garis miring di bagian akhir, juga salah diberi nama sebagai tag yang menutup sendiri; ini adalah fitur XML, termasuk SVG dan Xcode, tetapi bukan HTML. Untuk mengetahui informasi selengkapnya tentang hal ini, lihat catatan di modul formulir.

Menulis deskripsi gambar alt yang efektif

Atribut Alt sebaiknya singkat dan ringkas, memberikan semua informasi yang relevan yang disampaikan gambar sambil menghilangkan yang berlebihan untuk konten lain dalam dokumen atau tidak berguna. Dalam menulis teks, nada suara harus mencerminkan nuansa situs.

Untuk menulis teks alternatif yang efektif, bayangkan Anda membaca seluruh halaman kepada seseorang yang tidak dapat melihatnya. Dengan menggunakan elemen <img> semantik, pengguna pembaca layar dan bot akan diberi tahu bahwa elemen tersebut adalah gambar. Menyertakan "This is an image/screenshot/photo of" adalah hal yang berlebihan di alt. Pengguna tidak perlu mengetahui suatu gambar, tetapi mereka perlu mengetahui informasi yang disampaikan oleh gambar tersebut.

Biasanya, Anda tidak akan mengatakan, "Ini adalah gambar berbintik yang memakai topi merah." Sebaliknya, Anda akan menyampaikan apa yang dalam kaitannya dengan konteks dokumen lainnya; dan apa yang Anda sampaikan akan berubah tergantung pada konteksnya dan konten teks di sekitarnya.

Misalnya, foto akan dijelaskan dengan cara yang berbeda, tergantung pada konteksnya. Jika Fluffy adalah avatar di samping ulasan untuk dog food Yuckymeat, alt="Fluffy" sudah cukup.

Jika foto tersebut adalah bagian dari halaman adopsi Fluffy di situs web penampungan hewan, audiens targetnya adalah calon anjingnya orang tua. Teks harus menggambarkan informasi yang disampaikan dalam gambar yang relevan dengan pengguna dan yang tidak diduplikasi dalam teks di sekitarnya. Deskripsi yang lebih panjang, seperti alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth", sudah sesuai. Teks pada laman adopsi umumnya mencakup spesies, jenis, usia, dan jenis kelamin hewan peliharaan yang dapat diadopsi, sehingga tidak perlu diulang dalam {i>alt text<i}. Tetapi biografi tertulis mungkin tidak mencantumkan panjang rambut, warna, atau mainan. Perhatikan bahwa kami tidak mendeskripsikan gambar: calon pemilik tidak perlu mengetahui apakah anjingnya di dalam atau di luar ruangan, atau memiliki kalung merah dan tali biru.

Saat menggunakan gambar untuk ikonografi, karena atribut alt memberikan nama yang dapat diakses, sampaikan arti ikon, bukan deskripsi gambar. Misalnya, atribut alt ikon kaca pembesar adalah search. Ikon yang terlihat seperti rumah yang memiliki home sebagai teks alternatif. Deskripsi ikon disket 5 inci adalah save. Jika ada dua ikon Fluffy yang digunakan untuk menunjukkan praktik terbaik dan anti-pola, yang tersenyum dalam baret hijau dapat menyetel alt="good", sedangkan menggeram dalam baret merah mungkin terbaca alt="bad". Meskipun demikian, gunakan ikonografi standar saja, dan jika Anda menggunakan ikon yang tidak standar seperti baik dan buruk Fluffy, sertakan legenda dan pastikan bahwa ikon bukanlah satu-satunya cara untuk memahami makna elemen UI Anda,

Jika gambar adalah screenshot atau grafik, tulis apa yang dipelajari dari gambar itu, bukan menjelaskan tampilannya. Meskipun sebuah gambar pasti bernilai ribuan kata, deskripsinya harus secara ringkas menyampaikan semua yang telah dipelajari.

Menghapus informasi yang sudah diketahui pengguna dari konteks dan yang diinformasikan dalam konten. Misalnya, jika Anda berada di halaman tutorial tentang cara mengubah setelan browser dan halaman tersebut berisi tentang mengklik ikon di Chrome browser, URL halaman dalam screenshot tidaklah penting. Batasi alt pada topik yang ingin dibahas: cara mengubah setelan. alt mungkin "Ikon setelan ada di menu navigasi di bawah kolom penelusuran." Jangan sertakan "screenshot" atau "machinelearningworkshop" karena pengguna tidak perlu mengetahui bahwa itu adalah {i>screenshot<i} (tangkapan layar) dan tidak perlu tahu di mana penulis teknologi itu berselancar ketika mereka menulis instruksi. Deskripsi gambar didasarkan pada konteks alasan gambar tersebut disertakan sejak awal.

Jika screenshot menunjukkan cara menemukan nomor versi browser dengan membuka chrome://version/, sertakan URL di bagian konten halaman sebagai petunjuk, dan berikan string kosong sebagai atribut alt karena gambar tidak memberikan informasi yang tidak ada dalam teks di sekitarnya.

Jika gambar tidak memberikan informasi tambahan atau hanya dekoratif, atribut harus tetap ada di sana, hanya sebagai string kosong.

<img src="svg/magazine.svg" alt="" role="none" />

MachineLearningWorkshop.com memiliki tujuh gambar latar depan, jadi tujuh gambar dengan atribut alt: tombol lampu telur Paskah, ikon manual, dua foto biografi Hal dan Hawa, serta tiga avatar blender, penyedot debu, dan pemanggang roti. Tujuan gambar latar depan yang tampak seperti majalah adalah satu-satunya yang benar-benar dekoratif. Halaman ini juga memiliki dua gambar latar; ini juga bersifat dekoratif dan tidak dapat diakses karena ditambahkan dengan CSS.

Majalah ini, yang sepenuhnya dekoratif, memiliki atribut alt kosong, dan role none karena gambar sepenuhnya SVG presentasional. Jika bermakna, gambar SVG harus menyertakan role="img".

<img src="svg/magazine.svg" alt="" role="none" />

Ada tiga ulasan di bagian bawah halaman, masing-masing dengan gambar poster. Biasanya, teks alt adalah namanya dari orang yang ada dalam foto.

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

Sebaliknya, karena ini adalah halaman lelucon, Anda harus menyampaikan apa yang mungkin tidak terlihat oleh pengguna dengan gangguan penglihatan sehingga mereka tidak melewatkan humor; kita menggunakan fungsi mesin asli sebagai alt, bukan menggunakan nama karakter:

<img src="images/blender.svg" alt="blender" role="img" />

Foto instruktur bukan hanya avatar: tetapi adalah gambar biografis dan karena itu mendapatkan deskripsi yang lebih rinci.

Jika situs ini benar-benar ada, Anda harus memberikan deskripsi paling singkat tentang bentuk guru yang akan dilihat calon siswa mengenali mereka saat memasuki kelas.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

Karena ini adalah situs lelucon, sebagai gantinya berikan informasi yang relevan dalam konteks lelucon:

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

Jika Anda membacakan halaman kepada teman melalui telepon, mereka tidak akan peduli dengan tampilan titik merah tersebut. Dalam hal ini, riwayat referensi film itu penting.

Saat menulis teks deskriptif, pertimbangkan informasi apa yang disampaikan gambar yang penting dan relevan bagi pengguna dan sertakan. Ingat, konten atribut alt untuk gambar berbeda-beda berdasarkan konteksnya. Semua informasi yang disampaikan dalam gambar bahwa pengguna yang normal dapat mengakses dan relevan dengan konteksnya adalah hal yang perlu disampaikan; tidak lebih. Sampaikan dengan singkat, tepat, dan berguna.

Atribut src dan alt adalah persyaratan minimum untuk gambar tersemat. Ada beberapa atribut lain yang perlu kita diskusikan.

Gambar yang responsif

Ada berbagai ukuran area pandang. Ada juga resolusi layar yang berbeda. Anda tidak ingin menyia-nyiakan penggunaan ponsel bandwidth dengan menyajikan gambar yang cukup lebar untuk monitor layar besar, tetapi Anda mungkin ingin menyajikan resolusi yang lebih tinggi gambar untuk perangkat kecil yang memiliki resolusi layar empat kali lebih besar daripada biasanya. Ada beberapa cara untuk menayangkan gambar yang berbeda berdasarkan ukuran area pandang dan resolusi layar.

<img> srcset atribut

Atribut srcset memungkinkan saran beberapa file gambar, saat browser memilih gambar yang akan diminta berdasarkan beberapa kueri media, termasuk ukuran area pandang dan resolusi layar.

Mungkin ada satu atribut srcset per elemen <img>, tetapi srcset tersebut dapat ditautkan ke beberapa gambar. srcset menerima daftar nilai yang dipisahkan koma, masing-masing berisi URL aset, diikuti dengan spasi yang diikuti dengan untuk opsi gambar tersebut. Jika deskriptor lebar digunakan, Anda juga harus menyertakan atribut sizes dengan media atau ukuran sumber untuk setiap opsi srcset selain yang terakhir. Bagian Pelajari yang membahas gambar responsif dengan srcset dan sintaksis deskriptif patut dibaca.

Gambar srcset akan diprioritaskan daripada gambar src jika ada kecocokan.

<picture> dan <source>

Metode lain untuk menyediakan banyak resource dan memungkinkan browser merender aset yang paling sesuai adalah dengan Elemen <picture>. Elemen <picture> adalah penampung elemen untuk beberapa opsi gambar yang tercantum dalam <source> dalam jumlah yang tidak terbatas dan satu elemen <img> yang diperlukan.

Atribut <source> mencakup srcset, sizes, media, width, dan height. Atribut srcset umum untuk img, source, dan link, tetapi umumnya diterapkan sedikit berbeda di sumber karena kueri media dapat dicantumkan dalam atribut media <srcset>. <source> juga mendukung format gambar yang ditentukan dalam atribut type.

Browser akan mempertimbangkan setiap elemen <source> turunan dan memilih yang paling cocok di antara elemen tersebut. Jika tidak ditemukan kecocokan, URL dari atribut src elemen <img> dipilih. Nama yang dapat diakses berasal dari atribut alt <img> bertingkat. Bagian Pelajari yang mencakup elemen <picture> dan sintaksis preskriptif juga patut dibaca.

Fitur performa tambahan

Pemuatan lambat

Atribut loading memberi tahu browser yang mendukung JS cara memuat gambar. Nilai eager default berarti gambar dimuat langsung saat HTML diuraikan, bahkan jika gambar berada di luar area pandang yang terlihat. Dengan menetapkan loading="lazy" pemuatan gambar ditunda hingga kemungkinan masuk ke area pandang. "Mungkin" ditentukan oleh browser berdasarkan jarak gambar berasal dari area pandang. Label ini akan diperbarui saat pengguna men-scroll. Pemuatan lambat membantu menghemat bandwidth dan CPU, sehingga meningkatkan performa bagi sebagian besar pengguna. Jika JavaScript dinonaktifkan, untuk alasan keamanan, semua gambar akan ditetapkan secara default ke eager.

<img src="switch.svg" alt="light switch" loading="lazy" />

Rasio aspek

Browser mulai merender HTML saat diterima, sehingga membuat permintaan untuk aset saat ditemukan. Ini berarti {i>browser<i} adalah sudah merender HTML saat menemukan tag <img> dan membuat permintaan. Dan gambar dapat memerlukan waktu beberapa saat untuk dimuat. Secara default, browser tidak menyediakan ruang untuk gambar selain ukuran yang dibutuhkan untuk merender teks alt.

Elemen <img> selalu mendukung atribut height dan width tanpa unit. Properti ini tidak lagi digunakan dan di CSS. CSS dapat menentukan dimensi gambar, sering kali menetapkan satu dimensi seperti max-width: 100%; untuk memastikan rasio aspek dipertahankan. Karena biasanya disertakan dalam <head>, CSS akan diurai sebelum <img> ditemukan. Namun, tanpa mencantumkan height atau rasio aspek, ruang yang dicadangkan adalah tinggi (atau lebar) teks alt. Karena sebagian besar pengembang hanya mendeklarasikan lebar, penerimaan dan rendering gambar menyebabkan pergeseran tata letak kumulatif yang membahayakan data web. Untuk mengatasi masalah ini, browser mendukung rasio aspek gambar. Menyertakan atribut height dan width di <img> bertindak sebagai petunjuk ukuran, yang memberi tahu browser tentang rasio aspek, memungkinkan ruang yang harus disediakan untuk proses rendering gambar. Dengan menyertakan nilai tinggi dan lebar pada gambar, browser mengetahui rasio aspek gambar tersebut. Saat browser bertemu dengan satu dimensi, seperti contoh 50% kami, hal ini akan menghemat ruang untuk gambar yang mengikuti dimensi CSS dan dengan dimensi lain mempertahankan rasio aspek lebar tinggi.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

Gambar Anda akan tetap responsif jika CSS disiapkan dengan benar untuk membuatnya responsif. Ya, unitless yang disertakan Nilai height dan width akan diganti dengan CSS. Tujuan dari memasukkan atribut ini adalah untuk memesan tempat di rasio aspek yang tepat, meningkatkan performa dengan mengurangi pergeseran tata letak. Halaman akan tetap memerlukan waktu kira-kira sama waktu pemuatan, tetapi UI tidak akan melompat saat gambar di-lukiskan ke layar.

Fitur gambar lainnya

Elemen <img> juga mendukung crossorigin, decoding, referrerpolicy, dan, di browser berbasis Blink, fetchpriority. Jarang digunakan, jika gambar adalah bagian dari peta sisi server, sertakan atribut boolean ismap dan tempatkan <img> di link untuk pengguna tanpa perangkat pointer.

Atribut ismap tidak diperlukan, atau bahkan didukung, di <input type="image" name="imageSubmitName"> sebagai x dan y koordinat lokasi klik yang dikirim selama pengiriman formulir, dengan menambahkan nilai ke nama input, jika ada. Misalnya, sesuatu seperti &imageSubmitName.x=169&imageSubmitName.y=66 akan dikirimkan bersama formulir saat pengguna mengklik gambar, mengirimkannya. Jika gambar tidak memiliki atribut name, x dan y akan dikirim: &x=169&y=66.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang gambar.

Apa dua atribut yang harus selalu dimiliki gambar latar depan?

size

Coba lagi.

alt

Benar.

src

Benar.