Optimize compression levels for WebP, test file sizes vs. JPEGs

[adamsilverstein]

Trac ticket: https://core.trac.wordpress.org/ticket/54356

[getsource]

I'm doing some exploration here to see if we can adapt https://github.com/cramforce/avif-webp-quality-setting to get the data we need.

[mehigh]

Good read on the topic:
https://www.baekdal.com/thoughts/retina-displays-and-file-sizes/

Having a second option for compression for @2x+ retinas might be useful.
And thinking from a simplicity's point of view, for example images >3000px in actual pixel width (assuming an implementation that doesn't deliver responsive srcsets,etc.) are probably the ones where the biggest impact can a more aggressive compression apply to in order to really make a difference.

Did a test for a couple of ±1000px images at 75% quality webp yielded 30-35K, while a ±15% quality yielded 15-20K, which isn't a significant enough bump to warrant the complexity of the implementation.

[getsource]

@mehigh Thank you! This is really interesting.
Since you mentioned srcset, just in case the info is helpful: WordPress supports srcset natively, and the sizes should be automatically filled out with a set of thumbnails/generated sizes that are created on upload.

Some updates:
I got some initial results in this branch with Imagick before a break -- enough to find out that the method should work for us: https://github.com/getsource/avif-webp-quality-setting/tree/generate-with-wordpress

It's a very rough proof of concept at the moment.

I’m currently trying to get it to work with GD as well. Ran into a problem where GD in the WordPress Docker Environment doesn’t seem to support WebP on the default PHP, at least on my installation, so digging into that. As far as I'm aware, this was added back when WebP support was added to WordPress.

If you download that branch, and toss it in any sort of local server, you can view the results from the initial dataset by visiting index.html.

I’m hoping running it on GD, along with expanding the image set, will help verify those results.

On Imagick, initial results show the current default is close, anyway, but that different types of images change the optimal level, so a larger sample set of images would be helpful.

[getsource]

I've been making good progress here, and about ready to move the branch changes into main on my fork:
https://github.com/getsource/avif-webp-quality-setting/tree/generate-with-wordpress-gd

There's documentation there now, and it should be possible to use .env to set up to run on environments other than WordPress' Docker development environment.

Here are a couple example reports generated by the script, both with DSSIM 3.1.2:
Imagick
GD
Extended Test Quality Range (quality by 5s), with Imagick Only.

As a next step, I'm:

• Changing the sizes generated to match the default WordPress sizes
• Changing quality testing to 1s (right now, it tests by 10s or 5s, from quality 10-100), so we can test specifically with the 82, the current JPEG quality setting
• Reducing the range (right now, testing if 70-100 can still run) so that the amount of images generated isn't a problem

After that, I think we still should test with some additional images, so picking appropriate ones would be a good idea.
I've looked at a few image sample sets, but I'm not sure which is most appropriate at this stage.
At the very least, I think we're missing a sample image line art / text.

Any recommendations on sample sets and / or single additional high resolution images would be great.

As a last note, right now this uses DSSIM, but it's pretty straight-forward to swap that out for any other image comparison tool. So if there's something better out there (a little looking found SSIMULACRA, for instance, although that looks to be a couple years old), we can run the script against that as well.

[getsource]

I ported the changes in the branches into a clean branch so that I could make a PR, to bring back to main on my repo:
getsource/avif-webp-quality-setting#1

I’m not sure if it’d be better for me just to cherry pick the commits at this point (and what repo it'll eventually live in), but that way it’s a bit more clear what’s going on, if anyone would like to take a look.

I’m pretty excited about this particular revision.
I made the changes mentioned above with changing the sizes generated to WP's defaults, and range to [70-100] (incrementing by 1s).

Ended up with these reports:
Imagick
GD

The last tab (“Quality Settings for JPEG 83”) is the most helpful, I think.

It has all of the sizes that WordPress creates by default, at WP’s default JPEG quality, with a suggested WebP closest quality, and percentage of file-size saved for each of the tested images.

As mentioned in the last update, I think it still needs at least a line art example to be a bit more definitive, but I like where the report ended up.

A note that it takes a long time (hours) to run this particular one, but it’s totally doable to re-run with the images we want / need.

[adamsilverstein]

Ended up with these reports: Imagick GD

The last tab (“Quality Settings for JPEG 83”) is the most helpful, I think.

This is great, thanks for building out this research tool and running initial test sets for JPEG/WebP comparison.

Looking at the two results pages for "Quality settings" JPEG 83, I can draw two clear conclusions:

• WebP quality setting should probably be around the same as JPEG (83), based on the best average quality setting
• WebP saves on average 26-29% on file sizes, with more significant gains on large images than thumbnail size (or medium sized) images. Setting quality by size (issue) could be useful here.

Attaching some screenshots here of those results tabs from the sheets:
Imagick:

GD:

When possible it would be great run this on a larger set of test images and in particular test some "outliers" that don't compress as efficiently with WebP.

[markhowellsmead]

When I convert high-quality, pre-optimized JPEGs (Lightroom exports) at 2560px wide, the resultant WebP files are often around 30%-50% larger than the original JPEG files. (I convert using mogrify on the command line at 82% quality.)

[adamsilverstein]

Hey @markhowellsmead - thanks for the note - how do you upload these images to WordPress and place them in posts? Do you use the "Full sized image" after uploading? How are you creating the WebP images?

Can you provide a sample JPEG that you have optimized?