Selectively Compressed Images - A Hybrid Format

By on   5 comments 400 words, read ~347 times.

I have a screenshot of my phone's screen. It shows an app's user interface and a photo in the middle. Something like this:

Screenshot of a camera app on a phone. The middle is a photo, the sides show the user interface.

If I set the compression to be lossy - the photo looks good but the UI looks bad.
If I set the compression to be lossless - the UI looks good but the filesize is huge.

Is there a way to selectively compress different parts of an image? I know WebP and AVIF are pretty magical but, as I understand it, the whole image is compressed with the same algorithm and the same settings.

There are two ways to do this. The impossible way and the cheating way.

Selective Compression

In theory it should be possible to tell an image format to compress some chunks of an image with a different compression algorithm.

And yet... none of the documentation I've found shows that's possible.

GiMP's native XCF and Photoshop's PSD files work; they store different layers each of which can have a different filetype. I understand that TIFF and .djvu also have that capability.

But those sorts of files don't display in web browsers.


Let's Cheat!

It's possible to use an SVG to embed multiple images of different formats. SVG is used as, effectively, a layout engine.

The syntax is relatively straightforward:

<svg xmlns="" xmlns:xlink="" viewBox="0 0 1080 512">
   <image width="1080" height="512" x="0" y="0"
   <image width="1080" height="512" x="0" y="0"

That draws the JPG then draws the PNG on top of it. If the PNG has a transparent section, the JPG will show through. The JPG can be set to as low a quality as you like and the PNG remains lossless.

Here's what it looks like - click for full size:

Screenshot of a phone's camera app with a heavily compressed photo inside it.

Embedded images are Base 64 encoded, which does lose some of the compression advantages. But, overall, it's smaller than a full PNG and better quality than a full JPG.

Look, if it's stupid but it works it's not stupid.

But surely there must be a way of doing this natively?

Share this post on…

5 thoughts on “Selectively Compressed Images - A Hybrid Format

    1. Chris says:

      Came here to say exactly the same thing about JPEG2000 that @DavidUnderdown just did. But I wanted to add that the SVG as a layout engine idea is one of those brainwaves that should be blindingly obvious that I’ve never thought of trying before. But I will now. Thanks for posting this.


What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.