responsive images

I think it would be great to let bootstrap studio do the heavy lifting for treating responsive images. I am already impressed with how easy it is to design for different screen sizes with this software. To me this is the obvious next step.

I think the way wordpress does it right now is a good model to follow. The designer just picks a big image and in the background; wordpress resizes, optimizes and integrates each image according to the breakpoints already in the css.

There a lot of ways to do responsive images, new HTML standards, CSS, and many JS solutions. But it is all a lot of work to resize images and write all the code and markup. I see a lot of room for automation. https://alistapart.com/article/responsive-images-in-practice

this app already has a setting to make images response - simple select your image and in the options panel you can select to make images responsive and it will aplly different classes to your image

1 Like

@chatsupply, I would have to think that is way beyond the scope of the app that the Dev's had intended to provide. I would not expect the BSS app to make multiple image resolutions and optimize the images for web etc... That's something the individual that make the images had done when working with them initially.

The responsive option just adds a class to the image that basically just says use the max-size of the image but no larger than it's container will allow. It does not alter it's actual file size nor optimizes the image it's self, just allows the dimensions to be dynamic. Which is why you typically don't specify width/height.

Saj

Chris, my suggestion involves coordinating multiple images, JS, HTML5, and CSS to reduce file sizes. You should definitely read the link, it is very interesting!

Saj, It would be a valuable feature for myself and other web developers. It is something I already do, but it is time consuming. The scripts only do about half of the work, so much of it involves hand tweaking. Seeing how much time this software saves with doing layout, it would make sense that it could save time with responsive images. Drop in an image and 'Studio' resizes and creates the markup for each breakpoint all at one time.

O think we can borrow a few idea from GRAV too, that has a modern responsive image support there are also a few plugin specialized to do that, in order to deliver smaller images when the user is on mobile or with a smaller screen. So i'd love to see some automation towards these modern features.

It's quite standard for modern cms (and site generators too) that the user just upload a large image (w=3000px) and the software creates the smaller srcset images to be served to the users.

One very important point is that to support these advanced features and optimizations we do need to drop support to ancient browsers ad os. So please keep these for BSS "bootstrap 4" version, and don't worry about xp-era desktops. Most users now visit websites via mobile browsers, using 4g/lte with their phone, and support for srcst is important in a moibile-first design.

(i just checked stas for a few local business websites i did, 80% hits come from mobile, 5% from tablets and just about 15% from desktops, so small screen sizes are normal here)

Thank you for starting this thread, @ChatSupply!

I have seen many instances in which people import much larger images in Bootstrap Studio than they need. In extreme cases 5mb+ photos end up used as thumbnails. So resizing images upon import is something we've been considering. Also, as @marrco observed, mobile is becoming the dominant format a lot of sites get viewed in. This is another reason to add good support for responsive images.

One way to do this is to automatically generate smaller versions of all images over 100kb that are imported in Bootstrap Studio, and then generate srcset automatically. The breakpoints in srcset can be set to the Bootstrap breakpoints (so you have one image for xs, another for sm and so forth).

It is not clear however how to make these customizable if people want to override them. Maybe we can keep this default for images, but add support for the Picture element, which people can control? Or maybe we can build a dialog that is available when right clicking an image in the Design Panel, which allows you to customize the additional sizes?

I would love to hear your thoughts on this.

Although I wouldn't mind if there were an inert setup for adjusting image sizes, I would prefer the default to not do this automatically. I personally don't think I'd use it as in my opinion, a website development/designing tool should not take the place of your photo editor as they aren't built with the quality.

Also in my opinion (just my 10 cents lol), I would rather see this app deal more with the features of website design as in more features for adding new elements and settings for setting up the pages and getting all those things worked out and bug free before even thinking about adding something like this which will probably end up the focus for a while ironing out the bugs to make images look right etc. As I said, just my opinion, and although it would be nice, I've used a good handful of various web design tools that have image editing capabilities, and the quality is just never as good as your favorite image editor would be.

If it were an automatic thing, that would steer me away from using this app. I don't like being forced to utilize things that aren't inertly part of the web design process itself in my tools unless it's something I can choose to do either each time or with a toggle for the project or default settings so I have a choice at the start rather than having to make a choice at each image entry.

One way to do this is to automatically generate smaller versions of all images over 100kb that are imported in Bootstrap Studio, and then generate srcset automatically. The breakpoints in srcset can be set to the Bootstrap breakpoints (so you have one image for xs, another for sm and so forth). It is not clear however how to make these customizable if people want to override them. Maybe we can keep this default for images, but add support for the Picture element, which people can control?

+1 for automatic srcset (with a customizable max img size) with boostrap (bs 4) breakpoints. That solves most websites needs. Even better is also being able to use to the Picture element, with options in the right pane for users that need art direction (different images/crops on different sizes) and advanced features.

Not all websites are equal, and we don't live in countries with the same broadband availability, so id's say xl-img size should be user customizable. Even manually editing a .ini file is ok, no need a fancy options panel for this option. srcset creation with image resizing must be completely automatic. (Large, mid, small and xs can be % of XL, so only one value could be modified. but even if i think 100kb is a good default for some websites i'd love to have better quality images)

additional question (i know it's not that easy) what about background images? Can we automate something for those too? I love background-size:cover, so i often use huge images (3000px wide).

i don't think breakpoints need to be customizable, Same for advanced options. I think this should be like the new animations feature. One size fits most. All other can do it manually. When i need advanced features i manually link AOS (animate on scroll) js and css and then do everything by myself, other times i use the new simple and fast animations option. I imagine the same here. Most times i will just enjoy automatic srcset creation and image resizing, other times i will use art direction via Picture element manually setting option in the option pane, other times i will do everything by myself.

This could be a fantastic new bss feature. I don't know how many users are using srcset atm, even if it's already supported in bss for many months now. With this option everyone will better support mobile and small screens, and stop serving huge images.

@marrco, right on! That is exactly what I am talking about. And yes, older browsers don't support any of the responsive tags so I use a javascript file that chooses the correct image.

@martin, Making it customizable would be tricky, but if you break it down it maybe it is not so hard to imagine. What does it mean to make images responsive? We need to resize them and maybe optimize them and map them to break points.

When you add an image object, in the settings you have the breakpoint options just like with columns. In addition you can choose the height or width for each breakpoint, then for the default value.

To take it a step further one of the responsive image JS apps could be integrated, that would handle loading the images in the browser. The complicated part would be choosing the best method of integrating the responsive images. HTML5, css tricks, JS or a combination of each.

older browsers don’t support any of the responsive tags so I use a javascript file that chooses the correct image.

Where do you live and what kind of websites do you develop? There are no old browsers here anymore. These are the stats for the last 10.000 visits of a small mom and papa store i built a few years ago:

enter image description here

And that site supports old browsers. So it was just a waste of time coding for those, when i could have better spent my time adding a few beautiful modern features.

The complicated part would be choosing the best method of integrating the responsive images. HTML5, css tricks, JS or a combination of each.

@chatsupply this is BSS, so let's follow bootstrap 4 path (also jquery 3). And let's keep it simple. Dropping support for ancient browser is enough to have a fast, clean solution.

I understand Jo's point about personal customizing, but there is a good deal of time spent optimizing images, so I am very much in favor of this. There are far too many poorly optimized websites and its going to break the internet eventually. Even BSS has jumped one of my websites from 250kb to 2mb (admittedly with more images) and better features! I could still do more optimization of images, but have stopped for the time being. I could have used this feature.

One way to do this is to automatically generate smaller versions of all images over 100kb that are imported in Bootstrap Studio, and then generate srcset automatically. The breakpoints in srcset can be set to the Bootstrap breakpoints (so you have one image for xs, another for sm and so forth).

I understand all the points here supporting image editing in the app too. I use Photoshop, which has built in image optimizing as do many of the fairly good image apps out there, but there are also 100's of sites out there for optimizing your images, and many of them are free services. I don't know about you guys, but I use an image editor before I even put an image on a site. I guess I can't see why anyone would add a raw image that hasn't been edited in some big way with coloring, sharpness, blurring, cleanup, sizing, etc. before they even added it to their site. This means if you're already going to do that then optimize it at the same time.

I most definitely would not expect BSS to have all the features I would normally use for images within it, which means it would be basic features at best and I would most likely "still" have to edit the image in my image editor to do the rest, which means the features added to BSS would basically have been a waste of time for the devs to add. I don't know if you've tried any of the web design programs out there with image editing built in, but I've tried a good half a dozen or so and I've not found one yet that could replace my image editing software completely. Most of the time they mess up the image on import alone, or during editing processes and the image ends up not being as good as it was before it was edited even. I've tried a good handful of other types of apps besides web design as well that also have issues with quality after importing then editing.

Once again, just my 10 cents, but I'd still rather see them focus on web design rather than image design/editing.

@jo i'm against image editing too. I said something different. I'd like automatic image resizing at at breakpoints with automatic creation of srcset. That' would be a time saver also for mockups. And BSS is a great prototyping tool. I often use images from unsplash for design, and only at a later stage my customers give me the final, official images. So that would be a feature i use.

BSS studio must have features that it's users need. And only Martin can tell how many of his free hosting use srcset and how many are serving too large images to mobiles.

A point here is that i don't know BSS user base and target. It's price model suggests webdesigners. But i fear many have bought it (or maybe just pirated) to build their own site, with very limited html and bootstrap knowledge.

as a multi year paying user i'd love to see more advanced features. But i think i'm in minority here.

Jo, I think you have an excellent point here. Perhaps BSS should expect that the initial image is fully optimized when imported and then Marco's and Chat Supply's idea for srcset and automatically creating smaller images for mobile (Provided they are good quality, but they will always be third generation, which could be a problem as you'll always get better images from the original.) I guess I am talking myself into Jo's position here, but I do think it would be useful anyway!

BTW I have been reluctant to crank my jpg compression down past 20-30% with resolution set at 1024x768 for larger screens, using Gimp, (I found photoshop too expensive and did not keep up with updates) and I am ending up with image sizes of between 60kb and 140kb. The 140kb are all outside with vegetation. The online page testing optimization program I am using the most is https://gtmetrix.com/ and it still seems to fail 50% of those images. Using original files 1024x768 , I have tried saving out to png with 20-30% compression and I get files that are 500kb - 600kb. It was suggested that I reduce my resolution to 900x? but I was reluctant to do that, having decided on 1024x768. My impression is that png is not so good. Am I wrong? Is there a better tool for compressing PNG than what Gimp has? Is PNG what I should be using now? I like jpg because it works. Maybe I should make the smaller mobile srcset images PNG if they compress properly.

I want good images at desktop, so maybe I just need to start using scrset and build the smaller res images next at something like 640x480 or 512x384. My older website was lightning quick with pure CSS & HTML and less than 400kb to download. BSS plus these images is now >2mb!

Most of the time they mess up the image on import alone, or during editing processes and the image ends up not being as good as it was before it was edited even. I’ve tried a good handful of other types of apps besides web design as well that also have issues with quality after importing then editing.

@jo i was thinking about something like this, so no image editing: http://www.responsivebreakpoints.com/

@rg: PNG is good for small images and anything you may need transparency for. When you start getting larger images, most especially backgrounds for the site or huge photos for slider backgrounds, you should opt for JPG as that will make the file size much smaller. There's very little difference in the quality, at least not that a website visitor will notice unless it was some Art type of site which you'd want to use the best quality possible for. I have a tendency to optimize my images so they are under 100kb and if I can get that I'm happy. that is usually pretty easy to do with most images, and of course I do use Photoshop which has it built in.

I also have an app that you can get her for Mac, it also has a paid monthly service for web app: imageoptim website

@marrco: thanks for that link marrco, great little tool there!

@jo there's also automatic art direction with that tool.

Very slick Marrco, thanks for that too!

Thanks Marco, http://www.responsivebreakpoints.com/#intro-details From testing the same png file and same size jpg, I will take JPG any day particularly with outdoor vegetation and details.

A good powerful tool to use. Thank you.

I'd like to see this feature also.