Teks di web secara otomatis digabungkan di tepi layar agar tidak meluap. Di sisi lain, gambar memiliki ukuran intrinsik. Jika gambar lebih lebar dari layar, gambar akan tambahan dan pengguna harus men-scroll secara horizontal untuk melihat semuanya.
Untungnya, CSS memberi Anda alat untuk mencegah hal ini terjadi.
Membatasi gambar
Di lembar gaya, Anda dapat menggunakan max-inline-size
untuk mendeklarasikan bahwa gambar tidak akan pernah dapat dirender dengan ukuran yang lebih lebar dari
elemen yang menampungnya.
img {
max-inline-size: 100%;
block-size: auto;
}
Anda juga dapat menerapkan aturan yang sama pada jenis konten sematan lainnya, seperti video dan iframe.
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
Dengan menerapkan aturan ini, browser akan otomatis memperkecil skala gambar agar sesuai dengan layar.
![Dua screenshot; yang pertama menampilkan gambar yang meluas melewati lebar browser; yang kedua menampilkan gambar yang sama dengan dibatasi dalam area pandang browser.](https://web.dev/static/learn/design/responsive-images/image/two-screenshots-first-s-fbd980b13ed58.png?authuser=6&hl=id)
Menambahkan nilai block-size
dari auto
berarti browser akan mempertahankan rasio aspek gambar Anda saat
ukurannya diubah.
Terkadang, dimensi gambar ditetapkan oleh sistem pengelolaan konten (CMS) atau
sistem pengiriman konten lainnya. Jika desain Anda membutuhkan rasio aspek yang berbeda
dari default CMS, Anda dapat menggunakan properti
aspect-ratio
untuk mempertahankan desain situs Anda:
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
Sayangnya, hal ini sering kali berarti browser harus memampatkan atau melebarkan gambar agar sesuai dengan ruang yang diinginkan.
![Sisi samping tampan yang tampak bahagia dengan mulutnya seperti bola, tetapi gambar itu gepeng.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-6886fa1061908.jpg?authuser=6&hl=id)
Untuk mencegah pengencangan dan peregangan, gunakan
properti object-fit
.
Nilai object-fit
dari contain
memberi tahu browser untuk mempertahankan rasio aspek
gambar, sehingga memberikan 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
dari cover
memberi tahu browser untuk mempertahankan rasio aspek
gambar, memangkas gambar jika diperlukan.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
![Gambar tampan yang tampak bahagia dengan mulutnya sedang menggigit bola; ada ruang ekstra di kedua sisi gambar.](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-19f229b25e797.jpg?authuser=6&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=6&hl=id)
Anda dapat mengubah posisi pemangkasan gambar menggunakan properti object-position. Tindakan ini akan menyesuaikan fokus pemangkasan, sehingga Anda dapat memastikan bagian terpenting 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=6&hl=id)
object-position
untuk memangkas
satu sisi saja gambar Anda.Mengirimkan gambar
Aturan CSS tersebut memberi tahu browser bagaimana Anda ingin gambar dirender. Anda juga dapat memberikan petunjuk di HTML tentang cara browser menangani gambar tersebut.
Petunjuk ukuran
Jika Anda mengetahui dimensi gambar, selalu sertakan atribut width
dan
height
. Meskipun gambar dirender dengan ukuran yang berbeda karena
aturan max-inline-size
Anda, browser masih mengetahui rasio lebar tinggi dan
dapat menyisihkan jumlah ruang yang tepat. Hal ini akan mencegah konten Anda yang lain
agar tidak berpindah-pindah saat 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 atau dekat area pandang. Untuk gambar di paruh bawah, gunakan nilai
lazy
. Browser tidak akan memuat gambar lambat hingga pengguna men-scroll cukup jauh
ke bawah sehingga gambar akan terlihat. Jika pengguna tidak pernah
men-scroll, gambar tidak akan 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 otomatis menerapkan atribut loading="lazy"
, biasanya Anda 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"
>
Prioritas Pengambilan
Untuk gambar penting seperti gambar LCP, Anda dapat
memprioritaskan pemuatan lebih lanjut menggunakan Prioritas Pengambilan, dengan
menyetel atribut fetchpriority
ke high
:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
fetchpriority="high"
>
Hal ini akan memberi tahu browser untuk langsung mengambil gambar dan dengan prioritas tinggi, bukan menunggu hingga browser menyelesaikan tata letaknya dan akan mengambil gambar secara normal.
Namun, saat Anda meminta browser untuk memprioritaskan download satu resource, seperti
gambar, browser harus memprioritaskan resource lainnya seperti skrip atau
file font. Hanya tetapkan fetchpriority="high"
pada gambar jika benar-benar penting.
Petunjuk untuk pramuat
Sebaiknya hindari pramuat jika memungkinkan dengan menyertakan semua gambar dalam file HTML awal. Namun, beberapa gambar mungkin tidak tersedia, seperti gambar yang ditambahkan oleh JavaScript atau gambar latar CSS.
Anda dapat menggunakan pramuat agar browser dapat mengambil gambar penting ini terlebih
dahulu. 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 seperlunya agar tidak terlalu sering mengganti heuristik prioritas browser. Menggunakannya secara berlebihan dapat menyebabkan penurunan performa.
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 bahwa browser tanpa dukungan srcset
masih melakukan pramuat gambar yang benar.
Anda tidak dapat melakukan pramuat gambar dalam format yang berbeda berdasarkan dukungan browser untuk format tertentu. Jika dilakukan, hal ini dapat mengakibatkan download tambahan yang memboroskan data pengguna.
Dekode gambar
Ada juga atribut decoding
yang dapat Anda tambahkan ke elemen img
. Anda dapat memberi tahu
browser bahwa gambar dapat didekode secara asinkron, sehingga dapat memprioritaskan
pemrosesan 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 merupakan bagian konten
paling penting yang harus 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. Perubahan ini
hanya memengaruhi apakah browser menunggu decoding gambar ini terjadi sebelum
merender konten lain.
Umumnya, hal ini tidak berdampak banyak, tetapi terkadang dapat memungkinkan
browser menampilkan gambar atau konten lainnya dengan sedikit lebih cepat. Misalnya, untuk dokumen berukuran besar dengan banyak elemen yang memerlukan waktu untuk dirender, dan dengan gambar berukuran besar yang memerlukan waktu lama untuk didekode, menyetel sync
pada gambar penting akan memberi tahu browser untuk menunggu gambar dan merender keduanya sekaligus. Atau,
Anda dapat menetapkan async
agar browser menampilkan konten dengan lebih cepat dan tanpa
menunggu gambar didekode.
Namun, opsi yang lebih baik biasanya adalah mencoba
menghindari 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
dari penampungnya. Namun, jika pengguna memiliki layar yang kecil dan jaringan
bandwidth rendah, membuat mereka mendownload gambar berukuran sama dengan pengguna dengan layar yang lebih besar
akan memboroskan data.
Untuk memperbaiki masalah ini, tambahkan beberapa versi gambar yang sama dengan ukuran yang berbeda,
dan gunakan atribut srcset
untuk memberi tahu browser bahwa ukuran ini ada dan kapan harus menggunakannya.
Deskripsi lebar
Anda dapat menentukan srcset
menggunakan daftar nilai yang dipisahkan koma. Setiap nilai adalah
URL gambar, diikuti dengan spasi, diikuti oleh beberapa metadata tentang
gambar, yang disebut deskriptor.
Dalam contoh ini, metadata menjelaskan lebar setiap gambar menggunakan unit
w
. Satu w
sama dengan 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 mengganti nilainya dengan salah satu opsi yang tercantum dalam srcset
. Untuk menghemat bandwidth, browser hanya mendownload gambar yang lebih besar jika diperlukan.
Ukuran
Jika menggunakan deskripsi lebar, Anda juga harus menggunakan
atribut sizes
untuk memberikan informasi lebih lanjut ke browser. Atribut ini memberi tahu browser tentang ukuran
gambar yang akan ditampilkan dalam berbagai kondisi. Kondisi
tersebut ditentukan dalam kueri media.
Atribut sizes
mengambil daftar kueri media dan lebar
gambar yang dipisahkan koma.
<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 di area pandang dengan lebar di atas
66em
, gambar harus ditampilkan tidak lebih lebar dari sepertiga layar
(misalnya di dalam tata letak tiga kolom).
Untuk lebar area pandang antara 44em
dan 66em
, tampilkan gambar dengan lebar
setengah layar (seperti dalam tata letak dua kolom).
Untuk ukuran yang lebih sempit dari 44em
, tampilkan gambar dengan lebar penuh
layar.
Artinya, gambar terbesar belum tentu digunakan untuk layar terlebar. Jendela browser lebar yang dapat menampilkan tata letak multi-kolom menggunakan gambar yang sesuai dalam satu kolom, yang mungkin lebih kecil daripada gambar yang digunakan untuk tata letak kolom tunggal pada layar yang lebih sempit.
Deskriptor kepadatan piksel
Anda juga dapat menggunakan deskriptor untuk menyediakan versi alternatif gambar yang akan ditampilkan di layar berkepadatan tinggi, agar gambar terlihat tajam pada resolusi yang lebih tinggi yang diberikan.
![Dua versi gambar yang sama yaitu gambar tampan yang tampak bahagia dengan mulutnya seperti bola, satu gambar terlihat tajam dan gambar lainnya terlihat kabur.](https://web.dev/static/learn/design/responsive-images/image/two-versions-the-same-im-f13b154ee2cc8.png?authuser=6&hl=id)
Gunakan deskripsi kepadatan untuk menjelaskan kepadatan piksel gambar yang
terkait dengan gambar dalam atribut src
. Deskripsi kepadatan adalah angka
diikuti dengan huruf x, seperti pada 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 300 x 200 piksel, dan medium-image.png
berukuran
600 x 400 piksel, medium-image.png
dapat memiliki 2x
setelahnya dalam
daftar srcset
.
Anda tidak harus menggunakan bilangan bulat. Jika versi gambar lain berukuran 450 x 300 piksel, Anda dapat mendeskripsikannya dengan 1.5x
.
Gambar presentasi
Gambar di HTML adalah konten. Itulah sebabnya Anda menyertakan atribut alt
dengan deskripsi gambar untuk pembaca layar dan mesin telusur.
Jika menyematkan gambar yang bersifat dekoratif, tanpa konten yang bermakna, 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 tersebut
presentasi. Atribut alt
yang tidak ada tidak menyediakan informasi tersebut.
Idealnya, gambar presentasi atau dekoratif disertakan dengan CSS, bukan HTML. HTML untuk struktur. CSS 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 fungsi image-set
untuk background-image
.
Fungsi image-set
di CSS berfungsi sangat mirip dengan atribut srcset
di HTML.
Sediakan daftar gambar dengan deskriptor kepadatan piksel untuk masing-masing gambar.
element {
background-image: image-set(
small-image.png 1x,
medium-image.png 2x,
large-image.png 3x
);
}
Browser memilih gambar yang paling sesuai untuk kepadatan piksel perangkat.
Ada banyak faktor yang perlu dipertimbangkan saat Anda menambahkan gambar ke situs, antara lain:
- Mencadangkan ruang yang tepat untuk setiap gambar.
- Mencari tahu berapa banyak ukuran yang Anda butuhkan.
- Menentukan apakah gambar bersifat konten atau dekoratif.
Sebaiknya luangkan waktu untuk membuat gambar yang tepat. Strategi gambar yang buruk dapat mengganggu dan membuat pengguna frustrasi. Strategi gambar yang baik membuat situs Anda terasa cepat dan tajam, terlepas dari perangkat atau koneksi jaringan pengguna.
Ada satu elemen HTML lagi di toolkit yang memberi Anda kontrol lebih atas
gambar: elemen picture
.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang gambar.
Gaya harus ditambahkan agar gambar sesuai dengan area pandang.
Ketika tinggi dan lebar gambar dipaksa masuk ke rasio aspek yang tidak wajar, gaya manakah yang dapat membantu menyesuaikan bagaimana gambar masuk ke dalam proporsi ini?
object-fit
contain
dan cover
.image-fit
fit-image
aspect-ratio
Menempatkan height
dan width
pada gambar akan mencegah CSS dapat menata gayanya secara berbeda.
Atribut srcset
tidak _______ atribut src
, tetapi _______ atribut tersebut.
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 presentasi.alt
yang tidak ada menunjukkan apa pun kepada pembaca layar.