Image size

The image in my last entry was taken with Awesome Screenshot, a useful extension for Firefox. It offers some basic annotation tools and allows the user to save the edited image as portable network graphics (png). The resulting file had a size of 742 kB, too large for deploying it on the web since it would delay the initial page load due to its size even for fast connections.

Minimizing the size of an image file without compromising its quality can be a tricky business. In this particular case, for example, there's not much room for further loss-less compression. Whatever the format (png, jbig, plasma,...), the minimum size of the resulting file is about 540 kB, still too large for my purpose.

What about saving it in a lossy format, such as jpeg?

Issuing

convert eilsbrunn.png -quality 100% eilsbrunn.jpeg

results in a file of 325 kB size. Not bad, but we can do better.

Both pngquant and pngnq reduce the file size drastically (to 210 to 220 kB) by mapping the 24 bit colors to an 8 bit palette. There are no visual differences to the original, and this approach is thus usually my default way to reduce the file size of images for the web.

However, depending on the nature of the image, we may do better by converting it to the lossy jpeg format and accepting a slight (essentially invisible) loss of quality. Repeating the above call to convert without the explicit quality statement, for example, results in a 124 kB file (the defaults are usually sensible). Even jpgcrush can reduce this size further only by a few kB.

I thus usually follow this simple workflow for producing images for the web:

(a) If the image is a line graphics, I save it as svgz, which guarantees minimal file sizes while retaining the maximum possible quality. The workflow ends here when I want to use the image for publications.
(b) If the image contains both line and photographic elements, I check out both loss-less and lossy compression schemes:

pngquant original.png quantized.png
convert original.png converted.jpeg

I then simply look at the images and decide on the basis of visual impression and file size.

Update 02.07.20: Using the webp format, we can get even smaller files than with jpeg without introducing visible compression artefacts.

    convert eilsbrunn.png -quality 90% eilsbrunn_90.webp

results in a file of 100 kB size that is virtually indistiguishable from the original.