Art direction

Katie Hempenius

Perhatian: Satu atau beberapa demo di halaman ini tidak lagi berfungsi, karena Glitch telah mengakhiri hosting.

Untuk mengikuti codelab ini, buka Glitch ini di tab kedua.

Coba demo ini

• Untuk melihat pratinjau situs, tekan View App. Kemudian, tekan Fullscreen .
• Muat ulang aplikasi menggunakan ukuran browser yang berbeda. Perhatikan perbedaan gambar: gambar tidak hanya berbeda ukuran, tetapi juga berbeda pemangkasan dan rasio aspek.

Apa yang terjadi?

Pengarahan visual menampilkan gambar yang berbeda pada ukuran layar yang berbeda.

Gambar responsif memuat berbagai ukuran gambar yang sama. Pengarahan seni melangkah lebih jauh dan memuat gambar yang sama sekali berbeda, bergantung pada tampilan.

Gunakan arahan seni untuk meningkatkan presentasi visual. Misalnya, pemangkasan gambar yang berbeda dalam demo ini memastikan bahwa titik fokus (bunga) selalu ditampilkan secara mendetail, terlepas dari tampilannya. Manfaat pengarahan visual murni bersifat estetis; tidak memberikan manfaat performa dibandingkan gambar responsif.

Melihat kode

• Lihat index.html untuk melihat kode arahan seni untuk demo ini.

Cara kerja kode

Pengarahan gambar 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 (true). Jika tidak ada kueri media yang cocok, browser akan kembali memuat gambar yang ditentukan oleh <img>. .

- Berhati-hatilah saat mengurutkan tag sumber. Browser menggunakan tag <source> pertama dengan kueri media yang cocok, meskipun tag <source> berikutnya juga memiliki kueri media yang cocok. - Nilai atribut srcset adalah jalur file gambar. - Gunakan gambar yang berukuran sesuai. Hanya karena arahan seni digunakan untuk tujuan estetika, bukan berarti arahan seni tidak boleh berperforma baik juga.

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

- Tag <img> harus selalu disertakan, dan harus selalu dicantumkan terakhir, setelah semua tag <source>. - Resource yang ditentukan oleh tag <img> harus memiliki ukuran yang berfungsi di semua perangkat, sehingga dapat digunakan sebagai penggantian.