bootstrap carousel with photos: optimal image size?

Question

I am experimenting with Bootstrap's carousel and would like to use it with photographs.

Question: What is the optimal size for the pictures I should upload for use on the carousel?

In the current Bootstrap distribution (v3.2.0) the example carousel.html uses a simple 1x1 pixel image as a background:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">

I couldn't find this documented and the photos I have experimented with get stretched/distorted on my laptop screen.

Solution 1

There isn't really an "optimal" image size. In the example with the 1x1 pixel, it's a pixel that is repeating over and over to cover the full span of its containing div.

This Bootply Demo of Carousel uses a 1024x700 px image as an example. If you want to have a carousel image that spans the full width of the screen its probably a good idea to use an image that is at least 1024 px wide (possibly wider), though you don't want it to be too high resolution, since that would take a long time to load.

The image height is probably going to be less than the width and really just depends on what type of image you are using and how tall you want the carousel image to be.

Otherwise, the best thing to do is to try out different images and see what looks good.

Note: the Bootply demo uses http://placehold.it which is a good tool for trying out different image sizes, or check out http://placekitten.com/.

Solution 2

Actually, there is a specific aspect ratio that this carousel forces images to be displayed as. If you don't use this aspect ratio the images will be distorted and displayed in this ratio anyway. The carousel will not match the aspect ratio of the images.

The weird ass ratio it uses, which is actually a pretty good looking aspect ratio for this purpose imo is . . . drum roll please . . . 84:25 ! After many attempts I found the best size for me is 1680x500. true it get stretched a bit on larger devices and looses a little crispness, but it's still good looking and a manageable file size and looks great on most monitors.

You can confirm this by using the carousel sample on getbootsrap . com and opening it full screen and taking a screen shot. Then crop out the area with the carousel. Use your preferred method of determining an images size and plug in those numbers in your favorite aspect ratio calculator.

Comments

[lara michaels]

thank you for this. I have realized the issue was the fixed "height: 500px" in the carousel.css file, which was fixing the image height and causing the distortion I was seeing. When using photographs, and given current displays, is there a "best practice" in terms of recommended pixel width for photos that are meant to span horizontally?

[Dan]

No best practice, just don't alter the aspect ratio. So if an image is 600x300, don't put it in a div that is 500x400. You can use an aspect ratio calculator to help with this andrew.hedges.name/experiments/aspect_ratio

[eapo]

This answer it's a bit outdated, today (2019) the 1680x500px is the recommended image size for Bootstrap Carousels