How to Make WebP Images Less Blurry

Share

2024-09-23

One problem with the WebP image format is that if you try to export an image that has very thin, sharp lines, specially red lines, they'll become blurry, and the bright red will become dark red. This is due to WebP's compression algorithm discarding red chroma information. Such high levels of red chroma aren't commonly found in photos, but it's very easy to create a diagram or infographic in Photoshop or Inkscape with bright red lines that end up looking worse than they would in JPEG. This is terrible because WebP is a great replacement for PNG, but you can't really use it if it produces such poor quality results. Fortunately, there is a way to fix this, and export as WebP in a way that preserves the red chroma.

To do this, we need to use the WebP's library flag sharp_yuv, which means we need an application that lets use set that option through a GUI. This option is available in GIMP, but only in version 2.99, which is unstable. It will be available in GIMP 3.0 when it gets released (I've been waiting for that for 6 months now). It isn't available in GIMP 2.10, so you need to download the unstable version of GIMP to use it.

When you export as WebP through GIMP 2.99, you'll have in the export dialog a checkbox for "Sharp YUV." Checking it uses a different algorithm to compress the image that produces less blurry results. It's not perfect, but it's a vast improvement over the default algorithm.

The word "text" and a rectangle in red saved in four ways and scaled up to show the differences between compression algorithms. The first method, lossless WebP, produced a 342 byte file. The second method, WebP with 90 quality, 756 bytes, but the red became dark red and the lines became blurry. The third method, WebP, 90 quality, with sharp YUV, 792 bytes, and is less blurry and less dark but not exactly the same as the lossless version. The last method, JPEG, 50 quality, 1105 bytes, produces a sharp result, but with larger file size and noticeable JPG artifacts. — A comparison between an image compress with WebP in lossless mode, lossy mode with 90 quality, and lossy mode with 90 quality and Sharp YUV option enabled, and with JPEG instead. Observe that JPEG has the sharpest lossy results, but produces larger file sizes and noticeable artifacts. Sharp YUV decreases blurriness, but it's still a bit blurry. The lossless algorithm can produced a smaller image in this case because the image was very small to begin with, the lossy algorithms have better compression rates with larger images.

Observations

Useless Setting?: I expected changing the "Source type" in GIMP from Default to Icon or Text to solve the blurriness problem, but it doesn't seem to do anything at all. I'm not quite sure what this setting is for, honestly.

Comments

One response to “How to Make WebP Images Less Blurry”

CmykStudent

2024-09-24

Hi! I'm one of the volunteer developers for GIMP. Glad the SharpYUV feature is helpful (it was added by user request in https://gitlab.gnome.org/GNOME/gimp/-/issues/8110)

Since you mentioned it, all the options for exporting WebP images in GIMP come from Google's WebP code library. The "Source Type" is used in the library's WebPConfigPreset () function - basically, it sets some default quality values for export. All we do in GIMP is set it in Google's library to whatever the user selects - beyond that, it's not something we have control over.

Reply

Observations

Comments

One response to “How to Make WebP Images Less Blurry”

Leave a Reply Cancel reply