Latihan 1: Responsive Images — Performance

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

Bikin gambar sampul yang memakai format paling hemat yang didukung browser, dengan <picture>.

Tulis <picture> dan tutup dengan </picture>.
Di dalamnya, source pertama: <source srcset="hero.avif" type="image/avif">.
Source kedua: <source srcset="hero.webp" type="image/webp">.
Terakhir, cadangannya: <img> dengan src="hero.jpg" dan alt yang menjelaskan gambarnya, misalnya alt="Hero image".

Yang dinilai: ada <picture>, minimal 2 <source> yang masing-masing punya srcset, source pertama ber-type="image/avif", source kedua ber-type="image/webp", dan <img> di dalam <picture> dengan src="hero.jpg" dan alt yang gak kosong. Urutannya penting: AVIF paling atas. Kode awal cuma berisi satu komentar, boleh dihapus.

Hint

Elemen <picture> membiarkan browser memilih satu file dari beberapa pilihan. Di sini yang dipilih formatnya, jadi tiap <source> menyebut tipe filenya lewat atribut type.
Urutan dari atas: <source> AVIF, <source> WebP, lalu <img> JPEG sebagai cadangan. Tiap <source> butuh srcset dan type, dan <img> ditaruh paling akhir.
<picture><source srcset="hero.avif" type="image/avif"><source srcset="hero.webp" type="image/webp"><img src="hero.jpg" alt="Hero image"></picture>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Responsive Images — Performance

Hint

Memperbarui Aplikasi