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, sering disebut Resolution Switching.
Pada kedua pendekatan, Developer menentukan image yang mana yang akan digunakan pada saat development dengan menggunakan media query.
No More Image
Ini adalah cara paling mudah, dengan menggunakan css @media. Pada ukuran viewport kecil, kita hilangkan image dengan mengubah property background-image: none;
Sebelah kiri, image dihilangkan saat viewport kecil. Sebelah kanan, saat viewport cukup besar, image ditampilkan. (lihat gambar dibawah)
Versi live silakan click di conditional-background@codepen.io
<!DOCTYPE html>
<html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Conditional background image</title>
</head>
<body>
<div class="bgimg photo"></div>
<p>Text disederhanakan agar tidak memakan space</p>
<p>text goes here</p>
<p>text goes here</p>
</body>
</html>
body{
font-family: 'Roboto Condensed';
font-weight: 200;
margin: 5vw;
}
div.bgimg{
background-image: url("url image anda");
}
div.photo{
background-size: cover;
float: left;
margin: 0 2vw 1vw 0;
height: 50vw;
position: relative;
top: 3px;
transition: all 0.5s;
width: 50vw;
}
@media screen and (max-width: 500px) {
div.photo {
background-image: none;
height: 0;
margin: 0;
width: 0;
}
}
Resolution Switching
Mengganti dengan image yang lebih kecil pada viewport kecil merupakan cara yang lebih baik dari pada cara no more image. Karena selain tetap mempertahankan estetika, karena image lebih kecil, tidak akan memakan tempat terlalu banyak. Selain itu halaman website akan lebih cepat didownload.
Caranya pun sangat mudah, cukup memberikan link image yang lebih kecil pada saat viewport yang kita inginkan terpenuhi.
Versi live click di alternative-background@codepen.io (pada contoh di codepen, digunakan gambar yang berbeda agar terlihat jelas perbedaannya)
@media screen and (max-width: 400px) {
div {
background-image: url("url image lebih kecil");
}