2

On a website I'm working on, the design team wants a large background image. Uncompressed, it is several hundred kilobytes (both in JPG and PNG). Most parts of the background image are blurred, but some parts are very sharp.

Now we're looking for the best way to compress the image so that those blurred parts don't take too much space, while trying to keep away the compression artifacts from the sharp parts.

While thinking about it, I thought it might be good to split the image into two overlapping parts:

  • The first part is very blurred, so it can be compressed by scaling it down, or by compressing it as a JPG.
  • The second part is a transparent image on top of the first part. It is sharp, but has not much color information, ideal for a compressed PNG image with only one color channel (or a small number of discrete colors).

The idea is to combine the powers of JPG compression with that of PNG.

Is that a good idea, in theory?

If yes, is there a program or algorithm that can do the image split and the compression with the following goals:

  • Keep the resulting (superposition) image as close as the original as possible (as it appears to the human eye).
  • Keep the total image size under a given upper limit.

Some additional thoughts:

  • The blurred parts in the original image would most likely be totally transparent in the second part of the image split.
  • If the first part of the image generates a strong artifact at some position in the image, maybe it would be possible to correct that in the second part.
Improve this question

2 Answers 2

Reset to default
4

Is that a good idea, in theory?

Sure.

If yes, is there a program or algorithm that can do the image split and the compression with the following goals:

I don't now that you need that. I'd build the image in a program that can handle layers (such as Photoshop). Hide the top layer and export as a highly compressed JPG. Hide the bottom layer and export as a PNG. Then combine the two in your HTML/CSS. You could use absolute positioning or leverage the fact that newer browsers can handle multiple background images.

Side note of maybe only historical significance: Fireworks used to have an option to export a 'selectively compressed' JPG. It allowed you to select a region of a single JPG and have it compress separately form the rest. It was a neat feature that I haven't seen implemented in any other image editing software.

Finally...

the design team wants a large background image

...remember that sometimes the design team is just wrong. I get that this is often a political issue more than anything, but if you have the ability to push back, it never hurts to educate the design team how the web works and that gigantic background images aren't always in the best interest of the overall experience.

Improve this answer
2
  • Thank you very much! However, I'm looking for a software that can create the two layers automatically from one image. I don't have the two layers yet. I want the software to detect how to split the image into two layers so that my goals are satisfied/optimized.
    – Jonas Sourlier
    Dec 23, 2014 at 22:03
  • 1
    @cheeesus if the image is already flat, I can't imagine software that could automate that. Maybe it exists, but it likely takes a lot of eyeballing and hand tweaking to properly separate them. You might be better off looking for a version of Fireworks and using the selective compression option. That said, if the designers are insisting on this, let them figure out how to get you the two layers for you.
    – DA01
    Dec 24, 2014 at 0:51
1

DjVu files are based on the same idea, perhaps they have some converters that you could use for separating your image into "sharp" and "smooth" components.

http://en.wikipedia.org/wiki/DjVu

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.