Teks di web secara otomatis digabungkan di tepi layar sehingga tidak meluber. Hal ini berbeda dengan gambar. Gambar memiliki ukuran intrinsik. Jika gambar lebih lebar dari layar, gambar akan meluap, menyebabkan scrollbar horizontal muncul.
Untungnya, Anda dapat mengambil tindakan di CSS untuk menghentikan hal ini.
Membatasi gambar
Di stylesheet, Anda dapat mendeklarasikan bahwa gambar tidak boleh dirender dengan ukuran yang lebih lebar dari elemen penampungnya menggunakan max-inline-size
.
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 aturan tersebut, browser akan secara otomatis memperkecil gambar agar sesuai dengan layar.
Menambahkan nilai block-size
dari auto
berarti bahwa rasio aspek gambar akan tetap konstan.
Terkadang, dimensi gambar di luar kendali Anda—misalnya, jika gambar ditambahkan melalui sistem pengelolaan konten. Jika desain Anda meminta gambar agar memiliki rasio aspek yang berbeda dengan dimensi gambar sebenarnya, gunakan properti aspect-ratio
di CSS.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
Namun, browser mungkin akan menciutkan atau merentangkan gambar agar sesuai dengan rasio aspek yang Anda inginkan.
Untuk mencegah hal tersebut, gunakan properti object-fit
.
Nilai object-fit
dari contain
memberi tahu browser untuk mempertahankan rasio aspek gambar, meskipun jika itu berarti mengosongkan ruang di atas dan di bawah.
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, meskipun berarti memangkas gambar di bagian atas dan bawah.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
}
Jika pemangkasan di bagian atas dan bawah secara merata menjadi masalah, gunakan properti CSS posisi objek untuk menyesuaikan fokus pemangkasan.
Anda dapat memastikan konten gambar yang paling penting tetap terlihat.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
Mengirimkan gambar Anda
Aturan CSS tersebut memberi tahu browser tentang cara gambar dirender. Anda juga dapat memberikan petunjuk di HTML tentang cara browser menangani gambar tersebut.
Petunjuk ukuran
Jika mengetahui dimensi gambar, Anda harus menyertakan atribut width
dan height
. Meskipun gambar dirender dalam ukuran yang berbeda (karena aturan max-inline-size: 100%
), browser masih mengetahui rasio lebar terhadap tinggi dan dapat menyisihkan jumlah ruang yang tepat. Tindakan ini akan menghentikan konten Anda yang lain melompat-lompat saat gambar dimuat.
<img
src="image.png"
alt="A description of the image."
width="300"
height="200"
>
Memuat petunjuk
Gunakan atribut loading
untuk memberi tahu browser apakah harus menunda pemuatan gambar hingga gambar berada di dalam 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, loading
tidak boleh digunakan. Jika situs Anda secara otomatis menerapkan atribut loading="lazy"
, Anda sering kali dapat menetapkan atribut eager
(yang merupakan default) untuk mencegah hal ini diterapkan:
<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 Ambil Prioritas dengan menyetel atribut fetchpriority
ke high
:
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
fetchpriority="high"
>
Ini akan memerintahkan browser untuk segera mengambil gambar, dan dengan prioritas tinggi, bukannya menunggu hingga browser menyelesaikan layout ketika gambar biasanya diambil.
Namun ingat: saat Anda meminta browser memprioritaskan untuk mendownload satu resource—seperti gambar—browser harus tidak memprioritaskan resource lainnya seperti skrip atau file font. Hanya tetapkan fetchpriority="high"
pada gambar jika benar-benar penting.
Petunjuk pramuat
Beberapa gambar mungkin tidak tersedia di HTML awal—jika gambar tersebut ditambahkan oleh JavaScript, atau sebagai gambar latar di CSS. Anda juga dapat menggunakan pramuat untuk memungkinkan gambar penting ini diambil sebelumnya. Ini dapat digabungkan dengan atribut fetchpriority
untuk gambar yang sangat penting:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
Sekali lagi, hal ini harus digunakan dengan hemat untuk menghindari penggantian heuristik prioritas browser terlalu banyak, yang dapat mengakibatkan penurunan kinerja.
Melakukan pramuat gambar responsif berdasarkan srcset (yang dibahas di bawah) melalui atribut imagesrcset
dan imagesizes
lebih canggih dan didukung di beberapa browser, tetapi tidak semua:
Dengan mengecualikan penggantian href
, Anda dapat memastikan browser yang tidak mendukung hal ini tidak melakukan pramuat gambar yang salah.
Pramuat berdasarkan format gambar yang berbeda berdasarkan dukungan browser untuk gambar tersebut saat ini tidak didukung dan dapat menyebabkan download tambahan.
Idealnya, hindari melakukan pramuat jika memungkinkan, dan sediakan gambar di HTML awal, untuk menghindari pengulangan kode, dan untuk memungkinkan akses ke berbagai opsi yang didukung browser.
Dekode gambar
Ada juga atribut decoding
yang dapat Anda tambahkan ke elemen img
. Anda dapat memberi tahu browser bahwa gambar dapat didekode secara asinkron. Kemudian, browser dapat memprioritaskan pemrosesan konten lain.
<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 konten yang paling penting untuk diprioritaskan.
<img
src="hero.jpg"
alt="A description of the image."
width="1200"
height="800"
loading="eager"
decoding="sync"
>
Atribut decoding
tidak akan mengubah kecepatan dekode gambar, tetapi hanya apakah browser menunggu dekode gambar ini terjadi sebelum merender konten lainnya.
Umumnya, hal ini hanya akan berdampak kecil, tetapi dalam skenario tertentu, hal ini dapat membuat gambar atau konten ditampilkan sedikit lebih cepat. Misalnya, untuk dokumen besar dengan banyak elemen yang memerlukan waktu untuk dirender, dan dengan gambar besar yang memerlukan waktu untuk didekode, menyetel sync
pada gambar penting akan memberi tahu browser untuk menunggu gambar dan merender keduanya sekaligus. Atau, menyetel async
dapat memungkinkan konten ditampilkan lebih cepat tanpa menunggu dekode gambar.
Namun, opsi yang lebih baik biasanya adalah mencoba menghindari ukuran DOM yang berlebihan dan memastikan gambar responsif digunakan untuk mengurangi waktu dekode, yang berarti atribut decoding akan memiliki pengaruh yang kecil.
Gambar responsif dengan srcset
Berkat deklarasi max-inline-size: 100%
tersebut, gambar Anda tidak akan pernah keluar dari penampungnya. Tetapi sekalipun terlihat bagus jika memiliki gambar besar yang mengecil agar pas, itu tidak akan terasa baik. Jika seseorang menggunakan perangkat layar kecil pada jaringan bandwidth rendah, dia akan mendownload gambar berukuran besar yang tidak perlu.
Jika Anda membuat beberapa versi gambar yang sama dengan ukuran berbeda, Anda dapat memberi tahu browser tentang gambar tersebut menggunakan atribut srcset
.
Deskripsi lebar
Anda dapat meneruskan daftar nilai yang dipisahkan dengan koma. Setiap nilai harus berupa URL gambar yang diikuti dengan spasi yang diikuti dengan beberapa metadata tentang gambar tersebut. Metadata ini disebut deskriptor.
Dalam contoh ini, metadata menjelaskan lebar setiap gambar menggunakan unit w
. Satu w
adalah 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
tidak menggantikan atribut src
. Sebagai gantinya, atribut srcset
melengkapi atribut src
. Anda tetap harus memiliki atribut src
yang valid, tetapi kini browser dapat mengganti nilainya dengan salah satu opsi yang tercantum dalam atribut srcset
.
Browser tidak akan mendownload gambar yang lebih besar kecuali jika diperlukan. Cara ini menghemat {i>bandwidth<i}.
Ukuran
Jika menggunakan deskripsi lebar, Anda juga harus menggunakan atribut sizes
untuk memberikan informasi lebih lanjut ke browser. Ini memberi tahu browser ukuran gambar yang akan ditampilkan dalam kondisi yang berbeda. Kondisi tersebut ditentukan dalam kueri media.
Atribut sizes
menggunakan 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 atas lebar area pandang 66em
untuk menampilkan gambar 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 (tata letak dua kolom).
Untuk layar di bawah 44em
, tampilkan gambar dalam lebar penuh layar.
Ini berarti bahwa gambar yang paling besar belum tentu digunakan untuk layar terluas. Jendela browser lebar yang dapat menampilkan tata letak multi-kolom akan menggunakan gambar yang pas dalam satu kolom. Gambar tersebut mungkin lebih kecil daripada gambar yang digunakan untuk tata letak kolom tunggal pada layar yang lebih sempit.
Deskriptor kepadatan piksel
Ada situasi lain di mana Anda mungkin ingin memberikan beberapa versi gambar yang sama.
Beberapa perangkat memiliki layar dengan kepadatan tinggi. Pada layar berkepadatan ganda, Anda dapat mengemas informasi senilai dua piksel ke dalam ruang satu piksel. Hal ini membuat gambar tampak tajam pada jenis layar tersebut.
Gunakan deskriptor kepadatan untuk menjelaskan kepadatan piksel gambar dalam kaitannya dengan gambar di atribut src
. Deskripsi kepadatan adalah angka yang diikuti dengan huruf x: 1x
, 2x
, dll.
<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 600x400 piksel, medium-image.png
dapat memiliki 2x
setelahnya di 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 selalu memberikan atribut alt
dengan deskripsi gambar untuk pembaca layar dan mesin telusur.
Jika Anda menyematkan gambar yang hanya merupakan pengembangan visual tanpa konten yang bermakna, gunakan atribut alt
kosong.
<img
src="flourish.png"
alt=""
width="400"
height="50"
>
Anda tetap harus menyertakan atribut alt
. Atribut alt
yang tidak ada tidak sama dengan atribut alt
kosong. Atribut alt
kosong memberi tahu pembaca layar bahwa gambar ini presentasi.
Idealnya, gambar presentasi atau dekoratif tidak boleh ada di HTML sama sekali. HTML adalah untuk struktur. CSS adalah 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. Berikan 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 akan memilih gambar yang paling sesuai untuk kepadatan piksel perangkat.
Ada banyak faktor yang perlu dipertimbangkan saat Anda menambahkan gambar ke situs:
Mencadangkan ruang yang tepat untuk setiap gambar. Mencari tahu berapa banyak ukuran yang Anda butuhkan. Memutuskan apakah gambar bersifat konten atau dekoratif.
Tidak ada salahnya untuk meluangkan waktu untuk mendapatkan gambar yang benar. Strategi gambar yang buruk bertanggung jawab atas frustrasi dan gangguan bagi pengguna. Strategi gambar yang baik membuat situs Anda terasa tajam dan tajam, terlepas dari perangkat atau koneksi jaringan pengguna.
Ada satu elemen HTML lagi di toolkit untuk membantu Anda lebih mengontrol gambar: elemen picture
.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang gambar
Gaya harus ditambahkan agar gambar pas dalam area pandang.
Jika tinggi dan lebar gambar diubah menjadi rasio aspek yang tidak wajar, gaya apa yang dapat membantu menyesuaikan ukuran gambar dengan proporsinya?
object-fit
contain
dan cover
.image-fit
fit-image
aspect-ratio
Menempatkan height
dan width
pada gambar akan mencegah CSS mengubah gayanya.
Atribut srcset
bukan _______ atribut src
, atribut _______ itu.
srcset
jelas tidak menggantikan atribut src
.alt
yang tidak ada pada gambar sama dengan alt
yang kosong.
alt
kosong memberi tahu pembaca layar bahwa gambar ini presentasionalalt
yang tidak ada menunjukkan apa pun kepada pembaca layar.