Skip to content

Commit

Permalink
copy edits
Browse files Browse the repository at this point in the history
  • Loading branch information
knzai committed Sep 2, 2024
1 parent 6b1adbd commit 6dc0614
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion _posts/2024-09-01-svg-ccc.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@ You could compress the text and the background separately, of course, and layer
## Enter AVIF
In exploring this technique and optimizing further, I noticed that we now can pretty broadly [just use AVIF](https://caniuse.com/avif). AVIF is an **incredible** format that greatly reduces artifacts and other compression problems, at a fraction of the size of PNGs. Unfortunately, despite broad browser support, support isn't universal in the tooling. Of course, you can combine SVG compositing and AVIF for very high quality images, at a fraction of the size.

I discovered that for this particular image with just a little text on it, a well compressed AVIF basically beats out even the SVG compositing with a PNG. Once you realize how great AVIF is this isn't too surprising. The base64 encoding has a cost, and the compsited form still has to have the AVIF, plus the size for another PNG. WebP works even better, for for images with more complex graphics, or higher resolution needs, SCG compositing an AVIF and WebP can be a great solution.
I discovered that for this particular image (with just a little text on it) a well compressed AVIF basically beats out even the SVG compositing with a PNG. Once you realize how great AVIF is, this isn't too surprising. The base64 encoding has a cost, and the composited form still has to have the AVIF, plus the size for another PNG. But WebP works even better. For images with more complex graphics, or higher resolution needs, SVG compositing an AVIF and WebP can be a great solution.

But...
## A match made in heaven: AVIF + vectors
If you are trying to get the crispest lines and overall best graphical art, you shouldn't even be using a raster format anyway. And since we're already working with SVGs you might as well include the vectors in the file we were using to composite images. It's debatable at this point if that's "compositing" or just "inlining a photo into an SVG". Either way, for a small size penalty you can have an even better quality image than the large PNG we were using as our baseline.
## Comparison table
Expand Down

0 comments on commit 6dc0614

Please sign in to comment.