Skip to content

Commit

Permalink
jpg2k not well supported
Browse files Browse the repository at this point in the history
  • Loading branch information
knzai committed Sep 1, 2024
1 parent 1912806 commit 83569b7
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions _posts/2024-09-01-svg-ccc.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ toot_id: 113064123926263617

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, compressed to a 9kb jpg (a "0% quality" setting in the app I was using), to exaggerate the effect beyond what you'd ever typically settle on:
For instance, here's the header image for this post, originally a 627kb PNG, compressed to a 21kb jpg (a "0% quality" setting in the app I was using), to exaggerate the effect beyond what you'd ever typically settle on:

![SVG: SVG cross-codec-compilation JPG at 0% quality](/assets/img/posts/svg-ccc/0.jpg)

Expand All @@ -28,7 +28,9 @@ But now SVG support is good enough that you can avoid this by using an SVG as a

This lets you optimize the the photo down to a reasonable size, without having to negatively impact your text/diagram rendering. Not having to use two separate image files via html and css is better for optimizing mobile loading (with fewer separate requests to the server) and handles scaling to different resolutions smoothly without any additional css fiddling.

Now able to compress the photo to my hearts content without messing up the text, I started playing around with different formats. I realized that we can now pretty much [just use AVIF](https://caniuse.com/avif), a better replacement even than JPG2000. Pretty quickly I even discovered that the image size vs quality tradeoffs were such that you might as well just use an AVIF for the whole thing, rather than the complexity of layering a PNG and AVIF into one file, for comparable quality and size (further below I get into the case for still using an SVG).
Now able to compress the photo to my hearts content without messing up the text, I started playing around with different formats. JPG2000 is somewhat better, but support for it is largely lacking. But I realized that we can now pretty much [just use AVIF](https://caniuse.com/avif), an even better replacement (including alpha supprt).

Pretty quickly I even discovered that the image size vs quality tradeoffs were such that you might as well just use an AVIF for the whole thing, rather than the complexity of layering a PNG and AVIF into one file, for comparable quality and size (further below I get into the case for still using an SVG).

Lossless AVIF of the whole file cut it down to to 413kb, a decent savings. But taking it all the way down to "25% quality" you get a 15kb image smaller than jpg of a similar quality, but without the horrendous artifacts it displayed (though on small enough mobile, like the iPhone mini I use, even the jpg might be good enough):
JPEG 25% quality:
Expand Down
Binary file modified assets/img/posts/svg-ccc/0.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/img/posts/svg-ccc/25.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 83569b7

Please sign in to comment.