Modern Web Engineerinng

[munem15-4873]

Flexible Images

One major problem that needs to be solved with responsive Web design is
working with images. There are a number of techniques to resize images
proportionately, and many are easily done. The most popular option, noted
in Ethan Marcotte's article on fluid images but first experimented with by
Richard Rutter, is to use CSS's max-width for an easy fix.

1 img { max-width: 100%; }

As long as no other width-based image styles override this rule, every
image will load in its original size, unless the viewing area becomes
narrower than the image's original width. The maximum width of the
image is set to 100% of the screen or browser width, so when that 100%
becomes narrower, so does the image. Essentially, as Jason Grigsby noted,:
 
                    "The idea behind fluid images is that you deliver images at the maximum
size they will be used at. You don't declare the height and width in your
code, but instead let the browser resize the images as needed while using
CSS to guide their relative size." It's a great and simple technique to resize
images beautifully."

Note that max-width is not supported by older IE versions, but a good
use of width: 100% would solve the problem neatly in an IE-specific style
sheet. One more issue is that when an image is resized too small in some
older browsers in Windows, the rendering isn't as clear as it ought to be.
There is a JavaScript to fix this issue, though, found in Ethan Marcotte's
article.

While the above is a great quick fix and good start to responsive images,
image resolution and download times should be the primary
considerations. While resizing an image for mobile devices can be very
simple, if the original image size is meant for large devices, it could
significantly slow download times and take up space unnecessarily.

Source: Smashing eBook􁴹Modern Web Design and Development