Return to the Garden Photo Gallery Forum | Post a Follow-Up

 o
Compressing images - how to

Posted by Chris_ont 5a Ont (My Page) on
Sun, Sep 18, 05 at 12:41

Hi
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)

Image hosted by Photobucket.com Image hosted by Photobucket.com

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 that some folks have their computer monitor settings at an 800x600 pixel resolution either because they need or like things larger or because they don't know that they can change it to a higher resolution. Lower resolution means that you can fit less stuff onto your screen, but everything is larger. Keep your images less than 600 pixels or so in width or they won't fit onto smaller screens.

Check your software's menu bar for the command to "resize" or "resample" your image. You may see measurements in inches or pixels. Forget inches - the web works in pixels - the units used to measure what's on your screen. The image below is 500 pixels wide.

Image hosted by Photobucket.com

(Note, changing the RESOLUTION of your image is not the same as changing its size although both are calculated in pixels. You can leave the resolution of your image the way it is - it's the physical size of the image you are changing. Complicated? You betcha.)
Just look for the part where you can change the height and width settings of your image. Make sure you change only one - which ever is more important for you. Your program will calculate the other to make sure the image stays in proportion.

Decide what size you want your image to be and change it. When you make an image smaller, it will get just a little bit blurry. You may be able to fix that with the "sharpen" filter of your program, or just leave it. Sharpening adds contrast, contrast adds file size.

NEVER try to make your images larger than how they came out of your camera or scanner. This almost always results in blurry, artifacted images. This is another reason why your pictures start out so large. You can always make them smaller.

Once you are ready to save your image you can add the compression that will get the image to the point that you can send it out over the web (post on a web page, forum, send by email etc).

This most important step usually happens at the point of saving your image. Click on "save". Depending on your software, a dialogue box will open which, among other things, will ask you for a compression ratio. This is where you need to experiment with your software, since not all are created equally.

Compressing an image will reduce the quality of your image. No way around that. However, the amount of compression and the type of image you have will dictate how much quality you will give up in order for a better download time. With practice, it may be very little.

Below is an image of Microsoft's Image Editor. Very simple but surprisingly effective. The sliding scale lets you set your compression.

Image hosted by Photobucket.com

Other programs, such as Photoshop have far more complex processes (instead of "save as" choose "save for web" to get to the appropriate dialogue screens).

Your goal is to get your image well below 100kb. Some web sites don't allow images larger than 50 or 60 kb! Anything over 200kb is very tedious for people to download, especially if you are posting more than one image. I try to keep all of my online images under 50k. The smaller, the better.

HOWEVER, this forum is a little more forgiving. Many garden images are supposed to look their best. You don't want your beautiful daylily to colour-shift because it's compressed too far. The folks here tend to accept longer downloads (although NOT 1000kb!!!).
However, if you are posting an image of your broken garden shed or leaf damage, go ahead and compress it as much as possible while still making your point.

The compression process is irreversible! Once you've saved your image with this compression, it's permananent. So be sure to experiment with your program for a bit (make a few copies of the same image and save at different compression rates) to become familiar with its capabilities. Always save a "good" copy of your image in another folder.

File Types
While there are many file types that can be used for images, right now the best options for web use is the JPG (jay-peg) or the GIF (pronounce that as you will) format. PNG is a newer option that is not yet as widely supported.

You will be given the file format option when you save the image (one of the drop-down menus at the bottom of the "save" dialogue window).
Basic rule of thumb: Photographic images = jpg.
Gif is used for images with single flat colours, such as logos, ads, cartoons.

Be sure that compression and saving as jpg is the last thing you do. JPGs by design compress images a little, even if you don't add more and so EVERY TIME you save your image as JPG, you lose a little quality.
If you are going to save an image (for example, your "Good" copy), save it first as a TIFF or PSD (photoshop) file and work with that. Save as JPG only when you're getting it ready for the web.

I hope this is of some use to you. Please post if you have any question or additions about this subject. (If there already is a FAQ or post about this, my apologies)

Cheers
Chris
www.NerdsUnlimited.com


Follow-Up Postings:

 o
RE: Compressing images - how to

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!

~Rosemarie


 o
RE: Compressing images - how to

  • Posted by Herb Victoria, B.C. (My Page) on
    Sun, Sep 18, 05 at 13:09

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


 o
RE: Compressing images - how to

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).


 o
RE: Compressing images - how to

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 :)
C.


 o
RE: Compressing images - how to

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.


 o
RE: Compressing images - how to

Chris,
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:)


 o
RE: Compressing images - how to

Nice post Chris. My order is different.

Crop-resize first. In that order.
Color/bright-dark adjustments next.
Sharpening.
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.


 o
RE: Compressing images - how to

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).


 o Post a Follow-Up

Please Note: Only registered members are able to post messages to this forum.

    If you are a member, please log in.

    If you aren't yet a member, join now!


Return to the Garden Photo Gallery Forum

Information about Posting

  • You must be logged in to post a message. Once you are logged in, a posting window will appear at the bottom of the messages. If you are not a member, please register for an account.
  • Please review our Rules of Play before posting.
  • Posting is a two-step process. Once you have composed your message, you will be taken to the preview page. You will then have a chance to review your post, make changes and upload photos.
  • After posting your message, you may need to refresh the forum page in order to see it.
  • Before posting copyrighted material, please read about Copyright and Fair Use.
  • We have a strict no-advertising policy!
  • If you would like to practice posting or uploading photos, please visit our Test forum.
  • If you need assistance, please Contact Us and we will be happy to help.


Learn more about in-text links on this page here