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 50

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