Bootstrap responsive images ideal width

Question

The question I have is pretty simple.

I have a div with responsive images. on sm the divs are full width like:

 <div class="row">

    <div class="col-md-4">
        <img src="/img/picture1.jpg" class="img-responsive">
    </div>

    <div class="col-md-4">
        <img src="/img/picture2.jpg" class="img-responsive">
    </div>

    <div class="col-md-4">
        <img src="/img/picture3.jpg" class="img-responsive">
    </div>

 </div>

Bootply

What width in px should I use for the pictures, i want the highest quality for the picture thats possible.

Im not overruling any bootstrap css so its for default bootstrap 3.

Also i know the larger the image resolution the better the quality, but a 4k image would be useless on a div sm in bootstrap and is a waste of resources.

Answer 1

Assuming that you use fixed containers and an untasted bootstrap CSS the container width for small devices is 750px (720px + grid-gutter-width). That means the widest possible column/image can be 720px (container width - gutter). So if you want to guarantee the images are displayed in best quality they must be at least 720px wide and 1440px to cover retina screens.

Answer 2

There is not a maximum browser width so the short answer is "as big as you can" (but take into account that the bigger the image is, the longer it takes to load).

What I would to is to do it in a way similar to Bootstrap. Bootstrap sizes go from extra-small to large and it considers large containers (when not fluid) to be 1170px width, so it has to be at least a third of that, 390px (330px if we remove the gutter space).

Moreover, it is shown at full width at small screens which bootstrap consider to have 750px (720px if we remove the gutter space) so the minimum updates to 720px.

But, if you want your web to look great on retina devices or similar, you should use images twice as big, so the result would be 1440px (but you should use those big ones just in that kind of devices)

I would look for a compromising solution between size and weight.