tweaks

Author: knzai

_posts/2024-09-01-svg-ccc.md

@@ -31,7 +31,7 @@ For example of why you'd want to do this, here are the artifacts that can form a
 
 You could compress the text and the background separately, of course, and layer them in CSS. This has some tradeoffs of it's own, such as requiring CSS that can be tricky to get just right in responsive layouts; requiring additional requests to the server, which is worse for optimizing mobile load time; and overall not being easy to maintain (or fitting in most peoples content management approaches). And then you will still need a single image version for things like the sharing/OpenGraph tile, if it's the main image for the page.
 ## 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, even when smaller than a JPG (and thus a fraction of the size of corresponding 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.
+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, even when smaller than a JPG (and thus a fraction of the size of corresponding PNGs). And you can then 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 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.