Images provide a visually stimulating medium to enhance a user's experience. So mastering file formats is a critical and foundational knowledge to exceptional web design. Consider them as the ingredients to a web design recipe or the tools for the web design carpenter. You cannot use a screwdriver to hammer a nail and expect good results. Web graphics follow a similar principle.
The currency to web graphics are image quality and file size. The dillemma is between preserving image quality to keep images clean and smaller file size to save bandwidth and decrease page load time. Luckily, the basics only require us to deal with the following three formats:
- GIF
- JPG
- PNG
GIF - Graphic Information Format
- allows up to 256 colors
- can be animated
- features transparencies
- uses a lossless compression (no loss in image quality)
GIF graphics have a 256 color restrictions making it ideal for simple graphics and texts that don't require a lot of colors. Cartoons, logos, charts, texts, all work very well GIF formats. Photo's don't. Simply put, the fewer colors you use, the more efficient GIF files are.
Here are some examples of good uses and poor uses of GIF files:
Good:
Bad:
JPG - Joint Photographic Experts Group (JPEG)
- supports true colors (16 million colors)
- allows varible compression (i.e. it has a "quality" setting with most graphic softwares)
- suffers generational degradation if edited and saved multiple times
- uses a lossy compression (image quality is lost reduced at higher compression)
JPG are commonly misused as the "one-size-fits-all" form of graphics (due to it's compatibility with true colors) at the cost of large file sizes. However, they do excel superbly when displaying photographs or scanned artwork. Since these files uses a lossy compression, unnecessary data are discarded during the compression process and changes are irreversible. As a general rule of thumb when image quality is to be preserved, set the compression to where the decrease in quality is invisible to the naked eye (for
about 20% of the original file size or less.)
Good:
Bad:
PNG - Progressive Network Graphics
- allows 8, 24, or 32 byte storage (256 colors, 16million, or 16mill+alpha transparencies respectively)
- transparencies not supported by IE6
- lossless or lossy compression
- utilizes best of both GIFs and JPGs
- generally poor support for ancient browsers
PNG's are better suited as the "one-size-fits-all" solution since most of the old browsers are obsolete. On a personal note, I'd stay away from transparencies until IE6 becomes obsolete as well. The best time to use PNGis when GIFs are unsuitable (too many colors) and JPG's are overkill - PNG's will come to save the day.
Good:
Bad:
Here's a comparisson chart (with file sizes):
JPG - 3.2kb
PNG - 2.3kb
GIF - 2.9kbhttp://www.tu-torial.com/view_tut.php?id=204
Subscribe to Blog Serba Lengkap.Semuanya Ada Disini ! by Email
0 comments