SUCCESSFUL WEB PAGES

How to Optimize Graphics


 
Optimizing graphics is one of the most important things you can do when building a web page.  Here's exactly how to do it.  We'll use screen shots and example commands from the freeware program Irfanview, but the principles and general steps apply to almost any graphic editing program.
 

 
STEP ONE:  Load the graphic into your editor.
 
 

Use the FILE OPEN command from the top menu bar and load the graphic or photo.  It doesn't matter how large in dimensions or file size the graphic is.  You'll be able to adjust it for web use.

 
 
STEP TWO:  Enhance the Picture.
 
 

Use the IMAGE ENHANCE command from the top menu bar (or SHIFT G) to bring up the enhance options.  From this screen you can use the slider bars to lighten the picture or brighten the colors or contrast.  You may also adjust the entire spectrum of "brightness" (gamma).  All of these are common adjustments to graphics, particularly photos.  After you make the changes, click the OK button.  It's best to make all your enhancements to the graphic before you resize it.

 
STEP THREE:  Resize the Picture.
 
 

Use the IMAGE RESIZE command from the top menu bar (or CTRL R) to bring up the RESIZE options.  From this screen you can choose pre-selected sizes or give exact dimensions or a percent to shrink or enlarge the graphic.  Common sizes for web photos are 80x60, 160x120, 320x240, 640x480 and 800x600.  It's a good idea not to go larger than 800x600.  (Remember, the smaller, the better).  In this example, we'll resize to a width of 320x240.  Click OK to apply your change.

 
STEP FOUR:  Examine the picture and "finish up".
 
 

After you've enhanced and resized your graphic, you're ready to save as a JPG for use on your web page!  Note in some sophisticated graphic editors (like Photoshop) you may have to take a couple of extra steps to finish up.  For example, you may have to "flatten" layers, or change the mode of the graphic to a compatible type (such as RGB).

 
STEP FIVE:  Save the picture
 
 

Use the FILE SAVE command from the top menu bar and save the graphic or photo.

Typically, you'll want to give the file a new name so as to not overwrite your original graphic, and save as type JPG.  (Use the GIF format type if you have a graphic with a plain background and you want to make that background transparent.)

Before you click the SAVE button, click on the OPTIONS button to set the level of JPG compression.

 
STEP SIX:  Set the JPG compression level.
 
 

On this screen, you'll see two important options for JPG, and one important option for GIF files. 

Set the slider bar for JPG quality.  Using 70 percent is a good place to start.  Sometimes, you can go as low as 30 or 40 percent and still have acceptable quality.  Would you like to see how our sample photo looks being saved to various levels of quality?

You also have the option save as "progressive" JPG.  This means the graphic will be displayed gradually, in layers.

 

For GIF files, this is where you can set the transparency color to make the background "invisible".

That's it!  You're all done.  Click OK to accept your options and then click the SAVE button.

 


Back to Successful Web Pages

Click here to go back to previous page


 

Copyright (c) 2002, Keith Turbyfill.  All rights reserved.