edits

Author: knzai

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

@@ -33,7 +33,7 @@ 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, 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.
+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. This isn't too surprising, once you realize how great AVIF is. The base64 encoding has a cost, and the composited form still has to have a similar (if even more well compressed) AVIF as well as the data for the PNG. Swapping in WebP for the PNG works even better at getting the size down. 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
@@ -47,11 +47,12 @@ Note: OG is "OpenGraph" support. See section in [Tradeoffs](#tradeoffs). Late I
 | PNG | 627 KB | X | Very high quality, larger file | [![](/assets/img/posts/svg-ccc/original.png)](/assets/img/posts/svg-ccc/original.png) |
 | AVIF lossless | 413 KB | | Same quality; 30% size reduction | [![](/assets/img/posts/svg-ccc/lossless.avif)](/assets/img/posts/svg-ccc/lossless.avif) |
 | 🔥 **AVIF lossy (25%)** | 15 KB | | Great size, okay quality. Good enough for many images or mobile generally | [![](/assets/img/posts/svg-ccc/25.avif)](/assets/img/posts/svg-ccc/25.avif) |
-| JPG (0%) | 21 KB | X | Visible artifacts, still not as small as AVIF | [![](/assets/img/posts/svg-ccc/0.jpg)](/assets/img/posts/svg-ccc/0.jpg) |
-| JPG (25%)| 51 KB | X | Same as above, just a larger file with *slightly* fewer artifacts | [![](/assets/img/posts/svg-ccc/25.jpg)](/assets/img/posts/svg-ccc/25.jpg) |
-| 🔥 SVG + AVIF + vector | 36 KB | | Best quality. Crisp lines zero artifacts. Decent size | [![](/assets/img/posts/svg-ccc/composite.svg)](/assets/img/posts/svg-ccc/composite.svg) |
+| JPG (0%) | 21 KB | X | Visible artifacts, still not as small as the lossy AVIF | [![](/assets/img/posts/svg-ccc/0.jpg)](/assets/img/posts/svg-ccc/0.jpg) |
+| JPG (25%)| 51 KB | X | Same as above, just a 2.5x file with *slightly* fewer artifacts | [![](/assets/img/posts/svg-ccc/25.jpg)](/assets/img/posts/svg-ccc/25.jpg) |
 | SVG + AVIF + PNG | 65 KB | | Tiny quality improvement over plain AVIF, at much larger size. | [![](/assets/img/posts/svg-ccc/composite-png.svg)](/assets/img/posts/svg-ccc/composite-png.svg) |
-| SVG + AVIF + WebP | 55 KB | | Similar quality, better file size. Different images will show more improvement| [![](/assets/img/posts/svg-ccc/composite-webp.svg)](/assets/img/posts/svg-ccc/composite-webp.svg) |
+| SVG + AVIF + WebP | 55 KB | | Similar quality, slightly better file size. Images with more graphics than photo will likely show more improvement | [![](/assets/img/posts/svg-ccc/composite-webp.svg)](/assets/img/posts/svg-ccc/composite-webp.svg) |
+| 🔥 SVG + AVIF + vector | 36 KB | | Best quality. Razor crisp lines with zero artifacts at a decent size | [![](/assets/img/posts/svg-ccc/composite.svg)](/assets/img/posts/svg-ccc/composite.svg) |
+
 
 ## Tradeoffs
 ### No progressive rendering