Question

I’m developing a web page for mobile devices, both smartphones and tablets.

I’m working with jQueryMobile so most features work very well on all the devices.

My problem is, I want to use very high resolution images in order to get the best quality using tablets. If I use 720X1280 – the page looks great on tablet – but on smartphones – no downscaling takes place.

Do I have to build using 320×480 – and then the scaling will happen on tablets? Is there any soultion or guidelines?

Answer 1

Use responsive images. So that image will scale according to the size of the device.

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

Above css code will automatically take the parent container size.

Here are some great examples & aticles.

http://filamentgroup.com/examples/responsive-images/

http://mobile.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/

Javascript plugins for Adaptive images:

http://adaptive-images.com/

Great tutorial for flexible images:

http://www.flexiblewebbook.com/downloads/FlexibleWebDesign_sample_ch9.pdf