Gambar adalah salah satu elemen paling penting pada halaman web dalam hal pengalaman pengguna. Beberapa objek pada halaman memiliki dampak yang sama di mulai dari respons emosional untuk membangkitkan rate.

Ketika pengguna melihat situs Anda pada perangkat mobile, layar kecil, atau dalam situasi yang tidak biasa lainnya gambar dapat mendistorsi halaman dan merusak desain situs-hati Anda. Itu sebabnya desain responsif sedang dikembangkan.

Dalam posting ini kita akan mengkaji penggunaan gambar dalam desain responsif.

Tantangan dari penggunaan Gambar Pada Responsif (& Mobile) Desain

Desain Responsif memiliki suatu bidang pembicaraan di  industri web. Memang demikian – itu perkembangan yang paling penting dalam desain web selama bertahun-tahun. Untuk pertama kalinya, perangkat dari segala bentuk dan ukuran akan memiliki kesempatan untuk mengalami Internet kaya indah dan fitur. Bagi mereka yang tidak dalam lingkaran, desain responsif membangun situs untuk beradaptasi dengan area tampilan (jendela browser) tersedia bagi mereka. Sementara ini adalah kesempatan besar untuk membuat Internet lebih baik, itu tidak berarti keuntungan yang tanpa tantangan. Salah satu yang paling menarik menjadi penanganan gambar. Mari kita meneliti beberapa teknik dasar bersama dengan masalah yang mereka berpose.

Sebuah Fit Sederhana

Seting gambar sehingga lebar tidak pernah bisa lebih besar dari elemen kontainer adalah salah satu cara mudah untuk memungkinkan gambar untuk menyesuaikan dengan ukuran halaman secara otomatis. Seperti kolom dipaparkan dalam menyusut, misalnya, hanya akan menurunkan skala untuk mencocokkan. Anda bahkan dapat memasukkan video dan objek lainnya dengan cara yang sama.

img, object {
max-width: 100%;
}

<div></div>
Ini akan terlihat bagus jika Anda menggunakan browser modern di Linux atau Mac. Jika Anda pada versi lama dari Windows atau keluar dari browser tanggal Anda akan melihat beberapa masalah termasuk gambar tidak scaling dan tampak sangat mengerikan sebagai menyusut jendela browser. Ini bukan masalah besar. Desain solusi bukan responsif ditujukan untuk orang dengan layar besar membuat sempurna jendela mereka benar-benar kecil tanpa alasan yang jelas (meskipun idealnya harus memecahkan masalah yang secara alami) dan solusi ini akan muncul dengan baik pada browser modern dan perangkat mobile.

Jadinya Terlalu Besar!?

Masalah lain dengan solusi di atas adalah bahwa gambar ukuran file yang terlalu besar untuk perangkat mobile pada koneksi data mobile. Sebuah gambar lebar 1.500 piksel mungkin terlihat bagus di monitor lebar, tetapi file itu sangat tidak lebih dari ukuran untuk pengguna pada koneksi 3G pertengahan kecepatan mencoba untuk melihat situs Anda dari kereta. Ingat, solusi ini hanya memecahkan masalah tampilan gambar, tidak ukuran file.

Masih ada solusi elegan untuk pemula, namun Smashing Magazine tidak melakukan posting dengan beberapa tool dan tips untuk mencapai beberapa beban kali lebih baik dengan memuat gambar yang benar untuk ukuran perangkat. Ini perlu dicatat bahwa bahkan solusi ini hasil dalam kedua file yang didownload pada browser lama tertentu sehingga sementara penampilan degradasi baik itu tidak akan menjadi solusi jangka panjang yang ideal untuk masalah ini.

Bayangkan layout di sebelah kiri (1) dengan satu gambar besar jelas mendominasi dua lainnya. Seperti yang kita mengecilkan area tampilan kami, desainer telah memilih untuk pindah ke layout satu kolom (2) dan memastikan gambar diatur untuk tidak pernah melampaui 100% dari lebar kolom sehingga tata letak di sebelah kanan.

Anda dapat melihat bahwa gambar yang lebih rendah dua kali lipat dalam ukuran relatif di layar ponsel, tapi gambar utama kami telah menjadi surat yang sangat tipis di atas dua sekarang gambar dominan. Ini jelas bukan maksud desain.

Solusi yang sangat bagus untuk fenomena ini:

</pre>
<div>.banner-item {
overflow: hidden;
min-height: 300px; /* 300px is arbitrary. */
}
.banner-item img {
width: 100%;
}</div>
<div>