more work on the post

_drafts/2024-08-31-ccc-svg.md

@@ -1,19 +1,37 @@
 ---
 layout: post
-title: "SVG-CCC: SVG cross-codec-compilation"
-image: /assets/img/projects/svg-cross-codec-compilation.svg
+title: "The holy grail of image formats: SVG cross-codec-compilation vs AVIF"
+image: /assets/img/posts/svg-ccc/compilation.svg
 description: >
-  Photo, scalar, and/or vector style compression in the same image for smaller size w/o losing crisp lines
+  Photos and text or diagrams in the same image file, at a small size, without losing cripsness
 ---
 
+When using images on the web you've always had to choose between size and quality. This gets particularly pointed when you have one image containing both a photo and crisp lines (for instance text, or a diagram). Compressing both of those in the same image will either require a very large image, or the compression will become apparent, especially around the crisp lines.
+
+You can avoid this by using an SVG as a container for two images Base64 data encoded directly into the same file (ideal for mobile loading with fewer requests to the server, easier maintenance, works in more situations that just layering or compositing two iamges via css).
+
+For instance, here's the header image for this post, originally a 627kb PNG, compressed to a 18kb jpg (a 25% quality setting), to exaggerate the effect beyond what you'd ever typically settle on:
+
+![](/assets/img/posts/svg-ccc/25.jpg)
+
+
+
+I started writing this post about using SVG as a container image to composite images with different compression needs. You can acheive small file size, with crisp lines and no JPG compression artifacts, in a single-file that downloads without an extra request to the server, and that scales and 
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <image xlink:href="data:image/png;base64,[DATA]"/>
+  <image xlink:href="data:image/jpg;base64,[DATA]"/>
+```
+you can have a highly compressed jpeg
+
 While working on getting the [Cloud City site](https://cloudcoty.io) load times a little snappier, particularly on mobile (the only place image size matters that much anymore), I complained how I wished there was an image format that handled both jpg and png compression in the same file. Sure you can position one over the other with css, but having everything in one file is simpler for responsive scaling and optimizing (cutting down the separate file requests).
 
 Then I realized there is such a format: you can composite different images together in an SVG and inline their Base64 encoded data so it's all one file.
 
 This is what one of the header images from the company blog would look like when it has text and an image together in one. It's encoded as a png to keep everything crisp, and clocks in at 668kb:
-![](/assets/img/posts/cross-codec-compilation.png)
+![](/assets/img/posts/svg-ccc/original.png)
 
-If you just encode the whole thing to an AVIF, for a better file-size, since it has a photo you get the following 13kb image:
+There's a tradeoff of size verus quality and it 
 ![](/assets/img/posts/cross-codec-compilation.avif)
 
 For this image, the quality loss on the text is a little more neglible, just making the text a little fuzzy, but on an image with more complicated diagrams it can look worse.