Responsive Image – Kesimpulan

Hindari Image Abuse

Hindari penggunaan image yang berlebihan, jika dapat menggunakan glyph atau css trick, selalu gunakan opsi tersebut.

Karena glyph berasal dari font, dimana ukuran file kecil dan secara resolusi juga responsive, dapat diperbesar dan diperkecil tanpa merusak. Lihat lesson Web fonts dan glyphs

Jika memungkinkan, gunakan format SVG, karena selain kecil ukurannya, scalable tanpa merusak kualitas gambar. Lihat lesson Menggunakan SVG

Resolution switching dan Art Direction

Pendekatan responsive image dapat dilakukan dengan menampilkan image yang sama dengan resolusi yang berbeda, umum disebut resolution switching.

Pendekatan ini dapat dilihat pada lesson Conditional Background.

Pendekatan lainnya adalah Art Direction. Pendekatannya adalah mengganti image yang berbeda secara cropping.

Pada viewport besar, tentu tidak masalah menampilkan full width image, karena point of interest dari image tetap terlihat jelas.

Namun pada viewport kecil, menampilkan image fullwidth dengan resolusi kecil, membuat point of interest tidak kelihatan, disinilah Art Direction dibutuhkan. Image yang ditampilkan adalah bukan full width, tetapi crop dimana point of interest dapat ditampilkan jelas pada viewport kecil.

Contoh pendekatan ini dapat dilihat pada lesson Menggunakan Picture Element

Web design lebih bersifat seni, bukan science, dimana pendekatan yang berbeda dapat dilakukan namum menghasilkan hasil yang sama.

Sharing is caring: