Compressing images - how to

chris_ont(5a Ont)September 18, 2005


With so many wonderful images being posted here, it's important to remember that, if they are too big, it will take a long time to download for those members with dial-up connections. No fun at all!

I'm going to post this in several forums - we should probably put together a FAQ on this, however that's done. Web graphics is a huge subject area, but it doesn't have to be all that complicated.

This is a lot of stuff - if you reduce the width of your browser window it may be easier to read.

Hopefully, you will find this helpful.

File Compression

When images are scanned or downloaded from a camera, they are often in a high-resolution format that is unsuitable for the web (or for emailing) simply because they are too large or because they are of the wrong file format. (You do want a high resolution for printing purposes, though, so always, ALWAYS, keep a "good" copy before you do anything to an image)

There are many ways to enhance and improve images, depending on your skill with image editing programs but, most fundamentally, you may want to:

  • change to overall physical size of an image (how large it is on the screen), and

  • add a little compression to reduce its file size (in kilobytes, this affects how long it takes to download).

How you do this depends largely on which program you have on your computer. Your camera or scanner may have come with some software, you maybe using Microsoft Image Editor, or you may have something more sophisticated, such as Photoshop or Photopaint. The "Paint" program that comes with Windows is not unsuitable.

So let's say you have an image of a pretty flower. Let's say it came off your camera at about the size of your visible screen and a megabyte in size (1,000kb). Way too big.

First, do what you will with your image (colour correction, sharpening etc). Then look at it critically to see if it could stand a little cropping to get rid of unneeded bits and pieces.

See the images below. One image might be selling a house, the other is about driveway paving. Decide what is important about your image and crop it down. (artistically, of course, keep composition in mind. Single items often look better slightly off-center, horizons generally don't go in the center of the image etc)

Now you've taken the first step toward reducing download time - your image is a bit smaller.

Now you can resize it: change the overal size of the image to something that fits comfortably onto people's monitor. Larger images tend to look nicer, but you will have to give up some impact for fast download.

Tip: Low contrast images tend to compress better into smaller file sizes than images with sharp contrast between light and dark areas. So if your image doesn't have a lot of strong colour changes or light/shadow, you can "afford" to keep it a little larger.

Also keep in mind...

Thank you for reporting this comment. Undo
rosemariero(Z9 SW SUNDiegoCA)

Chris, thank you SO MUCH for taking the time & effort to give us this lesson! I will try to make use of it...practice, practice, practice! I appreciate you sharing your knowledge with us!

Would you advise use of clickable thumbnails as a good alternative? I have found a few people who couldn't see the thumbnails due to their firewall (maybe?), though.

I made the mistake of compressing/resizing/resampling without keeping a copy of the original & then, when I wanted to make a large print I was unable to get a quality pic. :( Live & learn to SAVE your original elsewhere!


    Bookmark   September 18, 2005 at 1:06PM
Thank you for reporting this comment. Undo

All that is good advice, but for just compressing a picture file, Jpeg Optimizer is also very easy to use. You can download Jpeg Optimizer from this site - Click here

    Bookmark   September 18, 2005 at 1:09PM
Thank you for reporting this comment. Undo
shrubs_n_bulbs(z8/9 UK)

I save every image with a jpeg quality setting of 70, just for convenience. A typical photo looks great at this setting (check out any of my posts, I think the image quality is good) and the size is suitable, but there are subtle imperfections from the compression. Look at the second picture to see what happens to narrow lines and sharp edges of colour in JPG files (image saved at quality setting of 70).

    Bookmark   September 18, 2005 at 3:25PM
Thank you for reporting this comment. Undo
chris_ont(5a Ont)

This is where you need to save as GIF instead of jpg, Shrubs. Flat colours (colours without gradients) like this map work better as gif and still give you a decent file size.

The first image here is a gif file, at 29 kb, which is a reasonable download (although physically too big for people with low-rez monitors - they will have to scroll)
The jpg (right) is not very good and is a larger file (45 kb!). The opposite is true for photographic images.

Therefore: photos=jpg, drawings=gif.

(yes, there are exceptions, but that just gets complicated :)

    Bookmark   September 18, 2005 at 5:04PM
Thank you for reporting this comment. Undo
shrubs_n_bulbs(z8/9 UK)

Chris, are you running at 1600x1200? I didn't think anyone would be able to see the two images side by side! But the artifacts were not so clearly visible on smaller images.

    Bookmark   September 18, 2005 at 5:59PM
Thank you for reporting this comment. Undo

I want to thank you for the excellent lesson. I am with Rosiemarie and you on the ALWAYS SAVE a good copy. Man, I wish I'd read this a few years back...

I learned some new things.THX, Karen:)

    Bookmark   October 11, 2005 at 10:53PM
Thank you for reporting this comment. Undo
iris_gal(z9 CA)

Nice post Chris. My order is different.

Crop-resize first. In that order.
Color/bright-dark adjustments next.
Saving with specific compressing chosen.

A trick for beginners having trouble with file size: when shooting a flower specifically for posting I get some distance away - perhaps 6 feet. When I crop the flower in the image the resulting file is sometimes around 80Kb, if I've done it right, and doesn't require compression.

    Bookmark   October 12, 2005 at 3:12AM
Thank you for reporting this comment. Undo

the image-hosting site of photobucket has a feature that allows you to do this, too, but your options are limited to 25, 50 and 75 percent of the original size (kb).

    Bookmark   October 12, 2005 at 11:33AM
Sign Up to comment
More Discussions
Identify this plant please
Hi can someone please tell me what this plant is called...
please help id this plant
My friend grew this cute plant from seeds that he found...
Accessible Gardening Win-Win
Here's a win-win for saving your back, gardening from...
what's growing out of my compost?
Can anyone identify this plant that has erected from...
Sponsored Products
Coral Hanging Jewelry Armoire
$94.99 | zulily
Oval Handle Compression Angle Stop - 1/2" Nom X 1/2" or 7/16" Slip Joint
Signature Hardware
Jade Tibetan Orange Professional Yoga Mat - 368TO
$62.95 | Hayneedle
3x9 Inch Ivory Pillar Candles (Case of 12)
elizabethW Collection Silk Hot/Cold Pack
$49.00 | FRONTGATE
Pair Of Angle Valves With Bendable Copper Pipe
Hot Cross Handle Straight Stop - 5/8" OD x 1/2" OD Compression
Signature Hardware
Florence Knoll Style Armchair-Orange Tweed
IFN Modern
People viewed this after searching for:
© 2015 Houzz Inc. Houzz® The new way to design your home™