Coffee Space


Listen:

Image Compression

Preview Image

Preview Image

TL;DR

This is a quick entry on extreme image compression of JPEG vs WEBP, where JPEG is 1.5 times larger and looks worse, but offers better backwards compatibility.

Problem

I am thinking about adding compression support to my new site, dead social. In keeping with the theme of absolute minimalism, I need an image compression format that comes in at a reasonably small size that keeps the load as low as possible. This is all running on a potato server, with potato resource.

Generally I think people will want to share images of interest, or memes. As a result I would expect to see at least some recognizable detail, but of course we are talking about a lot of compromise here.

One of the test images is as follows (I don't own it and I'm not sure where it came from):

GameStop stocks meme

GameStop stocks meme

I think I want images to be 256x256 resolution, the smallest I think you can reasonably expect to see some detail, but not too much. Another reason for the low image resolution is to reduce the potential abuse by becoming some image hosting site. I think the resulting file size should mean it is possible to keep a million or so images cached in RAM.

JPEG

The smallest compression I could create was:

convert -strip -define jpeg:extent=2kb -resize 256x256 gamestop.jpg test.jpg

This resulted in:

JPEG result

JPEG result

This comes in at 1927 bytes, or 1.9kB. As you can see, it's blocky and the text is not so easy to read. The colours seem reasonably vibrant, although jaunting given their blocked nature.

WEBP

The smallest compression I could create was:

convert -strip -quality 1% -resize 256x256 gamestop.jpg test.webp

WEBP result

This comes in at 1236 bytes, or 1.2kB. As you can see, this image is a lot more blurred, but the text is more readable. The colours are more washed out and the details are for sure more lost.

Comparison

So I've blown up the images by 400% (no scaling method) and put them both next to one another. In the following, the WEBP image is first, followed by the JPEG image:

Top: WEBP, Bottom: JPEG

Top: WEBP, Bottom: JPEG

Firstly, the JPEG is 1.5 times faster than the WEBP image, but there doesn't appear to be 1.5 times the quality improvement - in fact to me it appears to display worse.

The WEBP compression algorithm seems to somehow be putting some kind of weighting on text or edges - both of which are very clear in the image when compared to the JPEG image.

The JPEG image format of course is the most portable, with my floppy disk camera that is in excess of 20 years old outputting that image type onto floppy disks. I am slightly concerned that if I have all images on the server in WEBP format, that some time in the future support may be dropped.

The other problem to consider is that Java supports JPEG out of the box, whereas I will likely be looking for a command line wrapper for WEBP. I can only find projects that offer library bindings - nothing that does the conversion natively in Java itself.

I am still not sure which one I will pick, but it has certainly given me some things to think about! Feel free to leave ideas in the comments!