Responsive Image

Seperti sudah dibahas berulang kali, tidak semua visitor memiliki spesifikasi display yang sama. Baik ukuran maupun resolusi dari display. Dahulu, pendekatan yang dilakukan adalah menggunakan 1 image yang besar untuk semua display. Pendekatan yang buruk, karena memboroskan bandwidth. Ada juga yang menggunakan pendekatan menggunakan komplek media query, javascript dan server side image selection, terdengar mengerikan … Read more

Fungsi CSS image-set () adalah cara agar browser memilih gambar yang sesuai dengan perangkat pengguna, terutama untuk layar kepadatan piksel tinggi. image-set () memungkinkan developer untuk memberikan opsi kepada browser daripada menentukan apa yang dibutuhkan setiap pengguna. Berikut contoh menggunakan syntax image-set. Penting juga memasukan background-image tanpa fungsi image-set. Tujuannya bila browser tidak support image-set, … Read more

Artikel dengan image sebagai ilustrasi atau sebagai penambah estetika sering kali tidak dapat dihindarkan. Namun image yang besar tentu akan sulit ditampilkan di small viewport. Strategi yang dapat diterapkan adalah menyembunyikan image pada viewport kecil , kita sebut saja strategi no more image untuk mudahnya. Atau strategi kedua adalah mengganti dengan image yang lebih kecil, … Read more

Bila Anda tidak yakin dengan ukuran viewport, menggunakan property background-size: cover adalah satu trick untuk mempermudah. Image akan ditampilkan tidak akan dipampatkan atau ditarik terhadap viewport. Pada viewport kecil, image yang besar akan ditampilkan sebagian saja. (gambar sebelah kiri) Pada viewport besar maka image akan ditampilkan utuh (gambar sebelah kanan) Ingin lihat versi live? Click … Read more