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

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

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

Solution #1 - Manual Tuning

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

Solution #2 - Automated Tuning

Proprietary vs Open Source

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.

Likes all the things in programming that have no job prospects. Author of Imager — https://github.com/imager-io/imager

Likes all the things in programming that have no job prospects. Author of Imager — https://github.com/imager-io/imager