Teks di web secara otomatis dilipat di tepi layar sehingga tidak tambahan. Di sisi lain, gambar memiliki ukuran intrinsik. Jika gambar lebih lebar dari layar, gambar akan meluap dan pengguna harus men-scroll secara horizontal untuk melihat semuanya.
Untungnya, CSS menyediakan alat untuk mencegah hal ini terjadi.
Batasi gambar Anda
Di style sheet, Anda dapat menggunakan max-inline-size
untuk mendeklarasikan bahwa gambar tidak akan pernah bisa dirender dengan ukuran yang lebih lebar dari
yang memuat elemen.
img {
max-inline-size: 100%;
block-size: auto;
}
Anda juga dapat menerapkan aturan yang sama untuk jenis konten tersemat lainnya, seperti video dan iframe.
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
Dengan menerapkan aturan ini, browser secara otomatis memperkecil skala gambar agar sesuai dengan layar.
![Dua screenshot; gambar pertama menampilkan gambar yang membentang melebihi lebar browser; yang kedua menampilkan gambar yang sama yang dibatasi dalam area pandang browser.](https://web.dev/static/learn/design/responsive-images/image/two-screenshots-first-s-fbd980b13ed58.png?authuser=9&hl=id)
Menambahkan block-size
nilai auto
berarti browser mempertahankan gambar Anda' rasio aspek seperti
mengubah ukurannya.
Terkadang, dimensi gambar ditetapkan oleh sistem pengelolaan konten (CMS) atau
sistem penayangan konten lainnya. Jika desain Anda membutuhkan rasio aspek yang berbeda
dari default CMS, Anda dapat menggunakan
aspect-ratio
untuk mempertahankan desain situs Anda:
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
Sayangnya, hal ini sering kali menyebabkan browser harus menekan atau melebarkan gambar agar pas dengan ruang yang diinginkan.
![Profil tampan yang tampak bahagia dengan bola di mulutnya, tetapi gambarnya gepeng.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-6886fa1061908.jpg?authuser=9&hl=id)
Untuk mencegah squashing dan peregangan, gunakan
Properti object-fit
.
Nilai object-fit
contain
memberi tahu browser untuk mempertahankan
rasio aspek, dengan menyisakan ruang kosong di sekitar gambar jika diperlukan.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
Nilai object-fit
cover
memberi tahu browser untuk mempertahankan
rasio aspek, yang dapat memangkas gambar jika diperlukan.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
![Profil tampan yang tampak bahagia dengan bola di mulutnya; ada ruang ekstra
di kedua sisi gambar.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-19f229b25e797.jpg?authuser=9&hl=id)
![Profil tampan yang tampak bahagia dengan bola di mulutnya; gambar telah dipangkas di bagian atas dan bawah.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-9a3c6aedc16d2.jpg?authuser=9&hl=id)
Anda dapat mengubah posisi pemangkasan gambar menggunakan object-position saat ini. Ini akan menyesuaikan fokus pemangkasan, sehingga Anda dapat memastikan bagian penting gambar masih terlihat.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
![Profil tampan yang tampak bahagia dengan bola di mulutnya; gambar hanya dipangkas di bagian bawah.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-a9de08840e85f.jpg?authuser=9&hl=id)
object-position
untuk memangkas
hanya satu sisi gambar.Mengirimkan gambar
Aturan CSS tersebut memberi tahu browser bagaimana Anda ingin gambar dirender. Anda dapat menyediakan petunjuk dalam HTML Anda tentang bagaimana browser harus menangani gambar tersebut.
Petunjuk untuk menentukan ukuran
Jika Anda mengetahui dimensi gambar, selalu sertakan width
dan height
. Bahkan jika gambar dirender pada ukuran yang berbeda karena
max-inline-size
, browser tetap mengetahui rasio lebar tinggi dan
dapat menyisihkan
jumlah ruang yang tepat. Hal ini mencegah konten Anda yang lain
melompat-lompat ketika gambar dimuat.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
Petunjuk untuk memuat
Gunakan atribut loading
untuk memberi tahu browser apakah akan menunda pemuatan
gambar hingga berada di dalam atau dekat dengan area pandang. Untuk gambar di paruh bawah, gunakan nilai
dari lazy
. Browser tidak akan memuat gambar lambat hingga pengguna men-scroll jauh
cukup rendah sehingga gambar akan terlihat. Jika pengguna tidak pernah
men-scroll, gambar tidak pernah dimuat.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
>
Untuk banner besar di paruh atas, jangan gunakan loading
. Jika situs Anda secara otomatis
menerapkan atribut loading="lazy"
, Anda biasanya dapat menetapkan loading
ke
nilai default eager
untuk mencegah gambar dimuat dengan lambat:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
>
Ambil Prioritas
Untuk gambar penting, seperti gambar LCP, Anda dapat lebih
memprioritaskan pemuatan menggunakan Prioritas Ambil dengan
menetapkan atribut fetchpriority
ke high
:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
fetchpriority="high"
>
Hal ini memberi tahu browser untuk segera mengambil gambar dengan prioritas tinggi, alih-alih menunggu hingga browser menyelesaikan tata letaknya dan akan mengambil gambar seperti biasanya.
Namun, saat Anda meminta browser untuk memprioritaskan download satu resource, seperti
gambar, browser harus tidak memprioritaskan sumber daya lain seperti skrip atau
file font. Hanya tetapkan fetchpriority="high"
pada gambar jika benar-benar penting.
Petunjuk untuk pramuat
Sebaiknya hindari pramuat bila memungkinkan dengan menyertakan semua gambar dalam file HTML awal. Namun, beberapa gambar mungkin tidak tersedia, seperti gambar ditambahkan oleh JavaScript atau gambar latar CSS.
Anda dapat menggunakan pramuat agar browser dapat mengambil gambar penting ini terlebih dahulu
baik. Untuk gambar yang sangat penting, Anda dapat menggabungkan
pramuat ini dengan
Atribut fetchpriority
:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
Sekali lagi, gunakan atribut ini sesekali agar tidak menimpa heuristik prioritas terlalu sering. Penggunaan berlebihan dapat menyebabkan performa terdegradasi.
Beberapa browser mendukung pramuat gambar responsif
berdasarkan srcset, menggunakan atribut imagesrcset
dan imagesizes
.
Contoh:
<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">
Dengan mengecualikan penggantian href
, Anda dapat memastikan browser tanpa srcset
masih mendukung pramuat gambar yang benar.
Anda tidak dapat melakukan pramuat gambar dalam format berbeda berdasarkan dukungan browser format tertentu. Mencoba hal ini dapat menghasilkan download tambahan yang membuang-buang waktu pengguna layanan otomatis dan data skalabel.
Dekode gambar
Ada juga atribut decoding
yang dapat Anda tambahkan ke elemen img
. Anda dapat mengetahui
browser tempat gambar dapat didekode secara asinkron, sehingga dapat memprioritaskan
memproses konten lainnya.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
>
Anda dapat menggunakan nilai sync
jika gambar itu sendiri adalah bagian terpenting dari
konten yang diprioritaskan.
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
decoding="sync"
>
Atribut decoding
tidak mengubah seberapa cepat gambar didekode. Memengaruhi
hanya apakah browser menunggu decoding gambar ini terjadi sebelum
merender konten lainnya.
Dalam kebanyakan kasus, hal ini tidak berdampak
besar, tetapi terkadang dapat membiarkan
browser menampilkan gambar atau konten lainnya sedikit lebih cepat. Misalnya, untuk
dokumen besar dengan banyak elemen yang membutuhkan waktu untuk merender, dan dengan
gambar yang memerlukan waktu lama untuk didekode, menyetel sync
pada gambar penting akan memberi tahu
browser menunggu gambar dan merender keduanya sekaligus. Sebagai alternatif,
Anda dapat menyetel async
agar browser menampilkan konten lebih cepat dan tanpa
menunggu gambar untuk didekode.
Namun, pilihan yang lebih baik
biasanya untuk mencoba
hindari ukuran DOM yang berlebihan
dan menggunakan gambar responsif untuk mengurangi waktu decoding, bukan menggunakan decoding
.
Gambar responsif dengan srcset
Berkat deklarasi max-inline-size: 100%
tersebut, gambar Anda tidak dapat keluar
container-nya. Namun, jika pengguna memiliki layar kecil dan bandwidth
jaringan, membuat mereka mendownload gambar berukuran sama dengan pengguna yang memiliki layar lebih besar
pemborosan data.
Untuk memperbaiki masalah ini, tambahkan beberapa versi gambar yang sama dengan ukuran yang berbeda,
dan menggunakan srcset
untuk memberi tahu browser bahwa ukuran ini ada dan kapan menggunakannya.
Deskripsi lebar
Anda dapat menentukan srcset
menggunakan daftar nilai yang dipisahkan koma. Setiap nilai adalah
URL gambar, diikuti dengan spasi, lalu beberapa metadata tentang
gambar yang disebut deskriptor.
Dalam contoh ini, metadata menjelaskan lebar setiap gambar menggunakan w
unit iklan. Satu w
adalah lebar satu piksel.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
>
Atribut srcset
melengkapi atribut src
, bukan menggantinya.
Anda tetap harus memiliki atribut src
yang valid, tetapi browser dapat menggantinya
dengan salah satu opsi yang tercantum dalam srcset
. Untuk menghemat {i>bandwidth<i}, metode
browser hanya mengunduh gambar yang lebih besar jika diperlukan.
Ukuran
Jika Anda menggunakan deskriptor lebar, Anda juga harus menggunakan atribut
sizes
untuk memberikan informasi lebih lanjut ke browser. Ini memberi tahu
browser tentang ukuran
Anda mengharapkan gambar ditampilkan pada
dalam kondisi yang berbeda. Mereka
ditentukan dalam kueri media.
Atribut sizes
mengambil daftar gambar dan kueri media yang dipisahkan koma
dan lebarnya.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 300w,
medium-image.png 600w,
large-image.png 1200w"
sizes="(min-width: 66em) 33vw,
(min-width: 44em) 50vw,
100vw"
>
Dalam contoh ini, Anda memberi tahu browser bahwa dalam area pandang dengan lebar lebih
66em
, seharusnya menampilkan gambar tidak lebih dari sepertiga layar
(misalnya, di dalam tata letak tiga kolom).
Untuk lebar area pandang antara 44em
dan 66em
, tampilkan gambar pada setengah
lebar layar (seperti dalam tata letak dua kolom).
Untuk ukuran yang lebih sempit dari 44em
, tampilkan gambar selebar penuh
layar.
Ini berarti bahwa gambar terbesar tidak selalu digunakan untuk layar. Jendela browser lebar yang dapat menampilkan tata letak multi-kolom menggunakan gambar yang pas dalam satu kolom, yang mungkin lebih kecil dibandingkan gambar yang digunakan untuk dengan menggunakan tata letak kolom tunggal pada layar yang lebih sempit.
Deskriptor kepadatan piksel
Anda juga dapat menggunakan deskriptor untuk memberikan versi alternatif gambar kepada ditampilkan pada layar yang memiliki kepadatan tinggi, untuk membuat gambar tampak tajam saat resolusi yang disediakan.
![Dua versi gambar tampan yang tampak bahagia dengan bola di mulutnya, satu gambar terlihat jelas dan gambar lainnya tampak kabur.](https://web.dev/static/learn/design/responsive-images/image/two-versions-the-same-im-f13b154ee2cc8.png?authuser=9&hl=id)
Gunakan deskriptor kepadatan untuk menjelaskan kepadatan piksel gambar dalam
terkait dengan gambar dalam atribut src
. Deskriptor kepadatan adalah angka
diikuti dengan huruf x, seperti dalam 1x
atau 2x
.
<img
src="small-image.png"
alt="A description of the image."
width="300"
height="200"
loading="lazy"
decoding="async"
srcset="small-image.png 1x,
medium-image.png 2x,
large-image.png 3x"
>
Jika small-image.png
berukuran 300x200 piksel, dan medium-image.png
berukuran
600 x 400 piksel, lalu medium-image.png
dapat memiliki 2x
setelahnya di
Daftar srcset
.
Anda tidak harus menggunakan bilangan bulat. Jika versi lain gambar adalah 450 x 400,
Berukuran 300 piksel, Anda dapat mendeskripsikannya dengan 1.5x
.
Gambar presentasi
Gambar di HTML merupakan konten. Itulah sebabnya Anda menyertakan atribut alt
dengan deskripsi gambar untuk {i>screen reader<i} dan mesin telusur.
Jika Anda menyematkan gambar yang bersifat dekoratif, tanpa elemen
sendiri, Anda dapat menggunakan atribut alt
kosong.
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
Anda harus selalu menyertakan atribut alt
, meskipun kosong.
Atribut alt
kosong memberi tahu pembaca layar bahwa gambar
presentasi. Atribut alt
yang tidak ada tidak memberikan informasi tersebut.
Idealnya, gambar presentasi atau dekoratif disertakan dengan CSS, bukan HTML. HTML untuk struktur. CSS digunakan untuk presentasi.
Gambar latar
Gunakan properti background-image
di CSS untuk memuat gambar presentasi.
element {
background-image: url(flourish.png);
}
Anda dapat menentukan beberapa kandidat gambar menggunakan
image-set
fungsi untuk background-image
.
Fungsi image-set
di CSS sangat mirip dengan atribut srcset
di HTML.
Berikan daftar gambar dengan deskriptor kepadatan piksel untuk setiap gambar.
element {
background-image: image-set(
small-image.png 1x,
medium-image.png 2x,
large-image.png 3x
);
}
Browser akan memilih gambar yang paling sesuai dengan kepadatan piksel perangkat.
Ada banyak faktor yang perlu dipertimbangkan saat Anda menambahkan gambar ke situs, termasuk:
- Menyediakan ruang yang tepat untuk setiap gambar.
- Mencari tahu berapa banyak ukuran yang Anda butuhkan.
- Menentukan apakah gambar merupakan konten atau dekoratif.
Ada baiknya Anda meluangkan waktu untuk mendapatkan gambar yang benar. Strategi gambar yang buruk dapat menjengkelkan dan membuat pengguna Anda frustrasi. Strategi gambar yang baik membuat situs Anda terasa cepat dan tajam, terlepas dari perangkat atau koneksi jaringan pengguna.
Terdapat satu elemen HTML lagi di perangkat Anda untuk memberikan kontrol lebih besar atas
gambar: elemen picture
.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang gambar.
Gaya harus ditambahkan agar gambar pas dengan area pandang.
Jika tinggi dan lebar gambar dipaksa menjadi rasio aspek yang tidak wajar, gaya manakah yang dapat membantu menyesuaikan gambar agar sesuai dengan proporsi ini?
object-fit
contain
dan cover
.image-fit
fit-image
aspect-ratio
Menempatkan height
dan width
pada gambar Anda akan mencegah CSS dapat menata gayanya secara berbeda.
Atribut srcset
tidak _______ atribut src
, tetapi _______.
srcset
jelas tidak menggantikan atribut src
.alt
yang tidak ada pada gambar sama dengan alt
kosong.
alt
kosong memberi tahu pembaca layar bahwa gambar ini bersifat presentasional.alt
yang menandakan apa pun ke pembaca layar.