Using Saliency in progressive JPEG XL images

At Google, they’ve worked out a new way to progressively enhance images: When delivering images over the web, it is now possible to organize the data in such a way that the most salient parts arrive first. Ideally you don’t even notice that some less salient parts have not yet arrived, because by the time …

Vector? Raster? Why Not Both!

Starting off with a 10.06MB SVG, Zach Leatherman tried several routes to reduce the weight of the hero image on the right side of the home page on JamStackConf.com. Eventually he settled on an approach where he layered a transparent WebP image on top of an SVG. Both layers were optimized individually, leaving only 78KB …

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 …

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 …

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 …

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 …

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 …