Imagesharp: WebP Support

[KuroThing]

There appears to be no clear statement, regarding if WebP Encoding / Decoding will be added at any point in time. The only references to "WebP" i could find, was https://github.com/JimBobSquarePants/ImageSharp/issues/11#issuecomment-257134950, which i don't know if it holds any value.

WebP support isn't listed in anywhere meaningful like #10 (Codecs) or an unchecked item in Features like Tiff support is.

[JimBobSquarePants]

Hi @KuroThing

That will be because there is no WebP on the current roadmap. We're trying to replicate and improve on the functionality offered by System.Drawing for now. Once we have that, maybe.... maybe we might have a go at adding WebP.

[Jogai]

Expect more questions like this because google's lighthouse tool recomments webp or jpeg 2000/xr: https://developers.google.com/web/tools/lighthouse/audits/webp

[JimBobSquarePants]

They can recommend all they like, the browser support for those formats is terrible!

[ChrisBellew]

Any chance you could offer some comments on what's stopping this from moving forward, besides finding time to generously donate of course...perhaps someone from the community could have a go at adding support?

Are there license problems?
Is it going to be reaaaally hard?

Thanks :)

[JimBobSquarePants]

Is it going to be reaaaally hard?

😆

That's the one. I cannot imagine it's gonna be any easier than jpeg to do which has been brutal.

[Jogai]

It such a strange recommendation, firefox does support none of the formats.

@ChrisBellew Maybe jpeg 2000/xr is somewhat like the current jpeg support 😃

[ststeiger]

Firefox already supports webp.
But apparently, the people doing the release are incapable/unwilling of activating '--with-system-webp':.
Anyway, Firefox is very quickly becoming irrelevant.
Edge and IE already are, except for die-hard corporate environments with a backwards-compatiblity complex.
Chrome and Safari are really all that counts right now, and that will only get worse in the future.
And the way things are going for the overpriced iPad and the iPhone and other iCrap, Safari just might not going to stay around that much longer.

I'm going to throw a discrete party once that happens.
The real reason why webp isn't that successful, is webp itselfs.
https://news.ycombinator.com/item?id=13021845

But one thing that's going for webp is that we'd finally have 16 million color support for animated images - the archaic 256 color palette sported by gifs is really a disgrace in 2018.
Sure, you can use HTML5 videos to work around that, but using video formats for animated pictures is just even more stupid.

And despite the technical reasons, webm is an excellent format, simply because it's not covered by a plethora of bullshit patents, like mp*.

It's sad ogg and webm didn't establish themselfs because dickheads like Microsoft and Apple used those patents to keep out open-source. Their move/act-of-desperation to Linux/Unix today just goes a long way towards saying that their strategy failed epically, at least on the server.

Just look at all the hassle you have to go through if you want to write/release an application that supports mp3/mp4.

Sadly, that means we will only ever have windows/OsX support for webp by the time there is Office/AppleWorks for Linux.

But as Chromebooks outsell both iPad and traditional laptop sales by volume, rest assured - that day will come - eventually.
And so will the day that google-docs in offline-mode reaches feature-parity with ms-office.
The day of reckoning, so to say.

[simeyla]

They can recommend all they like, the browser support for those formats is terrible!

@JimBobSquarePants That is precisely WHY many people use a library like this. Because they need to automate the creation of JPG / WEBP / PNG files based on inconsistent browser support.

I need transparency, and I've been astonished as to how good WEBP is at keeping the filesize low. This works for all my Chrome desktop and mobile users. Then I need to create quantified PNG for Safari / IE separately. You guys are talking as if lack of support means you can't use it at all, but with a PICTURE element you just throw them both in and you're done.

Again, this is the whole reason I'm even looking at this because I need to auto-generate both and be able to change parameters easy to get best quality to filesize possible.

[JimBobSquarePants]

@simeyla

That is precisely WHY many people use a library like this. Because they need to automate the creation of JPG / WEBP / PNG files based on inconsistent browser support.

In your opinion. Plenty of other applications for this library actually. Web dev is a small fish in a big pond.

If you need transparency have you investigated palletized png's? You shouldn't be using png for photo style images anyway, it's the wrong format.

I don't need WebP just now and it's both incredibly complicated and way down my priority list so if you want it, submit a PR and get things moving.

@ststeiger

Firefox already supports webp.

No it doesn't. It has a partially complete leaky decoder.

[simeyla]

@JimBobSquarePants 'Many' is an ambiguous term I realize! I mentioned it mainly because it seemed ironic you seemed to be 'writing off' WebP for lack of browser support when the <picture> tag exists and your library makes it super easy to create images in different formats ;-)

I am using palletized PNGs with alpha. Fortunately the images I need alpha for (3d renders) are very well suited to this (and I'm fine tuning them based on number of colors). In my tests I'm been quite amazed how well WebP is working and I have a very high percentage of Chrome / Android users so I was looking for a way to support all of them.

I'm very glad to see libraries like yours existing and being actively worked on, but also somewhat disappointed in Microsoft that they don't have anything to offer themselves. I started using NodeServices to link to Javascript libraries and while I've got it up and running it's caused more than a few headaches this week piecing everything together.

Thanks for your reply. Hope to be able to use your library soon for some other parts of the site :)

[ststeiger]

@simeyla: SkiaSharp does support WebP, so just use it for that. As long as you deploy the application in an environment you control, the native library for Skia is not a problem.

Example here.
just change
using (SKData p = img.Encode(SKImageEncodeFormat.Png, 100))
to
using (SKData p = img.Encode(SKImageEncodeFormat.Webp, 100))

and return the image as byte-array/stream/streamresult.

[martonx]

As I see Firefox will completly support webP in two months. Latest MS Edge support webp also. So only Safari (as always…) will lack support of webp. So please warm up again this thread, and add webp support into ImageSharp. If I can help in anything about webp support (except the concrete development), please contact with me!

[JimBobSquarePants]

@martonx I'm afraid concrete development would be exactly the help we would require just now. Supporting the format will definitely be a focus post V1 but we cannot apply any effort towards it just now as we simply don't have the people and time.

[martonx]

Thank you very much! And again, if I can help to test / anything except concrete development, please contact with me.

[ststeiger]

I am interestet in coding this.
I just don't know if I will have the time.

Note for anybody interested:
There is a simple Java-Decoder here:
https://sourceforge.net/p/javavp8decoder/code/ci/master/tree/src/net/sf/javavp8decoder/imageio/

git clone https://git.code.sf.net/p/javavp8decoder/code javavp8decoder-code

JCodec also has an encoder and decoder:
http://jcodec.org/
https://github.com/jcodec/jcodec

And there is an encoder & decoder written in go here:
https://github.com/chai2010/webp
Usage:
https://stackoverflow.com/questions/8340751/webp-encoder-decoder-in-go

Simple decoder in go:
https://github.com/golang/image/blob/master/webp/decode.go

[JimBobSquarePants]

Thanks @ststeiger 👍

If you get around to making a start before we do please let us know and we'll provide any assistance you require.

[martonx]

Do you have any news for this ticket?

[JimBobSquarePants]

@martonx No movement I'm afraid.

[ErcinDedeoglu]

Watching.

[brianpopow]

I am working on support for webp. So far decoding of lossless images is almost done. I will continue with decoding lossy after that. Its still alot of work to do, though. We have a gitter subchannel Formats, where i post regular updates on this.

[lofcz]

@brianpopow any updates? Really looking forward this

[brianpopow]

@lofcz so far lossless decoding works fine now. Im in the middle of implementing decoding lossy images. Im making progress every day, but its hard to estimate when it will be done. I guess i have 50% done for decoding lossy images so far.

After that there is still the encoding part which i need to tackle. This will also take some time.

[stevetemple]

This would be super useful for us, thanks @brianpopow for tackling it

[antonfirsov]

@stevetemple @lofcz @martonx and everyone else watching this issue:
what is more important to you, saving or loading WebP files?

[stevetemple]

I'm interested in converting to WebP so saving/encoding for me

[lofcz]

Loading for me as I'm able to serialize to webp already via other tools. @antonfirsov

[ststeiger]

@antonfirsov: Fundamentally, loading would be more important.
Because if a user uploads a webp-image, I have to be able to handle it, and system.drawing does not do that.

However, entirely practically, users rarely use webp, since Windows does not support it.
So you'll only ever need it to dynamically save to WebP, because WebP offers 25 – 35% smaller file sizes than jpeg at the exact same quality. Also, it's a nice format for animated graphics (for that, one can use motion-jpeg/mp4 instead), and unlike gif, WebP supports the full color range, including transparency. which also makes it a replacement for png.

Which means I'd focus on saving.

[claunia]

My particular need is to take TIFF photos and convert them to WebP for web serving, so I need the ability to save, in both lossy and lossless.

[ststeiger]

@claunia: Does that mean WebP also supports the kind of paging like tiff ?
Or do you just save it into multiple webp images ?

[claunia]

@ststeiger the TIFFs I intend to import are single images from scanners or DSLRs (and these can have wide color gamuts). I don't know if WebP supports multi image (contrary to animation) like HEIF and AVIF do, but they're definitively not my worry in the near future.

[Stryxus]

This is the only thing holding up the development of my projects web optimization/delivery app.

I put images into my website (preferably uncompressed) and then the app converts/compresses them down to WebP. I do this because im trying to optimize my projects website as much as possible on a small as possible budget. Sadly i cant find any alternatives for this operation.

[Flarescape]

@Stryxus In the meantime have a look at googles libwebp.
https://developers.google.com/speed/webp
I've made a simple service that uses the cwebp.exe with parameters to convert my images to webp files and it works really fast and well.
It's well documented and you have the option for very specific settings.

[Stryxus]

@Flarescape Iv been trying to stay away from it but i might have to at this point. Thnx though.

[ststeiger]

@Stryxus: You could try libwebp with C++.NET.
Maybe that works for you, in order to not create a C# wrapper around it.

Or the libwebp C# wrapper:
https://github.com/imazen/libwebp-net

[Stryxus]

@Flarescape Luckily, a friend provided some wrapper code after asking around some more. It was old but i updated it a little. Will be using that until its available here.

[ststeiger]

@Stryxus: If you copy just in the right moment, you might get it before the license switches to AGPL.

[andrei-m-code]

@brianpopow Thanks for working on this! I'm still looking forward for the support of webp. I have to go through crazy workarounds only for this specific format. Are there any updates? Do you need help?

[brianpopow]

@andrei-m-code At the moment decoding lossy and lossless webp images work so far.

Im working since quite some time now on encoding lossless webp. I made good progress with it, but its not done yet.
I would estimate i have done 80% so far, so i think i get a first version done soon, but there are still quite a few TODO's left.

When lossless encoding is done, i would need help to test different image compression ratio's to the reference implementation.
Also help with writing unit tests would be welcome. I have tests for the decoding part, but the encoding part has none yet.
If you like to help you can contact me at gitter in our subchannel formats: https://gitter.im/ImageSharp/Formats
Not sure though how long we will keep up the gitter channels. We are currently in the process
of migrating all communication over to github Discussions: https://github.com/SixLabors/ImageSharp/discussions

I have not started lossy encoding yet and do expect that it will be as time consuming as lossless was.

[douglasg14b]

RIP.

We have TONS of webp assets, and just ran into this problem in test. Made the incorrect assumption that most common image types would work out of the box, at least for identification for IImageFormat and to get width/height, not necessarily for manipulation.

Mistakes where made... Looks like tga, bmp, gif, jpeg, and png are the supported types for ANY level of use.

Hope to see this update in the future.

[JimBobSquarePants]

@douglasg14b You can help! The more people we get looking at and working on the code the better.

[3400442579]

support encoder?

[JimBobSquarePants]

@3400442579 PR?

[3400442579]

https://github.com/SixLabors/ImageSharp/tree/webp
support WebPEncode?

[Jogai]

https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/
@3400442579 make pull request?

[brianpopow]

https://github.com/SixLabors/ImageSharp/tree/webp
support WebPEncode?

What i said in my last post still stands. Lossless encoding is almost done (i did not push the changes yet since its not ready yet). Unfortunately i could not find time over the last weeks to continue. I hope i can continue next week again, but as i said before: lossy encoding is not even started yet and this will be a big task.

[JimBobSquarePants]

@brianpopow let’s open up a new WIP PR and hopefully people will be able to both help and better track progress.

[MRSessions]

I noticed that the PR is up for this. I haven't followed ImageSharp for long, so not sure the workflow for PRs is. What is pending for this to be completed? This is something we are looking forward to implementing in a project I'm working on.

[JimBobSquarePants]

@MRSessions I'm assuming reading wasn't on your list of things to do today?

[molinch]

@JimBobSquarePants would using bindings on top of Google webp library be an acceptable solution?
Using bait and switch we could provide a webp library for linux/windows/other

Downside of this approach is that it's not purely managed, however features can quickly be added

[JimBobSquarePants]

@molinch We're actually making fantastic progress with the managed implementation.

https://github.com/SixLabors/ImageSharp/pull/1271#issuecomment-664004585

@brianpopow has gotten a bit of help from @stevetemple and am sure would appreciate any more.

Bindings, on the surface look like a reasonable solution but don't allow us the flexibility we require to work with multiple pixel formats in a performant manner plus they add a huge level of complexity to deployment.

[stevetemple]

I was planning on finishing up the bits I've started tonight and that should get us pretty close to having a working lossless encoder that matches the reference implementation in size of file produced. It'll need a bunch of refactoring and tests. Lossless is a bit further off by the looks of it, but good progress is being made.

[JwanKhalaf]

Hi folks 👋

In the .NET Core application I am working on. I have a requirement where an uploaded jpeg is to be resized, then saved as a .webp format into S3 on AWS.

Can we have an update on the status of webp in ImageSharp, please? Browser support is really picking up. Safari will be supporting webp soon. Firefox and Chrome/Edge already do.

Also, many thanks for your efforts with this library. Your hard work is super appreciated ❤

[JimBobSquarePants]

@JwanKhalaf There's an open (work in progress) PR. https://github.com/SixLabors/ImageSharp/pull/1271

You can see the status there. Code contributions welcome.

[RouR]

PR #1271 is done.
PR #1552 is waiting to merge.
I hope it will be done soon.

[JimBobSquarePants]

Yep, we're very close! We need to do a final performance and API sanity check though.

I've already identified performance issues with Huffman decoding/encoding but we need to document them via profiling to allow work to be done there.

If anyone reading this thread want to profile encoding and encoding and add the info here that would be great. Better yet, if someone want to do some performance work in that area we can finally get it over the line!