Gambar

Gambar dekoratif, seperti gradien latar belakang pada tombol atau gambar latar belakang pada bagian konten atau halaman penuh, bersifat presentasi dan harus diterapkan dengan CSS. Jika 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 mereferensikan resource gambar dan atribut alt yang mendeskripsikan gambar.

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

Atribut srcset di <img> dan elemen <picture> menyediakan cara untuk menyertakan beberapa sumber gambar dengan kueri media terkait, yang masing-masing memiliki sumber gambar penggantian, sehingga memungkinkan penayangan file gambar yang paling sesuai berdasarkan resolusi perangkat, kemampuan browser, dan ukuran area tampilan. Atribut srcset memungkinkan penyediaan beberapa versi gambar berdasarkan resolusi dan, bersama dengan atribut sizes, ukuran area tampilan 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 performa rendering gambar ditingkatkan melalui berbagai atribut. Tag <img>, dan oleh karena itu tombol kirim grafis <input type="image">, dapat menyertakan atribut height dan width untuk menetapkan 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 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 yang disematkan. Atribut src digunakan untuk memberikan URL gambar. Kemudian, browser akan mengambil aset dan merendernya ke halaman. Atribut ini diperlukan oleh <img>. Tanpa itu, tidak ada yang dapat dirender.

Atribut alt menyediakan teks alternatif untuk gambar, yang memberikan deskripsi gambar bagi mereka yang tidak dapat melihat layar (pikirkan mesin telusur dan teknologi pendukung, serta Alexa, Siri, dan Asisten Google), dan dapat ditampilkan oleh browser jika gambar tidak dimuat. Selain bagi pengguna dengan jaringan lambat atau bandwidth terbatas, 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 berjenis file SVG, sertakan juga role="img", yang diperlukan karena VoiceOver VoiceOver.

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

Menulis deskripsi gambar alt yang efektif

Atribut alt bertujuan agar singkat dan ringkas, memberikan semua informasi relevan yang disampaikan gambar sekaligus menghilangkan informasi yang berlebihan dengan konten lain dalam dokumen atau tidak berguna. Dalam menulis teks, gaya bahasa harus mencerminkan gaya bahasa situs.

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

Biasanya, Anda tidak akan mengatakan, "Ini adalah gambar buram seekor yang memakai topi merah." Sebaliknya, Anda akan menyampaikan apa yang disampaikan gambar dalam kaitannya dengan konteks dokumen lainnya. Apa yang Anda sampaikan akan berubah, bergantung pada konteks dan konten teks di sekitarnya.

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

Jika foto tersebut adalah bagian dari halaman adopsi Fluffy di situs penampungan hewan, target audiensnya adalah calon pemilik. Teks harus mendeskripsikan informasi yang disampaikan dalam gambar yang relevan bagi pengadopsi 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 tepat. Teks halaman adopsi umumnya mencakup spesies, ras, usia, dan jenis kelamin hewan peliharaan yang dapat diadopsi, sehingga tidak perlu diulang dalam teks alternatif. Namun, biografi tertulis tersebut mungkin tidak mencakup panjang rambut, warna, atau preferensi mainan.

Yang penting, kami tidak mendeskripsikan gambar secara keseluruhan. Calon pemilik tidak perlu mengetahui apakah berada di dalam atau di luar ruangan, atau apakah tersebut memiliki kalung merah dan tali biru.

Saat menggunakan gambar untuk ikonografi, karena atribut alt memberikan nama yang dapat diakses, sampaikan makna 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 anti-pola, yang tersenyum dengan baret hijau dapat memiliki alt="good" yang ditetapkan, sementara yang menggeram dengan baret merah mungkin membaca alt="bad". Namun, gunakan hanya ikonografi standar, dan jika Anda menggunakan ikon non-standar seperti Fluffy baik dan buruk, sertakan legenda untuk memastikan bahwa ikon bukan satu-satunya cara untuk menguraikan arti elemen UI Anda.

Jika gambar adalah screenshot atau grafik, tulis apa yang dipelajari dari gambar tersebut, bukan mendeskripsikan penampilannya. Meskipun gambar dapat menyampaikan seribu kata, deskripsi harus menyampaikan semua yang dipelajari secara ringkas.

Jangan sertakan informasi yang sudah diketahui pengguna dari konteks dan yang sudah diberitahukan dalam konten. Misalnya, jika Anda berada di halaman tutorial tentang mengubah setelan browser dan halaman tersebut membahas cara mengklik ikon di browser chrome, URL halaman dalam screenshot tidak penting. Batasi alt pada topik yang sedang dibahas: cara mengubah setelan.

alt mungkin adalah "Ikon setelan ada di menu navigasi di bawah kolom penelusuran." Jangan sertakan "screenshot" atau "machinelearningworkshop" karena pengguna tidak perlu tahu bahwa itu adalah screenshot dan tidak perlu tahu situs yang dibuka penulis teknis saat menulis petunjuk tersebut. Deskripsi gambar didasarkan pada konteks alasan gambar disertakan.

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 dalam teks di sekitarnya.

Jika gambar tidak memberikan informasi tambahan atau hanya sebagai dekorasi, atribut tersebut tetap harus 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: sakelar lampu telur Paskah, 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 hanya bersifat dekoratif. Halaman ini juga memiliki dua gambar latar. Gambar ini bersifat dekoratif dan ditambahkan dengan CSS, sehingga tidak dapat diakses.

Majalah yang hanya bersifat dekoratif memiliki atribut alt kosong, dan role none karena gambar adalah SVG yang hanya bersifat presentasi. 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 nama orang yang ada di dalam gambar.

<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 penglihatan rendah agar mereka tidak melewatkan humornya. 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: foto tersebut adalah gambar biografi dan oleh karena itu mendapatkan deskripsi yang lebih mendetail.

Jika ini adalah situs sungguhan, Anda akan memberikan deskripsi minimum tentang penampilan pengajar, sehingga calon siswa dapat mengenalinya saat memasuki ruang 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 tersebut kepada teman melalui telepon, dia tidak akan peduli seperti apa bentuk titik merah itu. Dalam hal ini, histori referensi film penting.

Saat menulis teks deskriptif, pertimbangkan informasi apa yang disampaikan gambar yang penting dan relevan bagi pengguna, lalu sertakan informasi tersebut. Ingat, konten atribut alt untuk gambar berbeda-beda berdasarkan konteksnya. Semua informasi yang disampaikan dalam gambar yang dapat diakses oleh pengguna yang dapat melihat dan relevan dengan konteks adalah informasi yang perlu disampaikan; tidak lebih. Buat agar tetap 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 banyak ukuran area pandang dan resolusi layar. Anda tidak ingin membuang-buang bandwidth pengguna seluler dengan menyajikan gambar yang cukup lebar untuk monitor layar besar, tetapi Anda mungkin ingin menyajikan gambar beresolusi lebih tinggi untuk perangkat kecil yang memiliki resolusi layar empat kali lipat dari resolusi normal. Ada beberapa cara untuk menayangkan gambar yang berbeda berdasarkan ukuran area tampilan dan resolusi layar.

<img> srcset atribut

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

Dapat 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, lalu deskriptor untuk opsi gambar tersebut. Jika deskriptor lebar digunakan, Anda juga harus menyertakan atribut sizes dengan kueri media atau ukuran sumber untuk setiap opsi srcset selain yang terakhir. Bagian Learn yang membahas gambar responsif dengan srcset dan sintaksis deskriptif layak dibaca.

Gambar srcset lebih diprioritaskan 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 umum untuk img, source, dan link, tetapi umumnya diterapkan sedikit berbeda di sumber karena kueri media dapat dicantumkan di atribut media <srcset>. <source> juga mendukung format gambar yang ditentukan dalam atribut type.

Browser mempertimbangkan setiap elemen turunan <source> dan memilih kecocokan terbaik di antaranya. Jika tidak ada kecocokan, URL dari atribut src elemen <img> akan dipilih. Nama yang dapat diakses berasal dari atribut alt dari <img> bertingkat. Bagian Learn yang membahas elemen <picture> dan sintaksis preskriptif juga layak dibaca.

Fitur performa tambahan

Ada sejumlah fitur gambar tambahan yang dapat meningkatkan performa situs Anda.

Pemuatan lambat

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

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

Rasio aspek

Browser mulai merender HTML saat diterima, membuat permintaan untuk aset saat ditemukan. Artinya, browser sudah merender HTML saat menemukan tag <img> dan membuat permintaan. Gambar juga perlu waktu 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 satuan. Properti ini tidak digunakan lagi dan digantikan dengan CSS. CSS dapat menentukan dimensi gambar, sering kali menetapkan satu dimensi seperti max-width: 100%; untuk memastikan rasio aspek dipertahankan.

Karena CSS biasanya disertakan dalam <head>, CSS diuraikan sebelum <img> ditemukan. Namun, tanpa mencantumkan height atau rasio aspek secara eksplisit, ruang yang dicadangkan adalah tinggi (atau lebar) teks alt.

Jika developer hanya mendeklarasikan lebar, penerimaan dan rendering gambar akan menyebabkan pergeseran tata letak kumulatif yang merusak web vitals. Untuk mengatasi masalah ini, browser mendukung rasio aspek gambar. Menyertakan atribut height dan width pada <img> berfungsi sebagai petunjuk ukuran, yang memberi tahu browser tentang rasio aspek, sehingga memungkinkan jumlah ruang yang tepat dicadangkan untuk rendering gambar pada akhirnya. Saat browser menemukan satu dimensi, seperti contoh 50% kita, browser akan menyimpan ruang untuk gambar yang sesuai dengan dimensi CSS dan dengan dimensi lainnya yang mempertahankan rasio aspek lebar terhadap tinggi.

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

Gambar Anda responsif jika CSS disiapkan dengan benar agar gambar tersebut responsif. Ya, nilai height dan width tanpa satuan yang disertakan akan diganti dengan CSS. Tujuan menyertakan atribut ini adalah untuk memesan ruang dengan rasio aspek yang tepat, sehingga meningkatkan performa dengan mengurangi pergeseran tata letak. Halaman akan tetap memerlukan waktu pemuatan yang hampir sama, tetapi UI tidak akan melompat saat gambar ditampilkan ke layar.

Fitur gambar lainnya

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

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

Periksa pemahaman Anda

Uji pengetahuan Anda tentang gambar.