Hey guys, We need to get support for WebP images. The almighty Google, (give thanks and praise) is advocating websites usage of WebP images for faster download times! At the moment there are no way of importing WebP images into Bootstrap Studio!
All the Best, Liam
I wouldn't jump on the WebP format so quickly. Google has been advocating WebP for five years now. It hasn't caught on for a number of reasons, backward compatibility and universal support being two big ones. Facebook even rejected the standard because users didn't like downloading images they couldn't do anything with.
Google is sort of obsessed with "running" the web, and while they have many good ideas, they're not all-knowing. Right now, mobile speed (bandwidth) and storage are still concerns, kind of how hard drive storage was a big deal a decade ago. Once 5G becomes universal, cloud storage becomes ubiquitous, and data plan costs drop, people aren't even going to think about file sizes because the difference between a downloading a 3 meg image and a 300k image will be imperceptible.
Compression is a trade-off to band-aid developing technology. In time, compression of all file formats will go the way of the dinosaur.
I agree, WebP support would be nice. Google's speedtest is used by clients and it penalizes people for "insufficiently compressed images" which means they want WebP used. However, CloudFlare also supports WebP usage so it can't be all bad
@mgc
WebP is still not supported on Apple desktop, tablet or mobile devices, so it's basically useless as a graphics format.
Being an apple user for Desktop, iPad and iPhone, I will agree 100% with Printninja, not time for this support yet. Would rather see the time spent on other more prominent features that have been asked for way before this and should be supported already :P
Yes I see no reason why WebP is not alllowed. 60 % file size reduction at the same quality. Google has a script that tests for browser support so its easy to add a fallback for browsers like Safari and IE11. Heck, have two data-srcsets and lazy load both conditionaly loading jpg and WebP and still use the wonderful srcset....no picture element.
Again, no reason that this format should NOT be allowed. Perfectly safe.
@Twinstream
Cost vs benefits. Google wants everything on the web to be as minimized as possible because it saves THEM money. In the real world, it all boils down to, "are your clients going to benefit?"
How is cloud based image hosting going to solve the lack of WebP support in Bootstrap Studio?
People need to understand that Google has a vested interest in making everything on the web as small, compressed and fast as it can be, regardless of whether it's best for users, because it saves them throughput which reduces their search costs. Ten years ago they bought the company that came up with the WebP compression algorithm, so naturally they'd love to see it embraced so their investment pays off. They implemented WebP across YouTube for all their thumbnails and saved a whopping 10%. Significant when you're YouTube with millions of thumbnails. Trivial for most other people.
Next problem: while WebP does, in many (but not all) cases result in slightly smaller image sizes with little to no compromise in quality, it still lacks universal support (even after being around for almost ten years.) And this assumes you're starting with uncompressed, raw image files and converting to a compressed format. Going from .jpg to WebP is a dicey affair. Furthemore, when dealing with alpha channels (24bit PNGs) WebP images are always larger.
Third problem: WebP images are kinda useless when it comes to sharing. You can't easily view them in native Windows apps, you can't edit them in Photoshop (without a plug-in), and you can't send them to your friends with Apple products.
So it boils down to costs vs benefits. Do your really want to code jpg fallbacks for all your WebP images for the Apple and IE crowd just to enjoy a small amount of data savings for Chrome and Firefox users on certain larger images (assuming your site has lots of large photos and is not specifically a photography site (in which you'd generally stay away from any compressed format for your images.)
IMO, lazy loading is a simpler solution.
After ten years, if the format had merit, it would have already been adopted universally.
Hey, just to mention that we are adding WebP support in Bootstrap Studio 5. I hope that it will find its way to Safari eventually. Until then, it is best to treat it as an experimental format.
Hello I have problems with Firefox I have some text and right next to it there is a picture. It should look like this. https://drive.google.com/file/d/1CenvuHXuY8uz4cn9_mlRXbT1BQqkTOfl/view?usp=sharing
but in firefox it looks like this
https://drive.google.com/file/d/16Db0UkZblRs4LU5en_nGP7nNF3CCkCQ3/view?usp=sharing
these are settings for picture .cover { height: max-content; object-fit: cover; object-position: left; }
Those things are in row with 3 columns (1 for heading ,1 for picture and 1 for "description"). it should be like that because of mobile version. The problem is only on firefox. Any ideas how to solve it?
Hi I'm using bootstrap studio 5.4.1. How do I access the WebP Support?
@azrinsani that's my workflow:
when Iām done editing I save (jpg from photoshop) with 100% quality and keep the original + final-uncompressed in my customer folder. Then I open squoosh and I compress the image using MozJpeg, Webp and Avif.
Then I use the picture tag to insert the 3 formats in my website HTML or a small .js snippet to create the .webp and .avif classes to add support for my images into CSS. That at least for the home page and images in the hot path.
atm AVIF images are not directly supported (stage, preview, picker etc) but they will be soon
Thanls, but it seems like a hell lot of work if you have a lot of images on the website!
Thanls, but it seems like a hell lot of work if you have a lot of images on the website!
Agreed, which is why I don't get why people make such an effort to reduce image file size when the whole problem will be moot in a couple of years. Once gigabit download speeds become standard, all the effort and time that's being put into coding screen-size dependent images (not to mention all the effort that goes into inventing new compression technologies) will be pointless.
Unless you KNOW your clients are stuck on slow 3G or DLS connections, I don't even see the point in stressing over image jpg vs webp.
In an ideal world, we should want to deliver the highest quality content... (eg. uncompressed FLACs not compressed MP3s)... deliver the highest resolutions, the highest bitrates, etc. Compression is a horrible band-aid that was invented for a problem (limited bandwidth/throughput) that is rapidly disappearing from the technological world.
Unless there's significant money to be made in keeping these technologies on life support, I think learning them is a waste of time.
Just my opinion.
Thanls, but it seems like a hell lot of work if you have a lot of images on the website!
I usually get paid for my work. Sometimes it's quite easy to make a fast site faster. If you can't afford to spend less than 5 minute per image, at least on the home page maybe you should get better customers.
Also (I'v heard) that google gives a slight SEO rank boost for sites that use WebP.
I seriously doubt they give an SEO boost strictly for using webp, since that would be clearly unfair to Apple as the Safari browser doesn't fully support webp yet.
Page load speed is a SERP metric, but it's minor compared to more significant on-page SEO metrics like titles, headings, keyword density and so on.
Some of the sites I use 30-40% maybe higher of the images are WebP, while it's not a format I use as a Photographer I think support is important. JPEG2000 with it's Fractal compression was never accepted and in all honesty I've never come across a file but WebP is becomng quite common.
Ian
Hi Guys, any news about the webp support?
Thanks