Carousel - Making Moble XS responsive size images that work.

Bootstrap Studio Help
1

I've used Gimp to shrink all those 1024×768 images being used for the larger displays down to 330×248 for the smaller (Mobile XS) site responsive carousel, so that it won’t be as slow downloading photos.

There are a number of approaches to this, and the best one is probably dependent on inner workings of Bootstrap and the Carousel component, which I do not know about at this point. I am trying to get smaller image that download faster at the Mobile XS size display. That's the goal. Right now the 1024x768 images are taking too long on a cell phone. They range in size from 100-200kb and they are Jpegs compressed to 65% which is about the practical limit keeping the quality up for the bigger displays.

Now I've made a set of photos at 330x248 jpg compressed to 65% again and they are 10kb-30bk which is much better. I need to figure out or find out the best way to inject these into the Carousel so that things work right! I've already tried this:

<Carousel>
    <Slides>
          <Slide>    <<----Right click and pick duplicate
                 <Image>
                 <Caption>
          <Slide>    <<----Duplicate slide
                 <Image>   <<--- Change slide to  *-sm.jpg  in Options using "From Library"
                 <Caption>

Then set the first 1024x768 <Slide> to be hidden at XS display and set the second 330x248 <slide> to be hidden at the LG, MD & SM displays. Save it. and then try it. and on the Cell phone it is jumpy and when you go backwards there is a section where there is NO IMAGE, but if you hit back or forward the images are restored. Am I doing this right?

The other alternative is to somehow copy a double <image> under a <slide> and turn on and off the displays, but this is not possible, as a right click on <image> in the OVERVIEW shows.

Another alternative is to simply Duplicate the entire <Carousel> Then 1. Change all images to the 330x248 smaller version. 2. Set the hiding of the LG, MD & SM displays and do a similar thing to the other carousel.

Are there any thoughts or experience about these approaches?

I lost the previous Trial website for some reason. This one is good for a month though. http://crimson-paper-3666.bss.design/

Thanks.

2

I will say that when the site is fully loaded, with all the carousel images (it sits there for awhile, sort of stuck while downloading) including the one smaller <slide> image, the carousel works find with no slide that is blank or gone.

In thinking about the mechanics of this, wouldn't it be faster for the program and html to check one Carousel, see that is is not for Mobile XS display size, then get to the other Carousel, see that it must be loaded/downloaded and simply download it all.

Rather than, go into a single Carousel and have to check if the slide is downloaded or not, then download it! That seems like a lot of logic and waiting around to me.

So what does BSS do as this stuff is processed and what is the most efficient way to add these second smaller images for Mobile XS display?

Thanks.

3

You know that there is an option to make your images responsive right ? If you didn't know then look in the options panel when you have an image selected and tick it or do your images have to be the sizes you have specified?

It scales down your images when changing through each of the break points.

Hat is a much easier way to control your images in a carousel

4

The blank slides are because you have hidden the slide, you can't do that. The script that runs the carousel counts the elements that have the class=item and so those are still part of the scrolling and nav indicators. It has no knowledge whether or not one is hidden over another.

Multiple carousels probably not a good idea either. Your best bet is the optimize route to get the smallest possible file size while keeping as much quality.

Chris is right, you should enable the responsive option for the image.

You could write a script that checks media queries and updates the img src with the appropriate size image you want. Each image would need a class and then based on the media queries update that classes src with the bigger/smaller image.

You could also try https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015. You would have to convert your carousel to Custom Code for it to work. Appears to work in FF/Chrome/Edge, IE11 it does not work and with Edge the dev tools emulation stinks so it works but the emulation is horrible so it's hard to really see what it does on the mobile device. I was able to try this out with a sample code. Just so you know it doesn't work in the BSS app though you have to view it working in the preview mode.

The best bet is optimized for web images, don't hidden anything and don't have multiple carousels.

Saj

5

Dear Chris and Saj, I just learned a whole lot about Carousel, handling images, and how they are rendered in Carousel.

  1. Optimize your image for the LG and make it as small as possible keeping quality. I might be able to reduce the 1024x768, but they look pretty good, and I don't want to loose much quality if I can avoid it. Perhaps optimize it on the MD screen! That would probably reduce the necessary resolution quite a bit.

  2. Check all the Images to be responsive! - No I had not done this! Thanks Chris.

``` OVERVIEW <<--- Highlight and then go to OPTIONS & check Responsive. 
</blockquote>

<ol>
<li><p>Having multiple Carousels is probably not a good idea (both Chris and Saj agree on this).</p></li>
<li><p>To fix the blank image in my Carousel, don't hide any images! - Hmm, that idea of hiding one slide and showing another is not working because of the way the "script that runs the carousel counts the elements that have the class=item and so those are still part of the scrolling and nav indicators. It has no knowledge whether or not one is hidden over another." - Thanks Saj for the good explanation.</p></li>
</ol>

<p>I am going to have to think about and learn more, but the course is clear. Get those image as small as possible and check responsive on all images. And don't hide slides!</p>

<p>Thanks guys.</p>
6

Saj,

You could also try https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images–cms-21015. You would have to convert your carousel to Custom Code for it to work.

This would be a nice solution, and is almost exactly what I was trying to achieve, but I don't think I am prepared yet skill wise to make the necessary changes. Maybe in due course. So perhaps in the future I could make a new COMPONENT Carousel Responsive <picture>

``` HTML5 picture source source 
</blockquote>

<p>Thanks.</p>
7

Its too bad I can't simply move my smaller image up to just below the 1024x768 image and then hide the two slides appropriately, because then perhaps the

"script that runs the carousel counts the elements that have the class=item and so those are still part of the scrolling and nav indicators. It has no knowledge whether or not one is hidden over another.”

Should just run on the "slide" class item and then the proper image would be used dependent on the hide settings.

Slides Slide Image <<--- set to hide XS Image <<-- set to hide LG, MD, SM

Then there would be no "blank" slide in the carousel.

Is there some way to achieve this without rewriting the script?

8

Well, I got stubborn and decided to try this:

 Slides
      Slide
           Row
               Column
                Image (small  330x248)  --- hide at LG MD SM
           Image (1024x768)  --- hide at XS

That did not work.

 Slides
      Slide
           Image (small  330x248)  --- hide at LG MD SM
           Image (1024x768)  --- hide at XS

That did not work either In both cases the smaller Image was not found and left a blank at XS display. However in LG MD and SM the 1024x768 image displayed fine. So much for that experiment.

9

Why not create two separate galleries and hide each at the appropriate sizes? This way one gallery will show at larger sizes and one at smaller sizes.

10

You could try using @media (min-width:767px) for large images and @media (max-width:767px) for small images ?

11

My apologies, I did not read the post correctly. You are using the img and not the background image. So I was following along with the posts and the suggestion was made to make the img responsive. There is a option below for responsive visibility to set xs sm md lg. So if I add a addtional image to the slide I should be able to make both images responsive and then choose which image on slide one is visible such as image one visible xs through md while image two is hidden xs through md.

12

Probably the img srcset is the way to go. Most browsers support it http://caniuse.com/#search=srcset except IE11 and Opera Mini. But most people using Win10 are using Edge not IE11.

Example: < img src="image-mobile.jpg" srcset="image-large.jpg 1200w, image-medium.jpg 768w, image-small.jpg 320w">. I had some difficulty with it I think only because I didn't truely have different image sizes to work with when testing it out.

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

I did find a way to use mostly CSS, similar to what @twinstream was referring to, using background images. It's a bit more involved but it does seem to work.

For example, just a snippet

@media (max-width:991px) and (min-width:768px) {
  .carousel-inner .item:nth-child(1) {
    height:553.5px;
  }
}

@media (max-width:991px) and (min-width:768px) {
  .carousel-inner .item:nth-child(1):before {
    display:block;
    content:"";
    width:100%;
    height:553.5px;
    background-image:url(Morning-after-a-New-Year-Snow.jpg);
    background-size:cover;
  }
}

@media (max-width:991px) and (min-width:768px) {
  .carousel-inner .item:nth-child(2) {
    height:553.5px;
  }
}

@media (max-width:991px) and (min-width:768px) {
  .carousel-inner .item:nth-child(2):before {
    display:block;
    content:"";
    width:100%;
    height:553.5px;
    background-image:url(Spring-View.jpg);
    background-size:cover;
  }
}

Has to be done for all 24 images and for all the other media queries you might want to change images sizes on.

Saj

13

Thanks everyone, these are good ideas, I'll get to eventually. It looks to me like srcset is a good way to go. Here's a good link found from the "Ideas" section. https://alistapart.com/article/responsive-images-in-practice

14

Saj, I've finally gotten around to really processing the images, and have some smaller versions, that I've tried with the srcset attribute as you describe above.

At each image in the carousel I've added and attribute

srcset and a value similar to BR5-NW.jpg 1024w, BR5-NW-sm.jpg 512w

I did this for all the images and of course have imported them into BSS. When I save and Preview the website, with a very small width screen (and right click to pick View image info) I see that it is still loading 1024w (and reducing it to 512w). --Even when I clear the browser cache and reload.

Then I used my cell phone and verified that the images were 1024w still. Is there some switch that I need to turn on with a line? I know I should have a "Sizes " Statement somewhere, but I would have to add that line somewhere in the inaccessible Carousel perhaps, or maybe I turn it into a Custom Code?

Perhaps you've experienced this before?

15

PS my preview website changed to http://bold-salad-1879.bss.design/

16

Using Chrome's Dev Tools (F12) and looking at several of the images in the Carousel, I see that they are in fact all the same dimensions 1280x960.

This method is actually quite new to me but it seems that you did the coding right, with just a couple misses.

Some of the images the srcset set are wrong

src="assets/img/BR1-NE-2.jpg" srcset="assets/img/BR1-NE-2.jpg 102w, assets/img/BR1-NE-2-sm.jpg 512w"

src="assets/img/BR6-Cupola.jpg" srcset="assets/img/BR6-Cupola.jpg 1024w, assets/img/BR6-Cupola-sm.jpg"

src="assets/img/Spring-Flowers.jpg" srcset="assets/img/Spring-Flowers.jpg 102w, assets/img/Spring-Flowers-sm.jpg 512w"

The only thing that I can think is maybe reverse them, start with the small image as the initial image and then put it at the first srcset and then the larger as the second srcset.

Looking at the example here https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/ and here https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/

Like I said it's still new to me too so I'm not entirely sure on making it work right. If anyone else has any info on it that would be great :)

Saj

17

Ok, so this is what I did to test this out.

I grabbed your first 3 images of each size and created a Carousel and used those images.

It was hard to tell what size was getting used. So I edited one set of images and put in the size of the image as text on the image it's self. This would allow me to see what image is getting loaded based on the media query. This is what I found when I set up the image and source like this.

src="Front-Hall.jpg" class="img-responsive" srcset="Front-Hall-sm.jpg 512w, Front-Hall.jpg 1024w"

Using Chrome Dev Tools (F12) and enabled the device toolbar, the 512 image gets loaded on phone size of the page (320x847). The next step up 375x847 loads the 1024 size image and every step after that.

So I set the srcset 512w to 768w and now the 512 image loads all the way up to 767px and the 1024 loads on +768px pages. So it is working using the method I described in this post. But your probably needing to rethink the size of images you want to use. I can image probably 768 image with 768w and then use the 1024 above that if you want to stick with just 2 image sizes with the src set at the larger size for fallback and the srcset with first image being the smaller then next image being the larger size.

Saj

18

Nice explanation Saj, I haven't done anything with srcset myself yet either and this actually helps me understand better how to use it too. Thanks!

19

I think this is the way I should set it up " I set the srcset 512w to 768w and now the 512 image loads all the way up to 767px and the 1024 loads on +768px pages. " That is what I was considering. I am starting to like chrome because of F12, and web stuff, very similar to FF but different, I used to discard it.

I could make a much smaller size for just phone, later. It takes me quite awhile to do it for some reason, but I was collecting all images in the same place at same resolution with all the originals (only way to be organized!!) So next set will be faster.

I am going to switch the large and small images as you suggest!! Have fixed my errors.

20

Jo, while we are at it, you mentioned that diligent edits of CSS and JS are needed and that BSS give clues about what is used and is not used. Now I am at that stage, I think. I have done some editing of unused CSS, but I am still unsure about the process and still trying to learn. Are there some good Pro Tips about this that would help?

Thank you both. Your help is much appreciated.