...">
Geek Answers Handbook

Optimum boot image width

My question is pretty simple.

I have a div with responsive images. on sm 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 images, I want the image quality to be as high as possible.

I do not overload any bootstrap css, so its for bootstrap 3.

I also know that the higher the resolution of the image, the better the quality, but a 4k image will be useless in the div block in bootstrap and is a waste of resources.

+8
html css twitter-bootstrap
source share
3 answers

Assuming you are using fixed containers and unassigned bootstrap CSS, the container width for small devices is 750px (720px + grid-gutter-width). This means that the maximum possible column / image can be 720px (width of the container - gutter). Therefore, if you want the images to be displayed in the best quality, they should have a width of at least 720 pixels and 1440 pixels for retina screens.

+5
source share

The maximum width of the browser is small, so the short answer is "as large as you can" (but note that the larger the image, the more time it takes to download).

What I would like to do is in the same way as Bootstrap. Bootstrap sizes vary from extra-small to large, and he believes that large containers (if not liquid) have a width of 1170 pixels, so it should be at least a third of that, 390 pixels (330 pixels if we remove the gutter space).

In addition, it is shown at full width on small screens that are thought to have 750px (720px if we remove the gutter space), so the minimum updates are up to 720px.

But if you want your website to look great on retina devices or similar, you should use images twice as large, so the result will be 1440px (but you should use these large ones only on such devices)

I would be looking for a compromise between size and weight.

+1
source share

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

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

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

0
source share

More articles:


All Articles