Gambar

Gambar dekoratif, seperti gradien latar belakang pada tombol atau gambar latar di bagian konten atau halaman penuh, dipresentasikan dan harus diterapkan dengan CSS. Saat gambar menambahkan konteks ke dokumen, gambar tersebut adalah konten dan harus disematkan dengan HTML.

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

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

Atribut srcset pada <img> dan elemen <picture> menyediakan cara untuk menyertakan beberapa sumber gambar dengan kueri media terkait, masing-masing dengan sumber gambar penggantian, sehingga memungkinkan penayangan file gambar yang paling sesuai berdasarkan resolusi perangkat, 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>, beserta 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 memungkinkan peningkatan performa rendering gambar melalui berbagai atribut. Tag <img>, dan juga 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 mengaktifkan pemuatan lambat.

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

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

File src adalah jalur dan nama file gambar tersemat. Atribut src digunakan untuk memberikan URL gambar. Selanjutnya, browser akan mengambil aset dan merendernya ke halaman. Atribut ini diperlukan oleh <img>; tanpanya, tidak ada apa pun yang dapat dirender.

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

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

Jika gambar dari jenis file SVG, sertakan juga role="img", yang diperlukan karena adanya bugs VoiceOver.

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

Menulis deskripsi gambar alt yang efektif

Atribut alternatif bertujuan agar singkat dan ringkas, sehingga memberikan semua informasi relevan yang disampaikan oleh gambar, sekaligus menghilangkan informasi yang berlebihan untuk konten lain dalam dokumen atau tidak berguna. Dalam menulis teks, nada harus mencerminkan nuansa situs.

Untuk menulis teks alternatif yang efektif, bayangkan Anda membaca seluruh halaman kepada orang yang tidak dapat melihatnya. Dengan menggunakan elemen <img> semantik, pengguna dan bot pembaca layar akan diberi tahu bahwa elemen tersebut adalah gambar. Menyertakan "Ini adalah gambar/screenshot/foto" di alt, berlebihan. Pengguna tidak perlu mengetahui gambar, tetapi mereka perlu tahu informasi apa yang disampaikan oleh gambar tersebut.

Biasanya, Anda tidak akan mengatakan, "Ini adalah gambar kasar yang memakai topi merah". Sebaliknya, Anda akan menyampaikan informasi yang disampaikan oleh gambar sehubungan dengan konteks dokumen lainnya; dan apa yang Anda sampaikan akan berubah bergantung pada konteks serta konten teks di sekitarnya.

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

Jika foto tersebut adalah bagian dari halaman adopsi Fluffy di situs tempat penampungan hewan, target audiensnya adalah calon induk . Teks harus menjelaskan informasi yang disampaikan dalam gambar yang relevan bagi pengguna dan 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 halaman adopsi umumnya mencakup spesies, jenis, usia, dan gender hewan peliharaan yang dapat diadopsi, sehingga hal ini tidak perlu diulang dalam teks alternatif. Tetapi biografi tertulis mungkin tidak menyertakan panjang rambut, warna, atau preferensi mainan. Perhatikan bahwa kita tidak mendeskripsikan gambar: calon pemilik tidak perlu tahu apakah anjingnya berada di dalam atau di luar ruangan, atau memiliki kalung merah dan tali berwarna biru.

Saat menggunakan gambar untuk ikonografi, karena atribut alt memberikan label aksesibilitas, sampaikan arti ikon, bukan deskripsi gambar. Misalnya, atribut alt ikon kaca pembesar adalah search. Ikon yang terlihat seperti rumah memiliki home sebagai teks alternatif. Deskripsi ikon disket 5 inci adalah save. Jika ada dua ikon Fluffy yang digunakan untuk menunjukkan praktik terbaik dan antipola, yang tersenyum dalam baret hijau dapat menetapkan alt="good", sedangkan menggertak dalam baret merah mungkin membaca alt="bad". Meskipun demikian, hanya gunakan ikonografi standar, dan jika Anda menggunakan ikon non-standar seperti Fluffy yang baik dan buruk, sertakan legenda dan pastikan bahwa ikon bukan satu-satunya cara untuk menguraikan makna elemen UI Anda,

Jika gambar berupa screenshot atau grafik, tulis hal yang dipelajari dari gambar, daripada menjelaskan tampilannya. Meskipun sebuah gambar pasti bernilai ribuan kata, deskripsi harus secara ringkas menyampaikan semua yang dipelajari.

Menghapus informasi yang sudah diketahui pengguna dari konteks dan diberi tahu dalam konten. Misalnya, jika Anda berada di halaman tutorial tentang cara mengubah setelan browser dan halaman tersebut berisi mengklik ikon di browser Chrome, URL halaman di screenshot tidaklah penting. Batasi alt ke topik yang sedang dibahas: cara mengubah setelan. alt dapat berupa "Ikon setelan ada di menu navigasi di bawah kolom penelusuran". Jangan sertakan "screenshot" atau "machinelearningworkshop" karena pengguna tidak perlu mengetahui bahwa itu adalah screenshot dan tidak perlu tahu tempat penulis teknologi menjelajah saat mereka menulis petunjuknya. Deskripsi gambar didasarkan pada konteks alasan gambar disertakan pada awalnya.

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

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

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

MachineLearningWorkshop.com memiliki tujuh gambar latar depan, sehingga tujuh gambar dengan atribut alt: tombol lampu tersembunyi, ikon manual, dua foto biografi Hal dan Eve, serta tiga avatar blender, penyedot debu, dan pemanggang roti. Gambar latar depan yang terlihat seperti majalah adalah satu-satunya gambar yang sepenuhnya dekoratif. Halaman ini juga memiliki dua gambar latar; gambar ini juga bersifat dekoratif dan, karena ditambahkan dengan CSS, tidak dapat diakses.

Majalah, yang hanya bersifat dekoratif, memiliki atribut alt kosong, dan role dari none karena gambar adalah SVG presentasi sepenuhnya. Jika relevan, 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 nama dari orang yang digambarkan.

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

Karena ini adalah halaman lelucon, Anda harus menyampaikan hal-hal yang mungkin tidak terlihat oleh pengguna yang memiliki gangguan penglihatan, sehingga mereka tidak melewatkan humor tersebut. Kami menggunakan fungsi mesin yang asli sebagai alt, dan bukan menggunakan nama karakter:

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

Foto instruktur bukan hanya avatar, tetapi juga gambar biografi sehingga memberikan deskripsi yang lebih mendetail.

Jika situs tersebut benar-benar ada, Anda perlu memberikan deskripsi minimum tentang wujud pengajar tersebut agar calon siswa dapat mengenalinya 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, 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 itu. Dalam hal ini, sejarah referensi film adalah hal penting.

Saat menulis teks deskriptif, pertimbangkan informasi yang disampaikan gambar yang penting dan relevan bagi pengguna, lalu sertakan informasi tersebut. Ingat, konten atribut alt untuk gambar berbeda berdasarkan konteksnya. Semua informasi yang disampaikan dalam gambar yang dapat diakses oleh pengguna berpenglihatan normal dan relevan dengan konteks adalah apa yang perlu disampaikan; tidak lebih. Buatlah singkat, tepat, dan berguna.

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

Gambar yang responsif

Ada berbagai ukuran area pandang. Ada juga resolusi layar yang berbeda. Sebaiknya Anda tidak menyia-nyiakan bandwidth pengguna seluler dengan menyajikan gambar yang cukup lebar untuk monitor layar besar, tetapi sebaiknya sajikan gambar beresolusi lebih tinggi untuk perangkat kecil yang memiliki empat kali resolusi layar normal. Ada beberapa cara untuk menampilkan gambar yang berbeda berdasarkan ukuran area pandang dan resolusi layar.

<img> srcset atribut

Atribut srcset memungkinkan saran beberapa file gambar, dengan 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. Atribut srcset menerima daftar nilai yang dipisahkan koma, yang masing-masing berisi URL aset, diikuti dengan spasi, diikuti dengan penjelasan untuk opsi gambar tersebut. Jika deskripsi lebar digunakan, Anda juga harus menyertakan atribut sizes dengan kueri media atau ukuran sumber untuk setiap opsi srcset selain yang terakhir. Bagian Pelajari yang membahas gambar responsif dengan srcset dan sintaksis deskriptif layak dibaca.

Gambar srcset akan lebih diutamakan daripada gambar src jika ada kecocokan.

<picture> dan <source>

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

Atribut <source> mencakup srcset, sizes, media, width, dan height. Atribut srcset sama untuk img, source, dan link, tetapi umumnya diterapkan sedikit berbeda pada sumber karena kueri media dapat dicantumkan dalam atribut media <srcset> sebagai gantinya. <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 ada kecocokan yang ditemukan, URL atribut src milik elemen <img> akan dipilih. Nama yang dapat diakses berasal dari atribut alt <img> bertingkat. Bagian Pelajari yang membahas elemen <picture> dan sintaksis preskriptif juga layak dibaca.

Fitur performa tambahan

Pemuatan lambat

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

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

Rasio aspek

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

Elemen <img> selalu mendukung atribut height dan width tanpa unit. Properti ini tidak lagi digunakan dan digantikan dengan CSS. CSS dapat menentukan dimensi gambar, sering kali menetapkan dimensi tunggal seperti max-width: 100%; untuk memastikan rasio aspek tetap dipertahankan. Karena biasanya disertakan dalam <head>, CSS akan diuraikan sebelum <img> ditemukan. Namun, tanpa mencantumkan height atau rasio aspek secara eksplisit, ruang yang direservasi adalah tinggi (atau lebar) teks alt. Karena sebagian besar developer hanya mendeklarasikan lebar, tanda terima dan rendering gambar akan menyebabkan pergeseran tata letak kumulatif yang merusak data web. Untuk mengatasi masalah ini, browser mendukung rasio aspek gambar. Menyertakan atribut height dan width di <img> akan berfungsi sebagai petunjuk ukuran, yang memberi tahu browser tentang rasio aspek, yang memungkinkan jumlah ruang yang tepat untuk dicadangkan untuk rendering gambar akhir. Dengan menyertakan nilai tinggi dan lebar pada gambar, browser akan mengetahui rasio aspek gambar tersebut. Saat browser menemukan dimensi tunggal, seperti contoh 50%, browser 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 menjadikannya responsif. Ya, nilai height dan width tanpa unit yang disertakan akan diganti dengan CSS. Tujuan menyertakan atribut ini adalah untuk menyediakan ruang pada rasio aspek yang tepat, sehingga meningkatkan performa dengan mengurangi pergeseran tata letak. Halaman masih akan memerlukan waktu yang kurang lebih sama untuk dimuat, tetapi UI tidak akan melompat saat gambar dilukis ke layar.

Fitur gambar lainnya

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

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

Menguji pemahaman Anda

Uji pengetahuan Anda tentang gambar.