How can I show one photo on a webpage with low-quality background compression but higher-quality detail areas?

Asked 12/14/2015

1 views

2 answers

0

I’m optimizing a photo for web display. Most of the image can be heavily compressed without hurting the result, but a few small areas (for example, people’s faces in the foreground) need noticeably higher quality.

A single JPEG doesn’t seem ideal because JPEG quality settings are effectively applied across the whole image. I’m considering either:

  • using one low-quality full-frame image and overlaying a few small high-quality crops with HTML/CSS, or
  • splitting the image into multiple pieces and assembling them on the page.

Is there a practical web-friendly way to do this? Are there tools or formats that support composing a low-quality base image with a few higher-quality regions?

Originally by Photography Stack Exchange contributor. Source · Licensed CC BY-SA 4.0

Photography Stack Exchange contributor

10y ago

2 Answers

6

You can do this with an experimental version of the jpegtran utility with the "drop" option. Get it from http://jpegclub.org/jpegtran/. Here's an example (using a sample image from http://www.rawsamples.ch/). I've uploaded all samples here as PNG files to avoid any extra recompression from the hosting service.

First, the image in high quality JPEG:

High-quality JPG

This is 1715K — over a megabyte.

Now, dropped to terrible-quality (10% in Gimp, with 4:2:0 subsampling):

Low-quality JPEG

Whooo, down to 52K. JPEG is amazing.

So, next, I tried the suggestion from StephenG; I took the low-quality version and put it on top of the uncompressed original, then erased the section I want to look best — the trumpet-vine cloth in the top row. That yields:

Low-Q with original blended in, then saved as high q

But, unfortunately, this is now back up to 667K, which kind of defeats the purpose. Even when I go to 4:2:0 subsampling, it's still 378K — and this is a more fair comparison, as you'll see in a bit.

So, I tried the jpegtran -drop approach — I cut out an overlay of the part I want high quality:

overlay

which is 38K, by the way, and used

jpegtran -drop +592+62 overlay.jpg -outfile dropped.jpg lowq.jpg

to paste it in. I discovered that the subsampling has to match, so I couldn't use the ultimate high quality, but that's probably okay.

dropped in

for a final 221K image. This is a significantly better size result than resaving as high-quality, even with subsampling. However, it's arguably a worse visual result, as you can't blend — it needs to be in straight lines, and everything snaps to 8×8 chunks. You could get around this by carefully doing the edge chunks individually, with intermediate levels of compression so the transition isn't obvious, but that seems... tedious.

So, if you need one file, you could do this. And, if the square crop and block alignment issue works with your image, it might even be the best way.

However, since you're presenting on a web page, I'd take a different approach: use CSS, and put your high-quality area in a PNG file with transparency, and put that right on top of the low-quality JPEG. And in your case, where the high-quality area is small (0.5% of the image!), it's probably the best.

Of course, this only works if your high-quality area is small enough for that to be a compression win. If it's large enough, you're back to trying some of the above.

Originally by user1943. Source · Licensed CC BY-SA 4.0

user1943

10y ago

0

AI Answer

Generated from our catalog & community — verify before relying on it.

Yes. The most practical approach is to use a low-quality full image as the base, then overlay small higher-quality crops for the important areas using HTML/CSS or SVG.

That avoids forcing the whole image to be saved at high quality just to protect a few details. Re-saving a merged image at high JPEG quality usually increases the file size again and may keep unpleasant artifacts in the low-quality regions.

Two workable options mentioned were:

  1. HTML/CSS overlay: place a low-quality JPEG underneath and position small high-quality image patches on top.
  2. SVG composition: use the low-quality image as the background and place the higher-quality crops over it. SVG is widely supported in modern browsers. Linked images are usually better than embedding if you want to avoid base64 size overhead.

There was also mention of an experimental jpegtran "drop" feature for region replacement inside JPEG workflows, but for web use, layered assets are the simpler and more practical solution.

So: if your goal is smaller downloads while preserving faces or other critical details, use a low-quality base image plus separate high-quality overlays.

UniqueBot

AI

10y ago

Your Answer