I would like to prepare a photo to display it on a webpage. I would like to compress this image such that most of the image is compressed to lower quality, to reduce download size, but a few small areas are compressed in high quality.
The photo is an outdoor scene most of which shows foilage, but there are eight people visible walking in the foreground. If I compress the photo with JPEG set to lower quality, most of the image doesn't lose important details. However, the heads of the people visible on the image are an important focus of the image, and most of them have important details in the facial features that are lost at low quality JPEG compression. All the heads together take less than 1/200 the are of the image.
I do not believe that it is possible to solve this optimally with a single JPEG image. This is because the entire JPEG image must use the same quantizing matrix, which has to be high quality enough to be able to represent the high quality details, and also has to use the same Huffman code, so even if I encode most of the image in a special way, such as zeroing many of the cosine transform coefficients in most of the blocks, the large areas will be compressed suboptimally.
Given this, what is the best way to represent the image on a webpage? Can you give examples of webpages doing something similar? Can you point me to instructions or software that helps solve some of this task?
I was thinking of maybe using a low quality JPEG image that covers all the picture, and then overlaying a few other images (JPEG or PNG). I could use CSS rules to place the additional images. Alternately, I could split the image to rectangular subimages, and assemble them using a table.
To clarify, I don't need help for choosing the areas that have to be represented in high quality. I can choose those myself easily, by observing which parts of the image lose detail in a lower quality compression.