Browse by title articles:

Faster Loading Graphics

by Robert Smith    

TIP: Many web page design programs allow you to resize your graphics by dragging a handle in or out, this does nothing to the size or loading time of the graphic it just changes the size the graphic is displayed on your webpage, resize your graphics in a graphics program instead.

JPG Graphics

JEPEG or JPG are basically the same, they use compression to make the graphics load faster but the amount of compression used can vary by a LOT. A small graphic may look just as good on the web compressed anywhere from 60% to 90% of the original size.

Most graphic programs assume you want the highest quality image possible and will default to using minimal or no compression. The compression option in software often is expressed as the "image quality". When you are optimizing graphics for the web you want to use the most compression or the lowest quality image that still looks good.

The best images to for JPG are larger, more complex images with many colors and with images with complex reference colors like gold or skin color. Larger photo will always load faster in compressed JPG format.

TIP: Using compression degrades your image quality. Always save your files under a different file name and always start with the original when testing various compression ratios. Once compressed and saved the graphic can never be returned to the original quality.

GIF Graphics

The GIF format is best for smaller graphics and for those with fewer colors. Text and graphics with larger single tone areas work best in GIF format.

While JPG images use RGB (or full color) GIFs use something called Indexed Color. The GIF format reduces the number of colors in a graphic by snapping colors that are nearly the same into the same color.

The default GIF graphic will use either the 256-color or the 216-color web-safe palette. Choose the web-safe 216-color palette when possible so your graphics will look the same in browsers on the Internet as then do when you work on them in your graphics program.

You can choose the number of colors to index your graphics. The fewer colors you can use the faster the graphic will load and the smoother it will appear.

When you choose a font to display your text in your webpage unless the same font is on your visitor's computer some other font will appear, the default is Times Roman. If you want to put your main headlines or logo in an unusual or more distinctive font style you can type them in the color and size you want in your graphics program and save them as GIF images.

Text will usually look best in 4 to 8 colors, the file size will be small and they will load pretty fast unless you don't use too many graphics on your page. More complex graphics use 16 colors or 32 colors. In rare cases or for use on the smallest graphics you may choose 64, 128, or even 216 colors but the file size will grow accordingly.

Smaller text will be sharper if you create the text at least double the size you eventually want on your web page. Reduce the size before you save it in GIF format. Again, always work from the original and save your files under a different name.

Once a graphic has loaded once it won't have to be reloaded each time it's used so GIFs work great for Text graphics in headers and footers.

Transparent GIFs

Most graphics programs offer the option to make any color you choose transparent, this is useful when your graphic will be inserted into a background.

TIP: If you are planning on inserting your graphic into a background, first create your original graphic within a similar background color, that way the pixels surrounding your graphics will disappear into the background when you insert the graphic into your page.

Graphics Software

I use Adobe's Photoshop 6, which offers the most control but requires a PHD in the Graphic Arts to learn to use and a bank loan to purchase. For most designers I would recommend Paint Shop Pro because it's 20% of the price of Photoshop, its powerful and friendlier to learn and use.

Since it's shareware it's free to download and use for 30 days so you can optimize your graphics free with the trial version. There is also an excellent animation program available to animate your optimized graphics. Paint Shop Pro comes with file EXPORT wizards to help you create and optimize your web graphics.

Paint Shop Pro

>> http://www.jasc.com/products/psp/

>> http://www.jasc.com/download_4.asp?

Summary

Use graphics sparingly when required to establish your unique Internet business identity

Most web graphics can be optimized to load 50% to 90% faster with little or no loss in image quality.

Save larger more complex graphics in JPG format for the web and smaller graphics with fewer colors or smooth tones in GIF format.

Your pages may look better and load in half the time using Paint Shop Pro free shareware file export wizards to optimize your web graphics.


-----------------
ROBERT SMITH helps thousands successfully market their Internet based home business. You'll find tons of free marketing tools & resources on his Internet Marketing web site at: http://www.smithfam.com/.