Coba demo ini
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan
Layar penuh
. - Muat ulang aplikasi menggunakan ukuran browser yang berbeda. Perhatikan betapa berbedanya gambar adalah: mereka tidak hanya memiliki ukuran yang berbeda, tetapi juga pemangkasan yang berbeda dan rasio aspek.
Apa yang terjadi?
Arah seni menampilkan gambar yang berbeda pada ukuran tampilan yang berbeda.
Gambar responsif memuat berbagai ukuran dari gambar yang sama. Pengambilan gambar seni ini selangkah lebih maju dan memuat gambar yang benar-benar berbeda tergantung pada tampilan.
Menggunakan pengarahan seni untuk meningkatkan presentasi visual. Misalnya, berbagai pemangkasan gambar dalam demo ini memastikan bahwa lokasi menarik (bunga) akan selalu ditampilkan secara detail, apa pun tampilannya. Manfaat arah seni adalah hanya estetika; tidak memberikan manfaat performa dibandingkan gambar responsif.
Melihat kode
- Lihat
index.htmlguna mengetahui kode petunjuk arah seni untuk demo ini.
Cara kerja kode
Pengarahan seni menggunakan
<picture>,
<source>,
dan <img>.
foto
Tag <picture> menyediakan wrapper untuk nol atau beberapa tag <source> dan satu tag <image>.
sumber
Tag <source> menentukan resource media.
Browser menggunakan tag <source> pertama dengan kueri media
yang menghasilkan nilai benar (true). Jika tidak ada kueri media yang cocok,
browser akan kembali memuat gambar yang ditentukan oleh <img>.
.
img
Tag <img> membuat kode ini berfungsi di browser yang tidak
mendukung tag <picture>.
Jika browser tidak mendukung tag <picture>, browser akan memuat
gambar yang ditentukan oleh tag <img>.