Crunching photos for the web (and forum) with the GIMP
FedoraForum.org - Fedora Support Forums and Community
Results 1 to 11 of 11
  1. #1
    Join Date
    Jun 2006
    Location
    Paris, TX
    Posts
    24,107

    Post Crunching photos for the web (and forum) with the GIMP

    Resizing and crunching images for the Web with the GIMP:


    IMPORTANT CAVEAT: ALWAYS work on a COPY of your original photo. Sometimes shtuff happens, and you'll hate yourself and cuss me if something goes wrong and you mega-bork your only copy of your prize winning daffodil picture.



    Size = Speed: (Subtitle: Nobody loves a horizontal scrollbar) It doesn't take long to get totally spoiled by 22 inches of LCD real estate, but the truth is most laptops and most desktop monitors are still in the 1024x768 range. Therefore, when a browser window is open, there really isn't much area to display your phantastic photo, (or screenshot) and nobody loves a horizontal scrollbar. So when crunching photos for the web, shoot for 800px width maximum, 600px is better, and 400px is about all the bigger you'll want to get for a page with multiple columns. Load times are also an issue on the web, and load times are all about file sizes. I'm sure you've all ended up grinding your teeth waiting for a photo or graphic to load ... one line at a time. Don't be that guy. He is NOT loved. He never gets invited to the good parties. Or any, for that matter.

    Selective: Only focus on what's really important. If a 300px shot will do it ... make it so. If the cool moon shot you want to share is only 200px of the actual moon ... lose the empty sky around it! The overall impact of your photo will be determined far more by the subject you wanted, rather than the stuff around it you didn't. A good cropping job can in many cases greatly reduce the need to "crunch" a photo.

    Anything else would be ... Lunacy!

    Saturation: Know your medium. Print bounces light off a page which has no inherent luminosity. Monitors, however, do. They filter light coming from behind the LCD film, so you can saturate harder for the web. (CRTs are nothing BUT luminous!) Therefore, you can let your image's colors work their magic in ways not possible in print. This means you have a wider dynamic range to play with. Use it! Strong lights and strong darks with clear colors between makes all the difference in your photo's impact on the viewer.

    Catching the "glow!"


    Washing the windows: (How to harden your colors.)

    Harden your colors? Huh?! Whuzzat?!

    In short, the opposite of that grey or blue haze in your pictures -- kind of like looking through a dirty window. There are several tools you can use to correct this, including Brightness/Contrast, levels or curves adjustment. My personal preference is the levels dialogue. Once again, duplicate your working layer, and add an alpha channel to the duplicate. We'll deal with the alpha channel in a minute, but first select the colors>levels menu item to get the dialogue box. We'll work with the input section here.

    Duplicate your layer and add an Alpha channel.

    Fetch the Levels tool here.



    The Victim:

    Ugh! That's not good!

    Fast and dirty? Grab the black point slider (on the left) and move it right until the colors and blacks crisp up. Then grab the middle slider (Gamma) and move it left or right -- in small increments -- until you get a natural look. Then grab the right slider (white point) and move it left to add any needed highlights brightness. Just like sharpening, a little adjustment on these controls goes a long way. If you like what you've got, select OK. If you don't, either try again, or hit reset to start over, or cancel to give up completely. For that slight blue haze, select the blue value from the drop box, and harden the black point and reduce the Gamma until the haze clears, but not so far you start creating a martian atmosphere. You can now click between your working layer and the original layer and see which one you like best. (Later you can delete the one you don't want.)

    The tool controls

    Much better colors ... but still fuzzy as the devil due to the crunching process. Needs sharpened!





    Next post!

  2. #2
    Join Date
    Jun 2006
    Location
    Paris, TX
    Posts
    24,107
    Sharpness: Preparing photos for the web means knowing where the pitfalls are, and a big one is the fact that monitors pixelate, and crunched photos lose their sharpness. You've got to put the details back in when you crunch a photo. The sharpening tools in the GIMP can and should be your friend, but know the working limits of the tool's capabilities. To get to the tool, from the image menu bar select: Filters>Enhance>Sharpen. Select your strength from the slider or the spin box or direct entry. From practice I use the following values as baseline. First sharpening (before reducing) = 29~39. Adjust to tolerance. After the first reduction (1/2 original size) 19~9. After the final reduction, 09~0 for final effect. Once again, adjust to taste, and watch for over-sharpening. It really does look nasty.

    Fetch the tool!

    Apply the tool!

    Eeeeeew! Way over done! Hit the undo and try again!

    Ah! Much better. In fact, just about right.

    This tool can actually help save a marginally soft shot, but it isn't going to fix a complete failure to focus. The caveats to sharpening are, too much sharpening is worse than not sharp enough. Those nasty white halos around small items and well defined edges, and hard white spots here and there are a sure sign of trying to make the GIMP fix a focus problem.

    Another caveat is! Sometimes sharpness ruins a mood, too. Pulling your wife/girlfriend/significant-other's tiny little facial wrinkles into stark focus is a sure fire way to spend the next two weeks wondering how long it will take the bruises to heal ... whilst sleeping on the couch.

    Know what to sharpen ... and what to blur. Much of the time, an overall photo sharpening isn't the best way to handle a shot. If you have a nice crisp subject, and the background is nicely blurred, a whole shot sharpening isn't going to help much. All it's going to do is add a nasty grain to the background. GIMP to the rescue! Use the Blur / Sharpen tool in the left tool box and a FUZZY brush (sized to suit) to selectively sharpen only what you really want clear.

    Sharpen in stages. A little sharpening goes a long way. Whether doing an overall or a selective sharpening, do a little bit at a time and in relatively low strengths. (A handy way to handle this is to duplicate your working layer and get comfy with the undo stack.) Once you get your new layer all tricked out, try reducing its opacity (increase transparency) until it looks natural. (You'll need to add an alpha channel to your working layer. Right click the layer and select, "Add Alpha channel.") Don't worry about flattening the image for the final crunch. That will happen automagically when we do the final merge and save.

    Unsharp Mask: A quick (and completely biased) word here about the Unsharp Mask tool. Yeah. It's there, and some people actually use it, but it's the photographic equivalent of using a ball peen hammer on an ingrown toenail. It just ain't pretty, and when you're done .. you probably won't like the results.

    White balance in post production: Fixing FUBARS. If you forgot to white balance your camera (by selecting or shooting something white in the shooting arena before your capture session begins) you can usually fix that fast and dirty by going to the menu. Colors>Auto>White Balance. Most of the time this works, but sometimes it seems like the GIMP is on a controlled substance, and gives some truly silly results. In which case, it's time to hit the undo, and settle into some serious work on the levels.

    Resize: Now to the meat of the matter. Resize in stages, and never more than half of the starting value in the pixel box. Depending on your camera and its settings, your originals are going to be huge. Way too big to post on-line. Select: Image>Scale Image. This gives you the dialogue box.

    Fetching the dialogue box.

    A word to the wise here. Remember that everywhere you are going to be displaying these images -- thinks in RGB, and pixels. If you want to be synced up with your tools and your goals, you need to think in these terms yourself.

    The Scale Image Dialogue.

    Settings here should be as follows: Leave the ratio chain linked. This eliminates having to double enter info. Width is more of an issue in web work than depth, so focus your adjustments on this.

    Resolution. Leave this chain linked too, or things will get really ugly, really fast. Most cameras save jpegs at 72 dpi. If you're in Linux, your monitor and vid card are most likely set to 90~98 dpi, with a default of 96. Most everybody else is set there too, so try not to drop under that value. During the adjustment process, I usually alter the resolution settings to 400. Personal choice. Have it your way. Experiment with file sizes and resolutions until you hit on your own nirvana, just remember the lower you go, the worse it looks.

    As I mentioned above, sharpen between each reduction stage, but in steadily reducing strengths. Also check your colors again to make sure you aren't crunching into ugly. You'll soon get a feel for what works for you.

    Reduce this value each time.

    Percentages in Jpegs: Overly compressed jpegs are as ugly as home made sin. Shoot for your highest quality value which still gives you a reasonably decent file size. You really don't lose much fidelity between 100~85% quality, but anything under 75~50 starts to get ugly ... fast. A good rule of thumb is to shoot for under 120K per photo. Sometimes you can get up to 300, but anything beyond that will get you summarily deleted from any dial-up user's Christmas Card List. Once you've got your photo crunched, right click the layers box and, "merge visible layers." Then go to the File menu, select Save as, and park the thing where you want it to stage for upload.

    Here's where you get to make those jpeg quality decisions. There is a preview function here, and I strongly suggest you use it.

    Bingo! Crunched, cleaned, sharpened, saved and ready to go.










    Epilogue.
    One final thought.



    Changing History: Can you really trust your own eyes?

    The GIMP gives us a stunningly powerful tool to manipulate images. That's both a good thing ... and a bad thing. As illustrated below, just because you've seen it on the web with your own two eyes ... doesn't mean that's what really was.

    Before ... After. .................. <....>


    Happy GIMPing.

  3. #3
    Join Date
    Jun 2006
    Location
    Paris, TX
    Posts
    24,107

  4. #4
    Join Date
    Jul 2004
    Location
    Colton, NY; Junction of Heaven & Earth (also Routes 56 & 68).
    Age
    73
    Posts
    23,563
    A wonderfully complete guide; thanks, Dan! It's amazing how much your suggestions have helped me.
    Linux & Beer - That TOTALLY Computes!
    Registered Linux User #362651


    Don't use any of my solutions on working computers or near small children.

  5. #5
    Demz Guest
    to much to read but good guide Dan

  6. #6
    John the train's Avatar
    John the train is offline Techno-Womble - Retired Community Manager
    Join Date
    Aug 2006
    Location
    Gloucestershire, U.K.
    Posts
    1,843
    Great guide Dan, I've bookmarked it on my imaging desktop. BTW, as you no doubt know, levels can also be used to recover scans from old colour photos that have faded to magenta.
    To get the right answer, one must first ask the right question!
    Desktop F20 ( 64 bit )
    Laptop F20 ( 32 bit )

  7. #7
    Join Date
    Apr 2005
    Location
    earth
    Posts
    1,355
    Thanks Dan.

    Great tips I need and can use. You might be surprised at how rare these things are!

    Nice job taking out that sign, looking forward to your masking and cloning tips.

    Pat Jr.
    x--x--x
    http://www.gnu.org/philosophy/free-sw.html
    Freedom is never Free.
    Pat Jr.

  8. #8
    nieiowrist Guest
    I accept with information: Overly compressed jpegs are as ugly as home made sin. Shoot for your highest quality value which still gives you a reasonably decent file size. You really don't lose much fidelity between 100~85% quality, but anything under 75~50 starts to get ugly ... fast. A good rule of thumb is to shoot for under 120K per photo. Sometimes you can get up to 300, but anything beyond that will get you summarily deleted from any dial-up user's Christmas Card List.

    Oh wow! I'm a stupid spammer who's trying to put junk on an Admin's own thread. How I've even got the brains to breath is a miracle. (Edited by Bob after removing his crud).

  9. #9
    Join Date
    Jun 2006
    Location
    Paris, TX
    Posts
    24,107
    Oh Jeeze, guy! You gotta be kidding! Spamming an Admin's thread? In broad daylight?!?

    Dang! I'm almost tempted to shoot to wound. You've got enough troubles just staying alive being that stupid!

    ...


    ...


    Nah! Just kidding. You just hang out right here for a minute, and I'll go get my hat.



    <..--**::**--..>

    Yeah. About that "too stupid to live," problem.

    I can fix that for ya.

    BANG!

    (Tinkle, tinkle, clink!)

    All fixed. Have a nice day.



  10. #10
    Join Date
    Jul 2004
    Posts
    310
    Hate to sound ungrateful as this is a very useful thread but could it be made available as a pdf file?

  11. #11
    Join Date
    Jun 2006
    Location
    Paris, TX
    Posts
    24,107

Similar Threads

  1. Future Number Crunching
    By SlowJet in forum Linux Chat
    Replies: 25
    Last Post: 14th December 2006, 12:41 AM
  2. Replies: 0
    Last Post: 18th May 2006, 03:14 PM
  3. Replies: 2
    Last Post: 8th July 2005, 10:05 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •