Article by Sam Bryant

Prior to the use of CSS, tables were commonly used for laying out the contents of a page. The task of ordering the tables and graphics was often a complex job of manipulation. When tables get complicated and deeply nested, the resulting code becomes large in size and slow in speed, and managing the table scheme among a team is especially difficult. One concern about the use of CSS-only layouts is that older browsers may not render the code. The use of tables is slightly legitimized in this respect. However, CSS was a W3C recommendation nearly nine years ago, and the chances that a person is using an outdated browser diminishes greatly with each passing year.

Along with outdated browsers goes slow and outdated computers, so the fear of losing part of your audience to large Web-based files decreases with time. However, the use of large file formats for displaying images on the Web not only excludes users with slow computers and weak Internet connections, but also adds to the data traffic on the servers that hold the Web site, which has the potential to slow down access for everyone. The two main formats for graphics on the Web are JPEG and GIF. One great aspect of JPEG is that its compression factor stores the image on the hard drive in fewer bytes than the image is when it actually displays. This helps reduce the amount of data that gets transferred over the network. JPEG is the preferred image type in most sites including mine at http://www.bonshops.com.

GIF is an 8-bit image file that only supports 256 colors but is generally small in file size and shows up the same on both 8-bit and 24-bit monitors. JPEG, on the other hand, supports up to 16.7 million colors in a 24-bit format and will display well on a 24-bit graphics display, but not as well on an 8-bit display. The ability to make graphics appear to be a shape other than square or rectangular is attributed to GIF’s transparency ability. A GIF can be used for simple animations on Web pages by combining a series of images. Rather than using a video file for the animation, GIF simply uses the.gif extension.

A new graphics format was recently released for the purpose of replacing GIF. Its extension is.png, which stands for Portable Network Graphics. Advantages of PNG include variable transparency and cross-platform control of image brightness. The third advantage is that PNG has two-dimensional interlacing, which allows the image to display sooner and is generally readable in half the time of GIF images. PNG also compresses better than GIF in most cases. The advantages of PNG over JPEG and GIF continue to accumulate with the fact that this format allows the storage of graphics at many different bit depths. GIF can only be stored at 8-bits or less while JPEG can only be stored at a 24-bit depth. PNG, on the other hand, can be stored at 48-bit and many specific levels below that. Even outside of Web design, PNG is superior to JPEG. Its compression preserves 100% of the image quality, which means that restoring and re-saving images will not degrade the image. However, one big problem exists with PNG–earlier browsers do not recognize this file extension. Many Web authorities agree that GIF and JPEG should be used rather than PNG until it is more widely supported.

The choice between JPEG and GIF must be made with regards to the context of each situation. Performance and appearance are two big factors affecting the choice of graphic format. Small images, such as icons and buttons, are best shown with GIF because of the lack of detail needed for these to display. Clipart, grayscale, and cartoons are also best shown in GIF because the number of colors needed to display them is usually fewer than 256. Photographs and images with a lot of detail, on the other hand, are best shown in JPEG. Other choices must be made with respect to styling and Web page design. Style sheets are offered in multiple formats but only two are considered to be standard.

About the Author

Owner/operator of an online retail store at http://www.bonshops.com