Squoosh settings: Lossless (off), Quality: 45, Subsample Chroma (off), Effort: 6 168 KB AVIF optimized with Squoosh (Full palette, demo offers WebP and PNG fallback) The Winner: Two Separate Layers: SVG + AVIF/WebP/PNG # Read Jake’s excellent blog post: AVIF has landed. My informal goal here was to get as much quality out of the AVIF format with a similar file size to the WebP reduced palette version.
I think it was a good prompt! The reduced palette options (while offering large file size improvement) did take a toll on the image.
Update August 27: Jake Archibald offered some good advice to try the AVIF format again (in Lossy mode) without reducing the color palette. Many might consider this to be “good enough” but the entire point of this blog post is the last trick (*waves jazz hands*). Wow, this is a really nice file size savings! And we’ll use here to progressively enhance our PNG to WebP. (Update August 27: take note of the new Attempt 4: AVIF section below) Attempt 3: WebP # 152 KB WebP optimized with Squoosh (Lossless, Reduced palette to 256 colors, demo offers PNG fallback)
That Reduced Palette option offered a huge savings! I did play around with the AVIF format settings on Squoosh a bit but wasn’t able to beat the PNG file size. Squoosh # 376 KB PNG optimized with Squoosh (Reduced palette to 256 colors) I was impressed with the ~400 KB savings here from a single drag-and-drop onto ImageOptim but 831 is still too high. ImageOptim # 831 KB PNG optimized with ImageOptim If the background color changes, I don’t want to have to reoptimize this image. The important thing to note here is that we need to preserve the image’s transparency. So y’all know me well enough that I won’t be putting a 1.2 MB hero image in that prime area of viewport real estate. Attempt 2: PNG # 1.2 MB Original Export from Figma as PNG Let’s swap to raster and see how far we can go. There are just too many embedded raster images inside of this SVG to yield good results from SVGOMG alone.
Now I know that these sizes are the uncompressed file sizes (before GZIP/Brotli) but I think we can both agree that even an optimized 9.9 MB is a bridge too far for even the starchiest of compression algorithms (Update: 9.9 MB gzipped to 7.36 MB). 10.1 MB Original Export from Figma as SVG.We work using Figma on the marketing team at Netlify and my first attempt at exporting this image was fraught with peril. It has to do with the hero image on the right side of the home page on. This week I ran into an interesting class of problem that-in hindsight-could use a much better workflow.