Gambar yang responsif

Teks di web otomatis diatur di tepi layar sehingga tidak meluap. 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 memberi Anda alat untuk mencegah hal ini terjadi.

Membatasi gambar Anda

Dalam lembar gaya, Anda dapat menggunakan max-inline-size untuk menyatakan bahwa gambar tidak boleh dirender dalam ukuran yang lebih lebar dari elemen yang memuatnya.

img {
  max-inline-size: 100%;
  block-size: auto;
}

Anda juga dapat menerapkan aturan yang sama ke jenis konten sematan lainnya, seperti video dan iframe.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

Dengan adanya aturan ini, browser akan otomatis memperkecil gambar agar sesuai dengan layar.

Menambahkan nilai block-size auto berarti browser mempertahankan rasio aspek gambar saat mengubah ukurannya.

Terkadang, dimensi gambar ditetapkan oleh sistem pengelolaan konten (CMS) atau sistem penayangan konten lainnya. Jika desain Anda memerlukan 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 memadatkan atau meregangkan gambar agar sesuai dengan ruang yang dimaksud.

Untuk mencegah pemadatan dan peregangan, gunakan properti object-fit.

Nilai object-fit sebesar contain memberi tahu browser untuk mempertahankan rasio aspek gambar, sehingga 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 sebesar 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;
}

Anda dapat mengubah posisi pangkasan gambar menggunakan properti object-position. Tindakan ini akan menyesuaikan fokus pangkasan, sehingga Anda dapat memastikan bagian 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;
}

Menyampaikan gambar Anda

Aturan CSS tersebut memberi tahu browser cara Anda ingin gambar dirender. Anda juga dapat memberikan petunjuk di HTML tentang cara browser harus menangani gambar tersebut.

Petunjuk untuk menentukan ukuran

Jika Anda mengetahui dimensi gambar, selalu sertakan atribut width dan height. Meskipun gambar dirender dalam ukuran yang berbeda karena aturan max-inline-size, browser tetap mengetahui rasio lebar terhadap tinggi dan dapat menyisihkan jumlah ruang yang tepat. Hal ini mencegah konten Anda yang lain 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 dalam atau di dekat area tampilan. Untuk gambar di bawah area yang terlihat, 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 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 otomatis menerapkan atribut loading="lazy", Anda biasanya dapat menetapkan loading ke nilai default eager untuk mencegah gambar dimuat 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 lebih memprioritaskan pemuatan menggunakan Fetch Priority dengan menyetel atribut fetchpriority ke high:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

Atribut ini memberi tahu browser untuk mengambil gambar dengan segera dan dengan prioritas tinggi, bukan menunggu hingga browser selesai melakukan tata letak dan akan mengambil gambar secara normal.

Namun, saat Anda meminta browser untuk memprioritaskan download satu resource, seperti gambar, browser harus membatalkan prioritas resource lain seperti skrip atau file font. Hanya tetapkan fetchpriority="high" pada gambar jika benar-benar penting.

Petunjuk untuk pramuat

Sebaiknya hindari pemuatan awal 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 belakang CSS.

Anda dapat menggunakan pra-pemuatan untuk membuat browser mengambil gambar penting ini lebih awal. Untuk gambar yang sangat penting, Anda dapat menggabungkan pra-pemuatan ini dengan atribut fetchpriority:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

Sekali lagi, gunakan atribut ini dengan hemat untuk menghindari penggantian heuristik prioritas browser terlalu sering. Penggunaan yang berlebihan dapat menyebabkan penurunan performa.

Beberapa browser mendukung pemuatan awal 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 dukungan srcset tetap memuat gambar yang benar.

Anda tidak dapat memuat gambar dalam format berbeda berdasarkan dukungan browser untuk format tertentu. Mencoba hal ini dapat menyebabkan download tambahan yang menghabiskan data pengguna.

Gambar responsif dengan srcset

Berkat deklarasi max-inline-size: 100% tersebut, gambar Anda tidak dapat keluar dari containernya. Namun, jika pengguna memiliki layar kecil dan jaringan bandwidth rendah, membuat mereka mendownload gambar berukuran sama dengan pengguna yang memiliki layar lebih besar akan membuang-buang data.

Untuk memperbaiki masalah ini, tambahkan beberapa versi gambar yang sama dalam ukuran 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 dengan beberapa metadata tentang gambar, yang disebut deskriptor.

Dalam contoh ini, metadata menjelaskan lebar setiap gambar menggunakan unit w. 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 menggantikannya. 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 deskriptor lebar, Anda juga harus menggunakan atribut sizes untuk memberikan informasi lebih lanjut kepada browser. Hal ini memberi tahu browser ukuran yang Anda harapkan untuk menampilkan gambar 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 tampilan dengan lebar lebih dari 66em, browser harus menampilkan gambar tidak lebih lebar dari sepertiga layar (misalnya, di dalam tata letak tiga kolom).

Untuk lebar area tampilan antara 44em dan 66em, tampilkan gambar dengan setengah lebar layar (seperti dalam tata letak dua kolom).

Untuk apa pun yang lebih sempit dari 44em, tampilkan gambar dengan lebar penuh layar.

Artinya, gambar terbesar tidak selalu 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 satu kolom pada layar yang lebih sempit.

Deskriptor kepadatan piksel

Anda juga dapat menggunakan deskriptor untuk menyediakan versi alternatif gambar yang akan ditampilkan di layar kepadatan tinggi, agar gambar tetap terlihat tajam pada resolusi yang lebih tinggi.

Gunakan deskriptor kepadatan untuk mendeskripsikan kepadatan piksel gambar dalam kaitannya dengan gambar dalam atribut src. Deskriptor kepadatan adalah angka diikuti dengan huruf x, seperti 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 600x400 piksel, maka medium-image.png dapat memiliki 2x setelahnya dalam daftar srcset.

Anda tidak harus menggunakan bilangan bulat. Jika versi lain gambar berukuran 450 x 300 piksel, Anda dapat mendeskripsikannya dengan 1.5x.

Gambar presentasi

Gambar dalam HTML adalah konten. Itulah sebabnya Anda menyertakan atribut alt dengan deskripsi gambar untuk pembaca layar dan mesin telusur.

Jika menyematkan gambar dekoratif tanpa konten yang berarti, 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 yang kosong memberi tahu pembaca layar bahwa gambar bersifat presentasional. Atribut alt yang tidak ada tidak memberikan informasi tersebut.

Idealnya, gambar presentasi atau dekoratif disertakan dengan CSS, bukan HTML. 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 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 memilih gambar yang paling sesuai untuk kepadatan piksel perangkat.

Ada banyak faktor yang perlu dipertimbangkan saat Anda menambahkan gambar ke situs, termasuk:

• Memesan ruang yang tepat untuk setiap gambar.
• Menentukan jumlah ukuran yang Anda butuhkan.
• Menentukan apakah gambar tersebut adalah konten atau dekorasi.

Sebaiknya luangkan waktu untuk memastikan gambar Anda sudah benar. Strategi gambar yang buruk dapat mengganggu dan membuat pengguna Anda frustrasi. Strategi gambar yang baik membuat situs Anda terasa cepat dan tajam, terlepas dari perangkat atau koneksi jaringan pengguna.

Ada satu lagi elemen HTML dalam toolkit Anda untuk memberi Anda lebih banyak kontrol atas gambar: elemen picture.

Uji pemahaman Anda

Uji pengetahuan Anda tentang gambar.