Art direction

Katie Hempenius
Katie Hempenius
X

Coba demo ini

  • Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Kemudian tekan Layar Penuh layar penuh.
  • Muat ulang aplikasi menggunakan ukuran browser yang berbeda. Perhatikan perbedaan gambar tersebut: gambar tidak hanya memiliki ukuran yang berbeda, tetapi juga pemangkasan dan rasio aspek yang berbeda.

Apa yang terjadi?

Art direction menampilkan gambar yang berbeda pada berbagai ukuran tampilan.

Gambar responsif memuat berbagai ukuran gambar yang sama. Art direction mengambil langkah lebih jauh dan memuat gambar yang sama sekali berbeda, bergantung pada layar.

Gunakan arah seni untuk meningkatkan kualitas presentasi visual. Misalnya, pemangkasan gambar yang berbeda-beda dalam demo ini memastikan bahwa lokasi menarik (bunga) selalu ditampilkan secara mendetail, terlepas dari tampilannya. Manfaat dari arah seni hanya bersifat estetika; tidak memberikan manfaat performa dibandingkan gambar responsif.

Melihat kode

  • Lihat index.html untuk melihat kode panduan visual untuk demo ini.

Cara kerja kode

Art direction menggunakan tag <picture>, <source>, dan <img>.

picture

Tag <picture> menyediakan wrapper untuk nol atau beberapa tag <source> dan satu tag <image>.

source

Tag <source> menentukan resource media.

Browser menggunakan tag <source> pertama dengan kueri media yang menampilkan nilai benar. 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 tidak mendukung tag <picture>, browser akan memuat gambar yang ditentukan oleh tag <img>.