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