very minor edits

knzai · Sep 3, 2024 · 94f0a79 · 94f0a79
1 parent 83dc2e1
commit 94f0a79
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/_posts/2024-09-01-svg-ccc.md b/_posts/2024-09-01-svg-ccc.md
@@ -33,7 +33,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, 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. 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.
+Though, I discovered that for this particular image (with just a little text on it) a well-compressed AVIF 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 better at getting the size down. For images with more complex graphics, or higher resolution needs, SVG compositing an AVIF and WebP could be a great solution.
 
 But...
 ## A match made in heaven: AVIF + vectors
@@ -46,12 +48,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 the lossy AVIF | [![](/assets/img/posts/svg-ccc/0.jpg)](/assets/img/posts/svg-ccc/0.jpg) |
+| 🔥 **AVIF lossy (25%)** | 15 KB | | Great size, pretty good 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 | Poor quality, 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, 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) |
+| 🔥 SVG vectors + AVIF | 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
@@ -65,6 +67,7 @@ Using an inlined image file in an SVG makes it trickier to autogenerate differen
 This will likely get better over time. To make an SVG composite I had to export the SVG from Figma with the original PNG in it, then manually swap in the compressed AVIF's data. You may need to compress your AVIFs separate anyway, due to the next point.
 ### Compression time
 Running the highest compression settings on AVIF can be slow. This will get better as computers get faster. You may end up wanting some automated tooling around producing your AVIFs to manage this, or you may want to hand-tune them instead if you are only doing a few at a time anyway. Either way you probably want a decent standalone compressor. I found [ImageTool+](https://apps.apple.com/us/app/image-tool/id1524216218?mt=12) to be well worth the $8 when trying to do a lot of images with different settings.
+
 ## Final approach
 Below is the gist of what I ended up on for my ideal composite SVG. The font, gradient, and overlay are all done in SVG making it even easier to swap in different photos. The SVG was autogenerated by Figma then cleaned up a bit via [svgviewer.dev](https://www.svgviewer.dev), which has been super helpful through the whole process of experimenting wiah all these possibilities.