1171
Google's WebP (lemmy.ml)
you are viewing a single comment's thread
view the rest of the comments
[-] Olissipo@programming.dev 68 points 2 weeks ago* (last edited 2 weeks ago)

I'm working on a project which generates images in multiples sizes, and also converts to WEBP and AVIF.

The difference in file size is significant. It might not matter to you, but it matters to a lot of people.

Here's an example (the filename is the width):

Also, using the <picture></picture> element, if the users' browsers don't support (or block) AVIF/WEBP, the original format is used. No harm in using them.

(I know this is a meme post, but some people are taking it seriously)

[-] JDPoZ@lemmy.world 23 points 2 weeks ago

I've mentioned this topic in regards to animated images, but don't see as big a reason to push for static formats due to the overall relatively limited benefits other than wider gamut and marginally smaller file size (percentage wise they are significant, but 2KB vs 200KB is paltry on even a terrible connection in the 2000s).

What I really wish is that we could get more browsers, sites, and apps to universally support more modern formats to replace the overly bloated terribly performing and never correctly pronounced animated formats like GIF with something else like AVIF, webm, webp (this was a roughly ~60MB GIF, and becomes a 1MB WEBP with better performance), or even something like APNG...

Besides wider gamut, and better performance, the sizes are actually significant on all but the fastest connections and save sites on both storage and bandwidth at significant scale compared to the mere KB of change that a static modern asset has.

This WEBP is only 800KB but only shows up on some server instances since not every Lemmy host supports embedding them :

[-] Oaksey@lemmy.world 6 points 2 weeks ago

It's pronounced GIF

[-] ICastFist@programming.dev 3 points 2 weeks ago

Is that last webp animated? Asking because I know jerboa (Lemmy client) doesn't play animated images

[-] zSpider@lemmy.zip 5 points 2 weeks ago

It's animated for me using Thunder

[-] purplemonkeymad@programming.dev 3 points 2 weeks ago

Yea, it's animated for me on a web client. Looks quite good tbh.

[-] Olissipo@programming.dev 3 points 2 weeks ago* (last edited 2 weeks ago)

but 2KB vs 200KB is paltry on even a terrible connection in the 2000s).

You still need to resize the images and choose the right ones (even if only for the device's performance).

So we might as well do that small extra step and add conversion to the process.

What I really wish is that we could get more browsers, sites, and apps to universally support more modern formats to replace the overly bloated terribly performing and never correctly pronounced animated formats like GIF with something else like AVIF, webm, webp (this was a roughly ~60MB GIF, and becomes a 1MB WEBP with better performance), or even something like APNG…

Isn't that the users' fault? And of the websites for allowing those huge GIFs.

Apparently browsers have supported MP4 for a long time.

https://caniuse.com/mpeg4

[-] SpaghettiYeti@lemmy.world 1 points 2 weeks ago

How are you auto converting images to webp?? What is this magic. My company uses Visual Studio 2022 and our creative guy is having to save everything manually in multiple formats. Then our devs put in the webp first with a jpeg fallback, but it's all so manual.

[-] Olissipo@programming.dev 3 points 2 weeks ago* (last edited 2 weeks ago)

Funny you call it magic, what actually does the conversion is Imagick.

In my project I have it integrated in the upload process. You upload a PNG/JPG and it does its thing. Since it's written in PHP (my project), and PHP has an extension to call Imagick, I didn't need to write any complicated code.

You can see on this page if your programming language of choice has any integration with Imagick.

But there's always the command line interface. Depending on your process it may be easier to create a script to "convert all images in a folder", for example.

[-] ILikeBoobies@lemmy.ca 13 points 2 weeks ago

But why webp over jxl

We already have the solution

[-] AdrianTheFrog@lemmy.world 9 points 2 weeks ago* (last edited 2 weeks ago)

Webp is supported in browsers. Jxl is not, unfortunately.

(Well, I have the Firefox extension for it, but most people can't see them...)

People should still use it tho, with the fallback of webp or avif

[-] ILikeBoobies@lemmy.ca 2 points 2 weeks ago* (last edited 2 weeks ago)

Firefox just hasn’t enabled the setting (well they haven’t made the setting enable jxl support yet even though the setting and support has been there for years). This means their forks support it, that’s why I switched to Waterfox

Safari supports it

Chromium removed support for it 2 years ago to push webp but it’s just a reminder to not use Chromium browsers

[-] Aux@feddit.uk -1 points 2 weeks ago

Because jxl is a bunch of bollocks. There's no way it will gain any support any time soon.

[-] TwistyLex@discuss.tchncs.de 8 points 2 weeks ago

Literally just today solved a problem of delivering analytics plots over our internal chat system. The file size limit is 28Kb and I was just getting ready to say screw it, can't be done.

Lo and behold our chat system that doesn't support svg does support webp. Even visually complicated charts come in just below the size limit with webp.

[-] vvvvv@lemmy.world 4 points 2 weeks ago
[-] TwistyLex@discuss.tchncs.de 4 points 2 weeks ago

Honestly no idea. It's funny though. The API allows us to either read it directly from our lakehouse with the 28Kb limit, or allows us to encode it in a json object. It actually recommends using the json method if we want to send larger files... but then complains it's too large if it's over 28Kb 🤷‍♂️

I think it was probably originally only intended to allow attaching icons.

[-] bamboo@lemmy.blahaj.zone 3 points 2 weeks ago

Feels like a bug where someone forgot the 1 in 128kb. What chat app is this?? In Slack, custom emojis can be up to 128kb in filesize

[-] TwistyLex@discuss.tchncs.de 2 points 2 weeks ago

It's apparently PowerAutomate Adaptive cards.

[-] TwistyLex@discuss.tchncs.de 2 points 2 weeks ago

It's MS Teams with their PowerAutomate flows from Fabric. The limitation might not exist in the direct rest API, which I could have used through Python; but it's a hackathon, and my other team mates know PowerAutomate. Faster if we each coordinate using what we're good with.

[-] TrickDacy@lemmy.world 5 points 2 weeks ago

I'm mad tho! I have technical issues with a format that works for hundreds of millions of users daily with the only impact being their website loads faster! RAGE!

[-] macaw_dean_settle@lemmy.world 4 points 2 weeks ago

Just use jxl; it is better and not created by shitty googol.

[-] Thorry84@feddit.nl 3 points 2 weeks ago

How is the size difference after gzip compression? Probably pretty much the same, but I wonder how large the difference is then. Since a lot of folk make sure the contents is gzipped when served to the user.

[-] Olissipo@programming.dev 6 points 2 weeks ago

Even using the highest compression levels, barely any difference. Not worth it

If I understand correctly gzip, brotli and similar are best used to compress text.

Font files also shouldn't be compressed. A TTF file compresses a bit, but a WOFF2 file will be even smaller than that (and WOFF2 also doesn't compress well). So might as well use WOFF/WOFF2

[-] Thorry84@feddit.nl 3 points 2 weeks ago

Thanks, very interesting results

[-] vvvvv@lemmy.world 2 points 2 weeks ago

If I understand correctly gzip, brotli and similar are best used to compress text.

Compression algos should be used on uncompressed data. Using them on already compressed data (most video, images, music formats) is generally useless.

[-] Fabian@lemmy.zip 2 points 2 weeks ago

I don't know if the client is the issue, but I am using the Voyager android app and this image failed to load

[-] InnerScientist@lemmy.world 5 points 2 weeks ago

Works for me with Voyager on mobile.

[-] Fabian@lemmy.zip 1 points 2 weeks ago

Now that I view your reply it loaded. It seemed to be another problem. Sometimes images just don't want to load

[-] Olissipo@programming.dev 1 points 2 weeks ago

In case you still can't load the image, for the largest width the JPG file has 229.9KB, WEBP has 123.5KB, AVIF has 72KB.

[-] Valmond@lemmy.world 2 points 2 weeks ago

Is the quality the same? If so how do you know? I mean it's better, I'm just curious.

[-] ILikeBoobies@lemmy.ca 5 points 2 weeks ago* (last edited 2 weeks ago)

Tldr: as we deal with a problem long enough we find more effective ways of dealing with it

https://jpegxl.info/

Has some info on what it does

https://en.m.wikipedia.org/wiki/JPEG_XL

Technically details might be more what you are looking for

https://jpegxl.info/resources/jpeg-xl-test-page

And a test page, if you don’t see jxl images then you should look at updating your browser

[-] Valmond@lemmy.world 1 points 2 weeks ago

So you have no hard proof (no critic here, I'm just curious)? Not that it's better but that your test images has the same quality.

For the rest, thank you for the links and the time but that only explains how the compression works.

If you want to know you could do fourier transform and see which kind of signals are cut out in one for example.

[-] ILikeBoobies@lemmy.ca 1 points 2 weeks ago* (last edited 2 weeks ago)

Quality improvements are that you can upload/download it without getting artifacts/pixel bleeding. JXL’s algorithm ensures that it’s a 1 to 1 transfer

But if I draw a stick person 512x512, there isn’t an image format that will make it anymore than it is. That’s why we look at compression

[-] Aux@feddit.uk -1 points 2 weeks ago

There are no browsers with jxl support and won't be for many years to come.

[-] ILikeBoobies@lemmy.ca 0 points 2 weeks ago
[-] Aux@feddit.uk -1 points 2 weeks ago

Again - no browsers support jxl. Firefox "support" is only basic rendering of a few basic features. It's not just browsers, there is literally no software which fully supports jxl. And won't be for a long time.

[-] Olissipo@programming.dev 2 points 2 weeks ago

For most of the images that I tried you can only see differences with the images side by side. It's really subtle.

I do have one example for which my config must be bad, compresses a lot but introduces a lot of noise

this post was submitted on 21 May 2025
1171 points (98.1% liked)

memes

15293 readers
3537 users here now

Community rules

1. Be civilNo trolling, bigotry or other insulting / annoying behaviour

2. No politicsThis is non-politics community. For political memes please go to !politicalmemes@lemmy.world

3. No recent repostsCheck for reposts when posting a meme, you can only repost after 1 month

4. No botsNo bots without the express approval of the mods or the admins

5. No Spam/AdsNo advertisements or spam. This is an instance rule and the only way to live.

A collection of some classic Lemmy memes for your enjoyment

Sister communities

founded 2 years ago
MODERATORS