Making Bad Images Look a Little Better

Posted March 20th, 2008 by Mike Cherim

This is a technique I use to make less than great images look a little better. Bear in mind this isn’t a good technique for print-quality images, nor is it terribly helpful for really large images where down-to-the-pixel perfection is required, but for web-use images under 800×600, this can be a real time saver — a down and dirty technique — with no heavy tools required, meaning most mid-range image editing software can handle this. Here’s how it’s done… In six, or so, easy steps. A poor man’s technique.

Step 1: The Original

Well, I’ll be, this isn’t a step at all. I guess there are only five steps. Anyway, I got this image from My Flicker, but I downgraded it by reducing export quality and increasing sharpness and contrast for this tutorial. The image had characteristics that I felt made it was a good candidate for this. In case you’re wondering, it is some sort of hover or syrphid fly, I think. Even though I am the bug guy, sadly, I haven’t looked it up. It is an extremely cool bug, though. This specimen and several others spent their days last summer flirting with some basil flowers (shown), hovering all the while.

1. Original image of syrphid fly.

Step 2: Make an Overlay Copy

Or is that step 1? Hmm. Oh, well, let’s continue. Okay, this is important: make a copy of the too-sharp, too-contrasty, noisy, and distorted image above and paste it over the original. To ensure it lines itself up properly, reduce it to about 50% transparent so both layers are visible. Once lined up, reduce the upper layer to 100% transparency and select the underlying layer.

2. Adding a copy as an overlay.

Step 3: Apply a Gaussian Blur

You should now be looking at the selected bottom layer, the lower image. Apply a Gaussian blur to it. Using Fireworks as I do, the default blur pixel radius is 4.1. This, or a greater number, up to 6 or so should be used, depending on the photo. Yes, it will be blurry, but we’ll change all that. The reason for the blur is to blend those contrasty areas and cover up that noise. Think of it as apply a pancake make up — sort of like powdering your nose.

3. Applying Gaussian blur to bottom image.

Step 4: Adjust Brightness of Bottom Layer

To save some image weight (file size), I darkened the bottom image. Doing this also replaces some of the photo’s richness and depth that can be lost in this process. Some images, if already dark, will probably require an opposite treatment. Experiment.

4. Darken the bottom image.

Step 5: Bring Back the Top Layer

Now the time has come to restore some of the sharpness over that layer of wrinkle cream. As transparency is reduced (opacity restored) the edges will start to appear. The range you should aim for is about 40% to 80%. Somewhere between the two settings will be perfect, a balance between the two layers. You want the edges to be clear, while the areas in between to remain soft enough to hide the imperfections. Yet you still want to retain depth, clarity, and richness.

5. Reduce the transparency of the upper image.

Step 6: Optional Adjustments

Maybe there are actually only four steps. The image above is effectively done. It is an improvement over the (example) “original” and of a smaller file size. But a little more tweaking, to experiment, is always fun, and possible since the settings can still be adjusted. Try adjusting brightness, that’s what I did, or play with transparency some, more or less, to adjust the surreal quality. I did that, too. Apply further file size optimization. I ended up saving a lot over the image above.

6. Adjust brightness of the upper image.

Why it’s Effective

A layer of partial sharpness masking a heavily made up underlying base layer. Another nice side effect of this technique is a file size reduction, as mentioned. For instance, in actual numbers, the original image in this example is a whopping 30.86kb. The second to last image is 23.85kb, and the final image is only 19.40kb. That’s a savings of 11.46kb from the original. That’s a significant amount, at the expense of… well, a slight increase in image quality. What a good deal.

Some Final Thoughts

This isn’t going to make bad images good, but as the title of this post says, it can make them look better. It’s not an effective correction for all images, but it can work for some, especially those with a limited amount of noise, artifacting, positive contrast, or sharpness issues.

It can also be used to purposely create a dream-state or surrealistic scenes. Play around with it. I just redid my hosting site (v5) and applied this technique to just about all of the images, both background and embedded. I made a lot of composites for the site, using good quality images from (great deals over there), but some where a bit sharp, and softening them even a little didn’t do them justice. I started playing around with my previously posted dream scene technique, and I came up with this variant… Voila!

17 Responses to: “Making Bad Images Look a Little Better”

  1. Adam responds:
    Posted: March 20th, 2008 at 10:30 pm

    What is so wrong with the first image? From a photographers perspective the first image is MUCH better than the last, the “fixed” image is too dark, you loose a considerable amount of contrast, and almost all your detail.

    I’m not really sure what you are trying to accomplish in the last photo, but there are certainly more effective ways to go about making an image like the first “better”

  2. Rafael Masoni responds:
    Posted: March 21st, 2008 at 12:12 am

    When I started reading this article, I thought just like Adam: “What’s wrong with the original image?” and from which point of view the last one could possibly be better.

    This image is so rich in details and now they’re gone.
    The “over-layered-blur trick” is old and I think it didn’t fit well in this case particularly.

    PS: thanks for the dial-up warning!

  3. Gill responds:
    Posted: March 21st, 2008 at 9:38 am

    The original image is far too punchy, at least, on my Mac screen it is. I think though I’d have stopped at step 5 if I was just displaying the image for the image sake I think however previous posters may have missed what Mike was trying to achieve.

  4. David Zemens - 1955 Design responds:
    Posted: March 21st, 2008 at 8:18 pm

    Perhaps a different image should have been used. I do think it’s a monitor issue, though.

    I think you hit the nail on the head, Mike. Although your image manipulation is rather subtle, it looks completely different on my old Dell monitor than it does on my new ultrasharp HD monitor.

    Anyone who has done much web developing realizes that sometimes what the end user sees is very different from what we see. Or from what we intended them to see, for that matter.

  5. Georg responds:
    Posted: March 21st, 2008 at 11:20 pm

    It’s definitely a monitor issue. Those image manipulation steps, and your little “white vs. light-gray” test, comes through quite clearly on all my 9 monitors. I would probably have stopped closer to step 5 for a case like yours, as step 6 brings the main object a little to much “out of focus” for my taste - and my screens.

    That the method itself is old doesn’t mean there aren’t a lot of people who haven’t seen it used like this before. All image-optimization methods are old, and are rediscovered and/or reinvented by someone, in some new or old tool, all the time.

    I have a strategy for deliberately setting some of my monitors off - using a number of presets, in order to catch some of the ways people actually see things on their own monitors, just to avoid me working on very subtle “image-corrections” for the web that few visitors can see. Subsequently, I’m not all that concerned with image-optimization anymore, since only a (small) minority will see my images the way I see them anyway - regardless of whether they’re optimized or not.

  6. JackP responds:
    Posted: March 22nd, 2008 at 6:31 am

    Nice technique (whether old or new). Thanks again Mike for teaching me a simple way to do something :-)

    PS I can clearly see differences between the first and last images (notably how much the ‘hairs’ stand out). I’d have to say it depends on what you’re wanting to show: for a post about the insect or plant, I’d say image #1 was better, but for a more generic post, image #5 is probably better as it gets the info across without being distracting.

  7. Gill responds:
    Posted: March 22nd, 2008 at 8:05 am

    @ Mike

    I do think it’s a monitor issue, though. I noticed a lot of people think the background of this blog is white

    Partly down to monitor. There are a lot of people though who think in the 16 standard colours. Whether they really can’t see the difference or whether they’re just not interested I’m not sure. They wouldn’t see the difference between your backgrounds, white is white just as very dark grey is black.

    When I existed in corporate land I had a Cerise Pink suit. All the guys in the office referred to it as my Red suit. I tried on several occasions to point out it wasn’t red but they just couldn’t see it. Pink was what we’d refer to as baby pink or barbie pink, anything stronger than that was red.

  8. David Zemens - 1955 Design responds:
    Posted: March 22nd, 2008 at 8:14 am


    Either way, either a Cerise Pink or a red suit is pretty remarkable. You are going to get the reputation as being the Don Cherry of the web development world! :-)

  9. Gill responds:
    Posted: March 22nd, 2008 at 3:49 pm


    LOL. Strangely enough, at school I was feared for my hockey stick wielding skills.

  10. Rafael Masoni responds:
    Posted: March 26th, 2008 at 10:44 pm

    Sorry, Mike. I didn’t mean to sound pejorative, I just couldn’t find other words to say that.
    But it’s in fact old (not as old as you mentioned but old) and has also been spread and overused mainly by anime (japanese cartoon) fansites and the like. You can just have a peek out there in some forums and see everybody with signature images using this technique. It’s also all over fotologs.
    I’m not saying it’s bad technique though, just that it’s not new and doesn’t necessarily makes images better, at least not by the photography’s point of view, in this case specifically.

  11. Jon responds:
    Posted: May 6th, 2008 at 1:23 pm

    The original looks a lot better… the result looks blured

  12. Altamira responds:
    Posted: June 12th, 2008 at 4:10 am

    First one looks MUCH better than the last

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.