Hi all,
Old thread I see, so not too optimistic. The tool mentioned https://www.responsivebreakpoints.com/ is great but to have automated functionality similar to this within BS would be seriously amazing!
Just as file compression to save hard disc space became outmoded, so too will image compression to save bandwidth/throughput. In ten years, people will look back and laugh that we once had to choose between image quality and speed.
In 10 years people will probably laugh because we used our mouths to talk to eachother. For the time being, it's pretty standard though so is needed.
@jcdev ATM is not standard practice among developers to do that. And usually, customers don't pay more for that, just like they don't care about old browsers support. Please check how most HTML static websites are done atm. Some CMS do their magic behind the scenes, but if you're going to produce a static HTML website that's not used, at least in an automatic fashion. So if for a particular design of your's that's needed you'll probably have to manually create and serve different images for mobile and desktop, or at least different crops of a larger photo. Nothing you can do automagically.
But, again, that's to provide a different, better image for a different screen, not to spare a few bytes.
5G is rolling out now. In 1-2 years it will be ubiquitous, and compressing images to save 100k-200k will be a ridiculous waste of time. Same with Google's AMP project. People/companies are so obsessed right now with shaving a couple seconds off of site load, but very soon none of it is going to matter. I see no point in doing contortions that will be pointless in the very near future (unless your site is purely for generating revenue, and you're going to lose immediate business because clients refuse to wait an extra couple of seconds for an image to download.)
Also, Google's Pagespeed Insights cannot be trusted. It claims "time to interactive" on many of my sites to be in excess of 10 seconds, which is total bullcrap. I check my client's sites on a variety of mobile devices using different 4G providers in my region (Verizon, ATT, Sprint), and they all load in 2-3 seconds TOPS. I suppose if you're building websites for people in places where they're stuck with 3G then all this image optimizing has some merit, but I see it as much ado about nothing. By the time webmasters are done scrambling to optimize all their websites to conform to Google's rules, the rules won't matter.
I beg to differ in that. I will be happy to not need to do the extra optimizing when 5G+ happens, but until then there are a lot of people in semi remote places, people still on 2G phones and slow internet connections for tablets that are as important as those that donāt need the optimized versions.
Well, of course you have to build for your audience.
99% of the clients I build websites for are small businesses with local clients in areas that are well served by hi-speed internet. They're never going to get a customer from, say, an isolated town in rural Idaho where they've got no LTE and are still stuck with dial-up download speeds.
But if I did get a client from such a place, I'd certainly design the site to accommodate their visitors limited bandwidth.
These are all assumptions about who and when responsive/optimised images are needed. At the end of the day if a client checks Page Speed Insights and there are a ton of oversized images then they will want this sorting out and I don't want to make excuses when I know it can done outside of BS. Not everyone's clients are small unknowledgeable businesses by the way.
The reason I am using BS is to speed up my workflow but no responsive images means exporting the site and resorting to Grunt or similar to handle this is a major waste of time. p.s. as a comparison, Webflow have had this feature since 2016.
Page Speed Insights is a joke if you're in the US. It's based on 3G bandwidth (and can't be changed.) As of 2019, the US has 98% 4G coverage, so why are they still forcing people to check sites as if they're on 3G?
At the very least, give people the option of choosing the simulated speed that matches their area.
The lack of this feature keeps me from using BS. Having to manually handle it is a total pain.
Where are you folks located that 100k difference in image size is a deal-breaker for a client?
Anyway, as I said, Google's page speed insights is a joke. Half of Google's own pages load poorly when tested on their own speed test. The pot calling the rest of the internet black.
Earth, where my clients clients are also located. Delivering optimised images for device size and resolution is the right thing to do, in my book (and many others). If you don't mind blowing your page weight out then go for it, but some people care about optimisation and having this somewhat automated inside BS would mean a lot.
@Maxwell,
Snarky responses are not at all helpful. The point I am making is that 88 countries now have access to 4G LTE. Pretty much all of Europe, North America, Scandinavia, South East Asia, Australia and much of South America have access to 4G. So unless your clients are located in places like Central America, Central Africa, Greenland or the Middle East, they're not going to suffer much from an image being 50kb-100kb larger than it might otherwise be.
There's nothing wrong with optimizing your site for speed. Most good web designers do it. But pick your battles. Google's idea of saving speed by using "next gen image formats" is to save all your .jpgs at the lowest quality setting. Meanwhile, Bootstrap in general is a bloated, slow-loading framework, so if speed is that important to you, you shouldn't even be using Bootstrap. You could probably cut more time off your page loads using a lightweight framework like Bulma or UIkit than obsessing over image optimization.
Besides, in five years, all of this will be moot anyway.
Sorry, I didn't find your response helpful, so that's where my sarcasm came from. I optimise bootstrap to cut the bloat where possible, along with anything else that can be optimised - as most good web designers do. Clients and users love it.
Aside from what google page speed insights says, serving images at the correct size per device is industry standard at this point. Serving oversized images makes the developer look amateurish. Doing this correctly is a necessary step for many professional developers.
Have you all missed the fact that image optimization is already part of the app? I know it won't cure everything you're after on this, but you guys are arguing about something you can have done in a very cheap little app outside BSS and done so at bulk images. I use an app called Image Optimizer (who'd of thought right? lol). It does it perfectly, and I then just drag the images all back into their folders in BSS and let it overwrite them if I had them in there already and it's done.
But ... BSS has the ability to optimize your images already, this isn't a feature that is missing anymore. The part you guys aren't even talking about, that is actually still missing, is most likely the resizing of them, but the optimization is already there, or done with external programs better and cheaply. Too cheaply and way better enough that this argument is getting really old and stupid.
It's a web designing app, it's not an image editor, many other web design apps don't include image editing features either, it's not expected. I personally won't even use them because that's not what I want this app for, I have better apps that are specifically for this that I will most likely always use for convenience, bulk photos, etc. Stop arguing over something so easily remedied.
We were arguing over whether itās necessary to provide images that are optimised for the end users device, which it is :)
I don't want image editing. It's the automatic code generation for scaled versions of images Iām after. I can automate the scaling and optimisation outside of BS, obviously, but that doesnāt really help. If BSS created scaled sets automatically from a high res source directly inside the app and took care of the code generation, that would speed things up considerably (isnāt that the point of the app?). Thatās not really image editing, that's automating a tedious and necessary process thatās directly related to putting the site together.
What better app do you use to generate scaled versions of images and automatically update the code wherever they're used?
"What better app do you use to generate scaled versions of images and automatically update the code wherever theyāre used?"
My personal answer/opinion to this is, "I don't." I load the same size image whether it's displaying on a desktop monitor or a smartphone. Unless it's a massive image (like 400k or bigger, in which case I might then create a smaller version for smaller screens.) I use Photoshop to generate smaller, optimized images when needed. In many cases, I don't even show "large byte" components like full-screen carousels on mobile.
I think the entire discussion is moot. I've built over 150 websites for clients in the last ten years and since we started building responsive sites, I've never had one client call me up and say, "I just checked our site out on Google Page Speed Insights and it says we can shave 1.3 seconds off the load time on mobile by reducing all the images by 20-30k." (and that would be IF they were stuck using 3G service, which they're not.) And that isn't even a realistic "hypothetical" scenario! If Google had its way, all your jpgs would be saved at lowest quality, and every website would use AMP because it's better for THEM when their servers have to crawl millions and millions of pages. But it's not better for your client because then the pics look like crap. Plus, half of the time, Pagespeed Insights complains more about "render blocking resources" and "unused CSS" then serving perfectly optimized images anyway.
But hey, by all means, if you feel it's necessary to have a 160k image on desktop, an 80k image on laptop, and 40k image on tablet and a 20k image on mobile, go right ahead and adhere to the so-called "best practices." Save that extra .3 seconds. Cater to the folks in Iceland and Tibet who are stuck on 2G. I think it's a massive expenditure of time and effort for very little gain that, in 2-3 years (5 years at the outset), when 4G is ubiquitous and 5G is common, will have been wasted effort because everything will download instantly anyway.
What Printninja said. A while back I was saying differently, even in this same thread lol, but I've since decided that if an image is under 400k, which most are much under that, then that's good enough for me and my clients. I too use the same image in all screen sizes, unless an image is much too large at the large size, then I will make a single mobile size for both tablet and phone. Not one for each.
Maxwell has defined what we are asking for perfectly here: "Itās the automatic code generation for scaled versions of images Iām after" I already mentioned this comparison earlier, but as a comparison webflow have this exact feature: https://webflow.com/feature/responsive-images The reason I use BS is to speed up my workflow of building sites with bootstrap. This workflow includes creating responsive images for various devices (as this is part of building a responsive website in my world) without this I (and all developers I work with) wouldn't consider the build complete.<br /> You guys are arguing the general point that this isn't needed, I'm not disputing what is coming or google. What I'm saying is this a big sticking point in my process which requires resorting to external tools and therefore completely breaks the workflow. Having this feature would mean I can complete the entire build inside BS in a much quicker time.