I want to make a Carousel in Bootstrap for Event Banners for a church. I would like to know:
1) How many different banners would I need to make to meet all resolutions, satisfactorily?
2) If I load images and use tags like .visible-phone , .visible-desktop , etc, browsers will LOAD all images that are present and ONLY will display those that conform to the current resolution or LOAD images only according to the current resolution?
Thank you!
1 - If you are using Bootstrap with the standard Grid you would theoretically need the images in those resolutions. Here's the official documentation: link
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
2 - To load the images in the slider with each of the resolutions of the grid you can do the Srcset as Valdeir commented. That way your image would look something like this:
<picture>
<source media="(min-width: 576px)" srcset="suaimagem-sm.png" sizes="100vw"/>
<source media="(min-width: 768px)" srcset="suaimagem-md.png" sizes="100vw"/>
<source media="(min-width: 992px)" srcset="suaimagem-lg.png" sizes="100vw"/>
<source media="(min-width: 1200px)" srcset="suaimagem-lx.png" sizes="100vw"/>
<picture>
This response has a load test for you to see how Chrome DevTools requests the images in srcset #
Another way to treat the img tag would be like in this Mozilla article about responsive image link
<img srcset="suaimagem-sm.png 576w,
suaimagem-md.png 768w,
suaimagem-lg.png 992w,
suaimagem-lx.png 1200w"
sizes="(max-width: 576px) 280px,
(max-width: 768px) 580px,
(max-width: 992px) 780px,
1200px"
src="suaimagem-lx.png" alt="">