Large web background image - how to split into JPG and PNG part

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.