Arah seni

Katie Hempenius
Katie Hempenius
X

Coba demo ini

  • Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh 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.html guna 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>.