Optimal size for every image for Bootstrap Carousel.

[limakid2015]

Hi,

I read on the web that the images for the web, in the bootstrap carousel (or any slideshow) should be no longer than 960 px width. But that info is from 2014 or before. Before also the standard for images was 100KB-150KB the weight for the photos. Before, also the web sites had to be 800 px width to fit almost all the monitors in the world.

But, at this time, April 2017, many things have improved, right? Better bandwidth, mobile devices with high resolution screens, higher resolution monitors, and so on... So, what do you think could be an ideal image size for the photos on a bootstrap carousel or slideshow animation made with Animate CC, considering the improvements of them monitors. I don't have a research study saying: "Only 10% of people with computer has a monitor of 800x600 px..." If I go for a width of 2048px, maybe few people will really appreciate it. You think 1920 x 800 px width is OK? like average in our days? And about the weight of a photo, I think I can risk uploading pictures of 248 KB ~ 350 KB. And all this because means better quality. Of course I am thinking on mobile devices to. Responsive Design.

So, I believe, is just my opinion, that I can not pretend a slideshow of 6000 x 2000 px (maybe for the year 2030), but I should not go either for just 800 x 480 px. That's from 10 years ago. ALSO, if I use images of 300 x 200 px at 100% size of the screen, it could be seen PIXELATED on most of the monitor.Are you agree?

As a curious anecdote,  Online Travel Agencies (like Booking, Expedia...) request to the hotel managers to upload photos with a MINIMUM of 2880 px width! Minimum. Otherwise, they reject the photo.

So, which are you comments about this? Thanks a lot for your patience. I am using dreamweaver with Bootstrap CC2017.0.1.

[BenPleysier · Accepted solution]

There is no optimal size for images, it depends entirely on your page design.

At this point in time, I would go for an image with a width of 1920 px for full screen desktop applications and decreasing the size for handhelds.

To do this, have a look at using SRCSET. Have a look at Responsive Images: If you're just changing resolutions, use srcset. | CSS-Tricks

[osgood_]

How long is a piece of string?

I think the general opinion these days for 'hero' images is to produce 3 sets of images, 1 set each for desktop, tablet and smartphone. Personally I think each set needs to be individually resized and cropped to achieve the best outcome. Some developers get lazy and I can't say I blame then, they produce 1 large image say 2000px in width and resize it down to say 1000px for tablet and 500px for smartphone but of course doing this results in the depth of the image also decreasing in proportion to the width, which is probably not going to look good on mobile devices in my opinion. That could be what is happening in the case of your online Travel agency example of 2880px. The image may be being repurposed to a different width via some server side script for tablet and smartphone but its a flawed solution in terms of optimising the area of the image that would look better in narrower devices but the best available if you are not prepared to manually resize and crop. Its a massive, massive issue because clients left to their own devices to upload images arent going to produce 3 sets of optimised cropped and resized images and no script can guess what area of the image would be best suited to smaller devices.

For hero images these days I tend to use background images and change the src at different breakpoints in a media query. As yet I have not used srcset in production but that's the way to go if you are using inline images. I can't say how successful or not it is as I have limited experience of using it apart from saying I watch an awful lot of coding and as yet haven't seen this being used extensively as an option, maybe its early days.

[Nancy OShea]

What is the largest target device you're building for? 

Will your carousel be full screen width or centered in a smaller container?

If full screen width, you can have smaller images & make them appear bigger with some extra CSS code.  But if the image is up-scaled too much, it may look distorted on larger devices.

.carousel-img {

     width: 100%;

}

Nancy