diff --git a/_posts/2024-09-01-svg-ccc.md b/_posts/2024-09-01-svg-ccc.md index 10a999f..16ff516 100644 --- a/_posts/2024-09-01-svg-ccc.md +++ b/_posts/2024-09-01-svg-ccc.md @@ -12,10 +12,6 @@ description: > toot_id: 113064123926263617 --- -ETA: Base64 inlined photos embedded in SVGs have worse mobile support than I first thought. If I either figure out a workaround, or support improves enough, it'll be a handy technique for truly optimal image sizes. Overall though AVIF is an incredible format that has general browser support, even if the tooling doesn't always support it yet (and neither do all implementations of OpenGraph, so you still need your trusty PNGs, etc) - --- - 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 generally either require a large image, or the compression artifacts will become apparent, especially around the graphic component's lines. For instance, here's the header image for this post, originally a 627kb PNG, maximally compressed down to a 21kb jpg (a "0% quality" setting in the app I was using), to exaggerate the effect beyond what I'd ever typically settle on (I may do a later draft of this with some line-art to make it more obvious): diff --git a/assets/img/posts/svg-ccc/composite.svg b/assets/img/posts/svg-ccc/composite.svg index 71d3f41..7fb6f4a 100644 --- a/assets/img/posts/svg-ccc/composite.svg +++ b/assets/img/posts/svg-ccc/composite.svg @@ -1,38 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file