Latihan 1 dari materi Static & Dynamic Images di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya satu <img class="responsive-img" src="kamar-kebun-800.jpg" /> dan <style> yang masih kosong. Ini foto Kamar Kebun (800 × 450): dua kasur dan pintu kaca yang menghadap kebun sayur, letaknya jauh di bawah layar pertama. File fotonya gak ada di editor ini, jadi pratinjau cuma menampilkan ikon gambar rusak, lalu alt-mu begitu kamu menulisnya. Persis itu yang dilihat tamu kalau fotonya gagal dimuat. src dan class-nya biarkan.
<img>, tambahkan alt yang gak kosong dan menggambarkan isi fotonya, misalnya alt="Dua kasur dan pintu kaca yang menghadap kebun sayur".<img>, tambahkan loading="lazy", karena fotonya jauh di bawah.<style>, tulis .responsive-img { width: 100%; object-fit: cover; }.Kamu juga boleh menambah aspect-ratio: 16 / 9 di .responsive-img (rasio foto 800 × 450). Baris ini gak dinilai, tapi dia yang menyiapkan ruang sebelum fotonya datang.
