CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sven van den Boogaart
Sven van den Boogaart

Reputation: 12327

Bootstrap responsive images ideal width

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.

Upvotes: 9

Views: 4376

Answers (3)

Benjamin Roberts
Benjamin Roberts

Reputation: 566

The col-md-4 class forces bootstrap to split the three horizontal images into three columns when the browser width is 768 pixels or less. The gutter width is 15px so the best image width is 738px. This would work for screen widths up to 3*768 = 2304px. Most screens will be covered under this (see below)

https://www.w3schools.com/browsers/browsers_display.asp

For larger widths you should test depending on your requirements...

Upvotes: 0

Alfonso Jim&#233;nez
Alfonso Jim&#233;nez

Reputation: 1245

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.

Upvotes: 1

damian
damian

Reputation: 5444

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.

Upvotes: 5

Related Questions