Images are good design elements that will enhance a web site when used properly.  The following is a tutorial in how to use images within a site, helping pages load quickly and in turn, keeping visitors at your site.

It is our desire to provide basic answers to frequently asked questions regarding graphic use and sizing.  If you have information you'd like to see here, please contact us at Infinite Realm. If you'd like to link to this page...feel free!

JPG or Gif?

Sometimes it's difficult to decide which format would be best for a certain application.  A good rule of thumb is simply this:  If your graphic has lots of colors, use a JPG and if it has solid color, or black and white or line drawings, use GIF. 

A good example of a JPG is a photograph, usually having many colors,  shades, and shadows & possibly even gradations. 

A good example of a GIF is clipart, usually having one or several solid colors, or plain black and white.

Both JPG & GIF files are "compressed" image formats.  This means the original image you used was compressed to make the file size smaller.  In most cases this also makes the image smaller. 

A good thing to remember is that each time you save a compressed file, it becomes more compressed, removing some of the pixels needed to keep a smooth-looking picture.  After saving the same file several times, you'll begin to notice that it seems blurred.  This alone is a good reason to always begin with a copy of the original photo, thereby preserving the original for future use. 

It is preferable to save the original file in TIFF format, which is an un-compressed format.  This means you retain every pixel of the original photo, which means a TIFF file is very large.  

Most small web graphics are saved in GIF format.  These files have few colors with no gradations.  JPG files are usually larger than their GIF counterparts and usually appear to be of lower quality.

The easiest way to save photos for web use is with a software title which has the  "save for web" format available.  This option lets  you compress the photo using a "two-up" view, allowing you to see what settings work best to give the best finished appearance.  If you need to, save your image in both JPG and GIF formats and compare them to see which format works best for your application.

Many Software titles are helpful in creating transparent images...

A transparent image allows the background of the page to show through so the image appears to have no visible border around it.  This is especially useful when the page background is a different color than the image background.  The only image formats that support transparency are GIF and PNG. 

It is best to make the background color of your image the same as the background of the page you intend to place it on, even if you plan to save it as a transparent image.  This will reduce any possibility of jagged edges. 

Animated GIF's are created by piecing together separate frames, then setting timing for each frame, thereby making the image appear to be animated.  Animated GIF's are best used with small icons or logo's, mainly because of file size.  Not all browsers support animated GIF's, and those browsers will typically display only one of the frames.  Keep in mind that the non-supporting browsers must still download the entire GIF animation to display it even one frame. 

PNG (portable network graphics) format is not supported by all browsers.

AND last but not least...the average internet user truly dislikes all those moving parts, so it's probably best to keep things simple.  The quicker your graphics load the more likely a viewer is to stay on your site and if you're site plan is to bring you business, that's exactly what you want!