Last Updated: 2024-04-25

My images - the ones that were part of my design as opposed to those uploaded by users, were nearly all 3x as big as they needed to be when given a good modern JPEG compression.

This was easily fixed

$ brew cask install imageoptim

Then open this app and drag and drop a folder — it does the rest!

(Larger websites) should consider compressing images with bleeding edge technologies

• JPEG 2000, JPEG XR, WEB P etc. are better but not universally supported. Thus different browsers need different image formats.

Consider progressive JPEGS

• Baseline loads line by line
• Progressive loads all at once but starts blurry and gets progressively more detailed.

Known as "pjpeg"

Downsides:

1. PJPEGs can be slower to decode than baseline JPEGs - sometimes taking 3x as long. On desktop machines with powerful CPUs this can be less of a concern, but this remains an issue on underpowered mobile devices with limited resources.
2. Progressive JPEGs are also not always smaller. For very small images (like thumbnails), progressive JPEGs can be larger than their baseline counterparts.

References

• https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/automating-image-optimization