Loading of images in different resolutions

Asked

Viewed 95 times

0

I want to do a Carousel in Bootstrap for church event banners. I’d like to know:

1) How many different banners would I need to make to meet all resolutions, satisfactorily?

2) If I upload the images and use tags as .visible-phone, .visible-desktop, etc, browsers will UPLOAD all images that are present and ONLY DISPLAY those that are in accordance with the current resolution or ONLY UPLOAD the images according to the current resolution?

Thank you!

css bootstrap
    1. Yes, they will load. But you can use the attribute srcset https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Specifications or https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#Example_1_uso_com_attribute com_media to use multiple resolutions without browser load all images.

1 answer

1


1 - If you are using Bootstrap with the default Grid you theoretically would need the images in these resolutions. Here is the official documentation: https://getbootstrap.com/docs/4.0/layout/grid/

$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 grid resolutions you can do 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 answer has a load test for you to see how Chrome Devtools requests the images on srcset How best to work with responsive images?

Another way to treat the img tag would be like in this Mozilla article on responsive image https://developer.mozilla.org/en-US/docs/Aprender/HTML/Multimedia_and_embedding/Responsive_images

<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="">

  • I saw a Bootstrap table that shows me the following resolutions: Large Display: 1200px and higher; Default: 980px and higher; Portrait Tablets: 768px and higher; Phones to Tablets: 767px and lower; Phones: 480px and lower. I should create an image for each of these resolution categories?

  • @Rogériolimas if you want well done you have to make an image for each resolution because each one has a different weight the smaller the lighter. Then you have to use one of the options I mentioned in part 2 to build your image tag or srcset with the name of each image of each resolution. You don’t need to do this for the entire site, just do it on the slider and Hero images that is already enough if the site is small. My opinion ...

Browser other questions tagged css bootstrap

You are not signed in. Login or sign up in order to post.