Computer Buying
Computer Building
The Webcast
The Forum
Monthly Broadcast
Why Widescreen?
HDTV Images
What file formats should I use when creating graphics for my site?

When creating graphics for your web site, it's important to use the correct file formats. Not only do you need to use a format that a visitor's browser will understand, you need to use a format that is appropriate for the type of graphic you create.

Typically, the two main formats are GIF and JPEG. PNG is a third format, but some browsers may not support this format completely. Therefore, we'll stick with the other two for this tutorial.

GIF images can have a maximum of 256 colors. However, it compresses solid colors much better than JPEG. This means it is suitable for graphics like buttons, backgrounds and other items with simple colors, but not for photos or elements with shadows or gradients. For example, if we created the buttons to the left of this page with graphics, we would use GIF elements because we would need few colors to create them. However, we used a bit of trickery to create our buttons using tables and cells with rollover text, instead.

JPEG images can have thousands of colors, but it is a lossy format that can make solid colors look blotchy and pixelated. Therefore, JPEG is great for photgraphs and detailed graphics (like the ones used for our title banner), but is less suitable for graphics with simple colors.

When saving a graphic to a web format, be sure to keep an eye on file size. Programs like Adobe Photoshop tell you how fast a graphic will load on various Internet connection speeds, so you can pick a good compromise between speed and quality. Don't use a higher quality than you need or your page will be slow to load. Play with the settings a bit to make the graphic look acceptable while avoiding huge file sizes.

In some cases, it is possible to create a low resolution version of the graphic that will load before the full version. This allows the visitor to begin seeing the page structure even if it hasn't completely loaded. When they encounter a blank page for too long, people tend to give up and go somewhere else.

Another option is to interlace your graphics. This allows them to load a few lines of the graphic at a time, spaced out from top to bottom. Again, this provides a low resolution placeholder while loading continues, but gets something on the screen faster.

©Copyright 2003-2007 Kimberlite Productions and GadgetFAQs.com
No part of this site may be reproduced or redistributed without written permission.

Some of the tips and advice may void your equipment or service warranty. When in doubt, consult your owners manual and/or seek professional assistance. GadgetFAQs.com does not recommend performing any task that may damage your equipment, void your warranty or violate applicable laws. The use of certain software may violate DMCA or other copyright laws. Since laws vary, depending upon your location, check local regulations regarding any activities you choose to engage in.

Apple, Ipod, ITunes, Windows, DirecTV, Dish Network, Dell, Blu-Ray, HD-DVD and other product names are trademarks of their respective owners. Use of those names is for review or demonstation purposes only. No infringement is intended or should be implied. In addition, no endorsement should be inferred.

GadgetFAQs.com is not responsible for the content of any outside site it may be linked to. In addition, GadgetFAQs.com is not responsible for any innaccurate or deceptive claims made by any outside web site. Links from GadgetFAQs.com to other sites does not imply our endorsement of those sites.