Your .webp can be smaller, just use .png beforehand

What question am I trying to answer?

See an update at the bottom of the page

For starters, go visit the associated /experiments page.

Why does converting a .png file to a .webp obtain a smaller size than the same image in .jpg format being converted in .webp?

Some stats (without the images)

Here is the same table from the /experiments page but without the images. (Styling will be funky because I usually use tables for image collages in markdown, so I am inlining CSS in the .md file)

As you can see, in most cases, converting an image from a .png to a .webp instead of .jpg -> .webp, will greatly decrease the output image size, with no change (at least visible) in quality.

Why is that?

I have no idea, but I want to find out.

If you see this page and have ideas or knowledge on the subject, please DM me on X/Twitter.

Update

I published this over a year ago now, and was not aware of an argument for webp conversion in Imagemagick:

-define webp:lossless=true

This, quite literally, changes everything. Therefore, here is the new page for comparison, and let’s see it all nicely in a table below. Of course, these are the sizes on my computer, before optimization at website build time.

JPG/JPEG to WEBP

PNG to WEBP