Sharpening Images

From the first day I released EWWW IO back in 2012, I've always been concerned about image quality. Back then, everything was all about lossless compression, but within a couple years we found lossy algorithms from folks like JPEGmini and TinyPNG (now Tinify) that were quite exceptional at preserving quality.

However, something that has slipped under the radar is the quality of image thumbnails (including the large, medium, and other sizes) that are generated by WordPress. The trade-off (in core) has always been to make thumbnail generation faster and less resource intensive, which has resulted in a lack of detail in the various sizes that are typically displayed on your website.

But no more! With EWWW IO 6.6, you can take advantage of advanced sharpening techniques when you enable Sharpen Images on the Advanced EWWW IO settings. *Don't see the Advanced tab? Enable Ludicrous Mode, and you'll find more options that you can shake a stick at!

Note that this option does not affect the compression/optimization done by EWWW IO in general, it is mainly to improve the thumbnail generation and image resizing done by WordPress core.

So what does Sharpen Images do?

First, it enables the use of the adaptiveSharpenImage() function for ImageMagick. If your site is using GD, it won't do anything at all, so ask your web host how to enable the ImageMagick module in PHP before you go any further. The adaptiveSharpenImage() function is run after an image is resized though, so Sharpen Images does one more thing, which is to change the default "filter" used by WP & IM from "triangle" to "Lanczos". If you really want to know more about what those do, ask Google and you'll get more than you bargained for. But in short, using Lanczos greatly improves the resulting quality of the image resizing process.

Secondly, if you're using WebP Conversion, whether free, API-based, or via the Easy IO CDN, Sharpen Images enables the use of the -sharp_yuv flag. I won't bore you with all the details, but again, it's all about improving the detail in JPG to WebP conversion.

Caveats

As we noted above, the first drawback to these settings is that enhanced sharpening uses more resources, and thus causes thumbnail generation to take longer. So if your image uploads start timing out all of a sudden, you might have to disable Sharpen Images for some (or all) of your future uploads.

The second drawback is increased file size. More detailed images take more bits to store that detail, and so you can expect up to 10% of an increase in file size.

Lastly, these changes aren't retroactive. If you want to improve the quality of your existing images, you'll need to run a (forced) thumbnail regeneration. Start with just a few, to make sure your server can handle the extra resource consumption. Once you're confident that it isn't overloading your server, go ahead and regenerate your whole library. Also note that thumbnail regeneration will trigger a re-optimization of all those images since they're going to be "brand new" images.

The one exception to that, is with Easy IO, because it adds a sharp=1 parameter to all the image URLs. Thus, as soon as you enable Sharpen Images, all your WebP images will have improved sharpening applied on-the-fly.

Oh, but there's more!

All the improvements to the WP resizing process are enabled by EWWW IO extending the core WP_Image_Editor_Imagick class, which adds a whole bunch of filters. So if you want to really dig in, you can take a look at all the available filters and make your own experiments with the sharpening functions/settings.