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 perbedaannya pada gambar: tidak hanya ukurannya yang berbeda, tetapi juga pemangkasan dan rasio aspek yang berbeda.

Apa yang terjadi?

Arah gambar menampilkan gambar yang berbeda pada ukuran tampilan yang berbeda.

Gambar responsif memuat berbagai ukuran gambar yang sama. Arah seni mengambil langkah ini lebih jauh dan memuat gambar yang sama sekali berbeda, bergantung pada tampilan.

Gunakan arah gambar untuk meningkatkan kualitas presentasi visual. Misalnya, pemangkasan gambar yang berbeda dalam demo ini memastikan lokasi menarik (bunga) selalu ditampilkan secara detail, terlepas dari tampilannya. Manfaat desain visual hanyalah estetika; tanpa memberikan manfaat performa dibandingkan gambar yang responsif.

Melihat kode

  • Lihat index.html untuk melihat kode arah gambar album untuk demo ini.

Cara kerja kode

Arah gambar menggunakan tag <picture>, <source>, dan <img>.

gambar

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 menampilkan nilai benar (true). Jika tidak ada kueri media yang cocok, browser akan melakukan fallback untuk memuat gambar yang ditentukan oleh <img>. pembuka.

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>.