Skip to content

Commit

Permalink
try this
Browse files Browse the repository at this point in the history
  • Loading branch information
knzai committed Sep 2, 2024
1 parent 66277b3 commit 87ca391
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 42 deletions.
4 changes: 0 additions & 4 deletions _posts/2024-09-01-svg-ccc.md
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down
Loading

0 comments on commit 87ca391

Please sign in to comment.