Modern Image Optimization for 2020- Issues, Solutions, and Open Source solutions

Be advised I tried hard to write this for a laymen web developer audience. Not for e.g. a codec developer.

Introduction

Most online image optimization services and tools are rather antiquated in how they compress images.

For example, if you have ever seen pixelated or blurry banner ads, most likely this was from using a lossy format such as JPEG, which is perfectly acceptable! The problem is such an image may have been compressed with settings hardcoded in the tool, rather than computed in some manner based on human perception.

Problem

With regards to antiquated. The most performant image compression formats work by essentially discarding information in a controlled manner, usually VIA some simple, external parameter. For JPEG this is commonly called ‘quality’, which is kinda misleading!

For example in my own experience some images may be encoded at a very ‘low’ quality and yet be indistinguishable from the original, thus reducing file size, sometimes significantly. But such settings may only work for 25% of given images.

In other cases it’s the opposite, given some image with just a single flat object in the center (common with e-commerce platforms such as etsy.com or jane.com), the default or recommended parameters may be too much, leading to whats called “compression artifacts”.

In both cases the issue is simple, our tools are using hardcoded parameters. Parameters that don’t accommodate the given image.

Solution

So what should we as an industry be doing in 2020 for overcoming the above issues?

Solution #1 - Manual Tuning

It’s easy, just hire and train a team of technicians to manually tune for an optimal quality/file size tradeoff. Since we as humans already have an innate perception for things that are noticeably distorted by compression artifacts.

This site makes it easy, from GoogleChromeLabs: squoosh. But for real, try it out, it’s kinda neat.

Solution #2 - Automated Tuning

Optimize the compression using models based on human perception.

Proprietary vs Open Source

Of course the problem regarding #2 is that all preexisting solutions are proprietary SAAS offerings. This is why I have open sourced Imager.

Imager is a tool that can competitively optimize (e.g.) extremely noisy, high resolution images; at the expense of increased encoding time and CPU overhead. This is a tradeoff that should be suitable for over 90% of online content, where site performance matters.

Personally, i’ve spent the past year in development on Imager, and with regards to performance, see here or below VIA my fancy unicode graph. :)

source        : ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 39M
compression.ai: ▇▇▇▇▇▇▇▇ 8.9M
imager        : ▇▇▇▇ 4.2M

Imager vs. compression.ai — from 4 high resolution images — Lower is better — data here.