Latihan 1: Optimasi Gambar — Performance

Latihan 1 dari materi Optimasi Gambar di Performance — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Bikin satu foto yang sudah dioptimasi. Bayangkan fotonya ada di tengah artikel, di bawah layar pertama.

Tulis satu tag <img> dengan src ke file fotonya, misalnya src="photo.jpg" (nama filenya bebas, gak dinilai).
Tambahkan width="800" dan height="600", angka saja tanpa px, supaya browser menyisakan tempat dan gak ada layout shift.
Tambahkan loading="lazy", karena fotonya ada di bawah layar pertama.
Tambahkan alt yang menjelaskan isi fotonya, misalnya alt="Pemandangan gunung saat matahari terbit". Jangan dikosongkan.

Kode awal cuma berisi satu komentar, boleh dihapus atau dibiarkan.

Hint

Foto yang optimal memberi tahu browser ukurannya sebelum filenya datang, ditunda kalau letaknya di bawah layar pertama, dan punya teks pengganti.
Cukup satu tag <img> dengan lima atribut: src, width="800", height="600", loading="lazy", dan alt yang ada isinya.
<img src="photo.jpg" width="800" height="600" loading="lazy" alt="Pemandangan gunung saat matahari terbit">

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Optimasi Gambar — Performance

Hint

Memperbarui Aplikasi