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:
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.
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.
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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 512"> <image width="1080" height="512" x="0" y="0" xlink:href="data:image/jpeg;base64,..........." /> <image width="1080" height="512" x="0" y="0" xlink:href="data:image/png;base64,..........." /> </svg>
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:
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?