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.

Answer 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/.