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>
.
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" />
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?
alt
src
size