Gambar yang responsif

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.

Dukungan Browser

  • 57
  • 79
  • 41
  • 12.1

Sumber

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.

Dua screenshot; yang pertama menampilkan gambar yang diperluas melebihi lebar browser; yang kedua menampilkan gambar yang sama yang dibatasi dalam area pandang browser.

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.

Gambar profil tampan yang bahagia dengan mulutnya yang berbentuk bola, tetapi gambar tersebut terjepit.

Untuk mencegah hal tersebut, gunakan properti object-fit.

Dukungan Browser

  • 32
  • 79
  • 36
  • 10

Sumber

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;
}
Gambar tampan yang bahagia dengan mulutnya yang berbentuk bola; ada ruang ekstra di kedua sisi gambar. Gambar tampan yang bahagia dengan mulutnya yang berbentuk bola; bagian atas dan bawah gambar telah dipangkas.
Gambar yang sama dengan dua nilai berbeda untuk `object-fit` diterapkan. Yang pertama memiliki nilai `object-fit` dari `contain`. Yang kedua memiliki nilai `object-fit` `cover`.

Jika pemangkasan di bagian atas dan bawah secara merata menjadi masalah, gunakan properti CSS posisi objek untuk menyesuaikan fokus pemangkasan.

Dukungan Browser

  • 32
  • 79
  • 36
  • 10

Sumber

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;
}

Gambar profil tampan yang bahagia dengan mulutnya yang berbentuk bola; gambar hanya dipangkas di bagian bawah.

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"
>
Video pertama menampilkan tata letak tanpa dimensi gambar yang ditentukan. Perhatikan bagaimana teks melompat setelah gambar dimuat. Pada video kedua, dimensi gambar telah disediakan; ruang dibiarkan untuk gambar sehingga setelah dimuat, teks tidak akan berpindah-pindah.

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.

Dua versi gambar yang sama menunjukkan tampan yang bahagia dengan mulutnya, satu gambar terlihat jelas, dan yang satunya lagi terlihat tidak jelas.

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.

Benar
Gambar tanpa {i>containment<i} akan sebesar ukuran aslinya.
Salah
Gaya diperlukan.

Jika tinggi dan lebar gambar diubah menjadi rasio aspek yang tidak wajar, gaya apa yang dapat membantu menyesuaikan ukuran gambar dengan proporsinya?

object-fit
Tentukan kecocokan gambar dengan kata kunci seperti contain dan cover.
image-fit
Properti ini tidak ada, saya hanya mengarangnya.
fit-image
Properti ini tidak ada, saya hanya mengarangnya.
aspect-ratio
Hal ini dapat menyebabkan atau mengatasi rasio gambar yang tidak wajar.

Menempatkan height dan width pada gambar akan mencegah CSS mengubah gayanya.

Benar
Anggap saja mereka lebih seperti petunjuk daripada aturan.
Salah
CSS memiliki banyak opsi dinamis untuk mengubah ukuran gambar, meskipun tinggi dan lebarnya sejajar pada tag.

Atribut srcset bukan _______ atribut src, atribut _______ itu.

melengkapi, mengganti
srcset jelas tidak menggantikan atribut src.
{i> replace<i}, melengkapi
Ini memberikan opsi tambahan bagi browser untuk dipilih, jika memungkinkan.

alt yang tidak ada pada gambar sama dengan alt yang kosong.

Benar
Atribut alt kosong memberi tahu pembaca layar bahwa gambar ini presentasional
Salah
alt yang tidak ada menunjukkan apa pun kepada pembaca layar.