Lebar gambar yang responsif membantu browser memilih ukuran file, namun terkadang komposisinya sendiri harus berubah. Elemen gambar dapat menawarkan pemotongan potret ke layar sempit dan pemotongan lebar ke layar yang lebih besar.

<picture>
  <source media="(max-width: 40rem)" srcset="portrait-crop.webp" type="image/webp">
  <source srcset="wide-crop.webp" type="image/webp">
  <img src="wide-crop.jpg" alt="A gardener pruning a young tree" width="1200" height="800">
</picture>

Jaga agar fallback tetap selesai

  • Elemen img membawa teks alt dan tetap menjadi cadangan jika tidak ada sumber yang cocok.
  • Urutan sumber dari kondisi yang paling spesifik hingga pilihan umum.
  • Gunakan lebar dan tinggi yang sesuai dengan aset cadangan dan hindari perubahan tata letak yang tidak terduga.

Pilih tanaman yang melestarikan makna

Arahan seni lebih dari sekadar memperbesar. Pertahankan subjek dan konteks yang penting di setiap potongan, dan periksa apakah teks alternatif masih menjelaskan makna yang dibagikan.

Gunakan srcset dan ukuran ketika komposisi yang sama dapat dikirimkan pada resolusi berbeda; gunakan gambar ketika komposisi visual berubah.