Spesifikasi display dari visitor sangat variatif, mulai dari mobile device seperti ponsel dan tablet, hingga laptop dan high dpi screen. Image yang sama bisa tampil berbeda karena pengaruh perbedaan display.
Image besar, bila dibuka di small screen device, bila tidak diperlakukan responsive, bisa saja terpotong, atau kita harus melakukan zooming dan panning.
Image kecil, bila dibuka di high resolution display, bila salah dalam menampilkan, bisa terjadi stretching hingga gambar pecah, atau sering disebut pixelation.
Pendekatan paling simple adalah menggunakan relative sizing yaitu property max-width dari css.
max-width ini berfungsi, menampilkan gambar dalam ukuran penuh, namun tidak melebihi resolusi dari image dan tidak melebih lebar dari viewport.
Contoh, image dengan width resolusi 800px, pada viewport 1200px, akan ditampilkan 800px (sesuai dengan resolusi yang dimiliki). Pada viewport 400px, maka image akan ditampilkan 400px, dimaksimalkan ke lebar viewport.
TIPS: Jangan gunakan width: 100% pada image, karena akan ditarik atau dipampatkan pada viewport. Jika resolusi image lebih kecil dari viewport, gambar akan pecah.