The important question: how does a WebP encoded screenshot look? if there's a huge field of a single color and some text written on the field, are there visible artifacts all around the text? This is a use case for PNG, and one where people can plainly see why a lossless format exists.
A deceptively hard to answer question!
Why is it hard?
Because both jpeg and WebP (which is really just a VP8 intra frame) can represent images with a variable amount of bits.
But it gets even trickier! How do you measure "savings"? Certainly you can produce 2 images with the same (or similar) bitrates with both webp and jpeg, but how do you say one is better than the other? How can you lower webp's bitrate until it's "quality" measure is the same as jpeg?
Quality metrics such as PSNR, SSIM, and VMAF all exist to try to give a "quality" metric. However, they all have their own flaws that allow an image compression format to get worse subjective quality will improving their objective score (For example, codecs that optimize for PSNR tend to be more blurry than codecs that target SSIM. Grass ends up looking like big blobs of green).
In fact, because x264 was often being beat by other codecs in those metrics they went out of their way to add "cheat" modes for the encoder! You can tell x264 to target PSNR or SSIM :D. Neither are the default.
Just some fun thoughts. Subjectively, I'd say WebP and the newer AVIF or HEIF does a better job than Jpeg (to my eyes). However, I could see why others might disagree.
“WebP seems to have about 10% better compression compared to libjpeg in most cases, except with 1500px images where the compression is about equal.”[1]
mozjpeg JPEGs + AVIF in a <picture> element is the way to go now. You will probably always want to serve JPEGs as an alternative WebP and AVIF and that makes WebP is a waste of disk space for lossy compression of photographs.
I'm amazed the “WebP is such a goated format” blog post made in to the front page of HN.
WebP has a lossless mode for that reason, and is almost a strict improvement over PNG [1].
At high quality settings jpeg is still pretty good for 8 bit photos. Newer formats support higher bit depths.
But no. He DOES in fact compare lossy to lossless in the end, arguing the difference is hardly perceptible anyway. Which it is! I could see the loss of chroma when opening them on my desktop here. I don't understand. JPEG also compresses a photo better than PNG? What's the point?
This is just confusing. Sure, for personal use, do whatever you like, but in a comparison...
It would be interesting to see WebP Lossless vs PNGOUT. And/or WebP vs Mozjpeg. :)
> However, the big point here is that without doing any of that, WebP seems to keep the quality I prefer while also reducing the size (doesn’t matter to me whether it’s lossy or lossless).
I want to note that there are formats that are meant to supersede WebP, such as AVIF and JPEG XL, however, AVIF (69.25%, I also mainly use Safari) [1] and JPEG XL (0%) [2] are not as nearly adopted as WebP is (91.38%) [3]. Usage taken on April 13th, 2022. Also, get a browser released after 2013.
[1] https://caniuse.com/avif [2] https://caniuse.com/jpegxl [3] https://caniuse.com/webp
When the color management is better I'll return.
https://github.com/johnnyreilly/blog.johnnyreilly.com/pull/1...
The html looks something like this:
<figure>
<picture>
<!-- Load webp if browser supports it -->
<source media="(max-width: 500px)"
data-srcset="image.webp"
type="image/webp">
<!-- Load jpg if browser doesn't support webp -->
<source media="(max-width: 500px)"
data-srcset="image.jpg"
type="image/jpeg">
<!-- Fallback to this -->
<img src="image.jpg">
</picture>
</figure>
I process images on upload to be available in multiple sizes and formats. I serve webp first since the (normally) smaller size makes the page faster for users.https://addons.mozilla.org/en-US/firefox/addon/dont-accept-w...
No it doesn't. What are you referring to?
First, not entirely sure what "goated" means, but whatever floats your boat.
Next, comparing a lossless format like PNG against a lossy format like webp ... what's the point unless all of his webp files are losslessly compressed.
Last, if one wants to dive down the lossy image format rabbit hole, then webp is definitely very old news, jpeg XL [1][2] is - for example - much more cutting edge.
Not much value in this article.
[1] https://jpeg.org/jpegxl/ [2] https://github.com/libjxl/libjxl
WebP matters because it’s supported by every browser and by every image editor worth using.
We still don’t know if JPEG XL will survive or die like XR did. After all, it’s competitor AVIF already works everywhere except Safari.
Still, it's extremely light and is much better than JPG for photos and PNG for simpler visuals. You can easily shave off an extra 50% file size off a standard optimized PNG image without any incurring any significant loss of quality, and even more if you're ready to accept higher losses.
For Linux Mint users out there, the OS doesn't ship with an image viewer for the WebP format. qView is a really nice open source option Mint users may want to look into. You can also find Nemo file manager right-click actions on Github (Linux Mint Nemo WebP Converter Actions).
This comparison doesn't make sense even if I ignore the fact all photos regardless of format are extremely oversaturated to the point it almost hurt my eyes.
however AVIF only has about 65% market penetration.
If you ran a serious webserver, it would make more sense to do automatic on the fly conversion using mod_pagespeed. This way it handles browser support for you.
I just changed one to .wbp to test with paint.net. The Open File dialog doesn't even have a mask that allows me to show the file. Dragging and dropping resulted in the program complaining, "The image type is not recognized, and cannot be opened" despite WebP having a recognizable header. But I lay that at the feet of the application, not the format.
In the end, it's okay to be a little small sometimes. I've held grudges for less myself.
That said, interesting, didnt know about webp. Wont use it, but cool ;)