Bootstrap Responsive Images Scaling

Question

Using Twitter Bootstrap I realize that by default it scales images responsively. This is great, but isn't always perfect.

Say for example I have a 500x300 image on desktop, then it resizes for mobile that image is going to be really small and not very tall, losing much of the detailed parts of the image.

I have seen how other sites actually don't scale the image much, but rather use the parent div to sort of mask the image. (http://www.fitnessfireworks.com was a great example of this, no longer available.)

What is the best method to accomplish this? A combination of CSS background-image and background image scaling? Just looking for best practices.

Answer 1

I have seen how other sites actually don't scale the image much, but rather use the parent div to sort of mask the image

If you examine the CSS on the page you mention, you will see that rather than using imline images, they are typically defining divs with background images, and using CSS like

#some-div {
background-size: 100%;
background-size: cover;
background-position: center center;
vertical-align: top;
background-image: url(/.../image.jpg);
}  

Here's an example of how you can get completely different results with scaling of inline image vs background-image.

http://www.bootply.com/67094

The key to the second method is to use background-size:cover and manipulate the size of the div (and hence the size of the background-image).

http://css-tricks.com/perfect-full-page-background-image/ has good info about variations and options with background-cover.

Answer 2

If image quality is important I'd use two images using different class declaration. External tools will always be better at scaling images than the browser doing it on-the-fly.

Answer 3

You may find this article useful. It explains about optimizing images for responsive display and avoiding multiple image downloads