Compress and Convert AVIF/WebP/PNG/etc images on the CLI with squoosh-cli

To compress and compare images with different codecs right in your browser there’s squoosh.app that you can use.

Announced at the still ongoing Chrome Dev Summit 2020 is Squoosh v2 with new codecs support (AVIF!), an updated design, and the release of CLI version!

Squoosh CLI is an experimental way to run all the codecs you know from the Squoosh web app on your command line using WebAssembly. The Squoosh CLI uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.

Squoosh CLI is currently not the fastest image compression tool in town and doesn’t aim to be. It is, however, fast enough to compress many images sufficiently quick at once.

Run it using npx, or install it globally:

npx @squoosh/cli <options...>
npm i -g @squoosh/cli
squoosh-cli <options...>

Announcing Squoosh v2 →
Squoosh CLI (Repo) →

Optimizing images for the web – an in-depth guide

It’s very easy for unoptimized images to end up on a production site and slow down its initial load considerably. Inexperienced devs usually aren’t aware of this potential problem. They also aren’t aware of a wide range of tools and approaches for optimizing images.

This article aims to cover most of the tools and approaches for optimizing images for the web.

Good to see that it also covers native lazy image loading. The smallest image still remains an image not loaded unnecessarily 😉

Optimizing images for the web – an in-depth guide →

💁‍♂️ Addy Osmani’s Essential Image Optimization is also worth a look.

Automatically compress images to your Pull Requests with this GitHub Action

The folks at Calibre have release a GitHub Action named “Image Actions” and I must say, it looks amazing insane:

Image actions will automatically compress jpeg and png images in GitHub Pull Requests.

  • Compression is fast, efficient and lossless
  • Uses mozjpeg + libvips, the best image compression available
  • Runs in GitHub Actions, so it’s visible to everyone

Never ship unoptimised graphics again!

Once the workflow is added to your repo, Compression levels and source paths exclusions can easily be configured using a .github/calibre/image-actions.yml file:

jpeg:
  quality: 80
png:
  quality: 80
ignorePaths:
  - "node_modules/**"

Calibre Blog: Automatically compress images on Pull Requests →
GitHub Actions Marketplace: Image actions →

🤔 In case you’re wondering why you should compress your images be sure to read Addy Osmani’s free ebook “Essential Image Optimization”

Unraveling the JPEG

“Unraveling the JPEG” is a great deep dive into the JPEG image format.

This article is about how to decode a JPEG image. In other words, it’s about what it takes to convert the compressed data stored on your computer to the image that appears on the screen. It’s worth learning about not just because it’s important to understand the technology we all use everyday, but also because, as we unravel the layers of compression, we learn a bit about perception and vision, and about what details our eyes are most sensitive to.

Comes with interactive editors which allow you to adjust the JPEG data, and directly see how it affects the image.

Great stuff to play with!

Unraveling the JPEG →

PNGStore – Embedding compressed CSS & JavaScript in PNGs

In the same series as the previously posted Suncalc 3D I’ve stumbled upon AirStrike, a JavaScript Flight Control clone that weighs less than 10kB (!).

What’s so clever about this app is that the source is encoded into a .png, a technique that’s been around for quite a while as it turns out (2008!).

Pretty decent results and even for packed (or otherwise minified) scripts we can shave off another 50% using this method. The PNG’s can even be further compressed using various optimizing tools.

Hacky. I like!

PNGStore – Embedding compressed CSS & JavaScript in PNGs →
Compression using Canvas and PNG-embedded data →