: 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
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.
More posts by @Sue6373160
2 Comments
Sorted by latest first Latest Oldest Best
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.
en.wikipedia.org/wiki/DjVu
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.