AVIF has landed - JakeArchibald.com
There’s a new image format on the browser block and it’s very performant indeed. Jake has all the details you didn’t ask for.
Tags: compression
13
Wednesday, September 9th, 2020
Tuesday, July 2nd, 2019
Bridgy for Webmentions with Brotli—zachleat.com
This is good to know! Because of a bug in Google App Engine, Brid.gy won’t work for sites using Brotli compression on HTML.
Tuesday, May 7th, 2019
Unraveling The JPEG
A deep, deep, deep dive into the JPEG format. Best of all, it’s got interactive explanations you can tinker with, a la Nicky Case or Bret Victor.
Tuesday, November 13th, 2018
Optimise without a face
I’ve been playing around with the newly-released Squoosh, the spiritual successor to Jake’s SVGOMG. You can drag images into the browser window, and eyeball the changes that any optimisations might make.
On a project that Cassie is working on, it worked really well for optimising some JPEGs. But there were a few images that would require a bit more fine-grained control of the optimisations. Specifically, pictures with human faces in them.
I’ve written about this before. If there’s a human face in image, I open that image in a graphics editing tool like Photoshop, select everything but the face, and add a bit of blur. Because humans are hard-wired to focus on faces, we’ll notice any jaggy artifacts on a face, but we’re far less likely to notice jagginess in background imagery: walls, materials, clothing, etc.
On the face of it (hah!), a browser-based tool like Squoosh wouldn’t be able to optimise for faces, but then Cassie pointed out something really interesting…
When we were both at FFConf on Friday, there was a great talk by Eleanor Haproff on machine learning with JavaScript. It turns out there are plenty of smart toolkits out there, and one of them is facial recognition. So I wonder if it’s possible to build an in-browser tool with this workflow:
- Drag or upload an image into the browser window,
- A facial recognition algorithm finds any faces in the image,
- Those portions of the image remain crisp,
- The rest of the image gets a slight blur,
- Download the optimised image.
Maybe the selecting/blurring part would need canvas? I don’t know.
Anyway, I thought this was a brilliant bit of synthesis from Cassie, and now I’ve got two questions:
- Does this exist yet? And, if not,
- Does anyone want to try building it?
Monday, November 12th, 2018
Squoosh
A handy in-browser image compression tool. Drag, drop, tweak, and export.
Friday, February 9th, 2018
Href Tools - Free online web tools
Handy web-based tools—compress HTML, CSS, and JavaScript, and convert files from one format to another.
Monday, October 2nd, 2017
Essential Image Optimization
Following on from Amber’s introduction, here’s a really in-depth look at image formats, compression and optimisation techniques from Addy.
This is a really nicely put together little web book released under a Creative Commons licence.
Saturday, March 18th, 2017
google/guetzli: Perceptual JPEG encoder
Google have released this encoder for JPEGs which promises 20-30% smaller file sizes without any perceptible loss of quality.
Monday, August 29th, 2016
The Long, Remarkable History of the GIF
The history of the GIF—a tale of licensing, compression, and standards.
Tuesday, May 7th, 2013
Sensible jumps in responsive image file sizes
Some good thinking from Jason here. In a roundabout way, he’s saying that when it comes to responsive images—as with just about every other aspect of web development—the answer is …it depends.
Thursday, October 25th, 2012
Retina revolution
You’ve probably seen this already, but it’s really worth bearing in mind: when you’re scaling up JPGs for retina display you can safely reduce the image quality by quite a lot—to the point of getting the exact same file size as a higher quality image that’s half the size.
Sunday, July 22nd, 2012
JPEGmini - Your Photos on a Diet!
This looks like a really handy tool for reducing the file size of JPEGs without any perceptible loss of quality (in much the same way that ImageOptim works for PNGs)—available as a Mac app or an installable web service.
Wednesday, May 2nd, 2012
HTTP Compression use by Alexa Top 1000 | Zoompf
An in-depth analysis (graphs! data!) of how popular sites are using—or not using—compression.