Web Graphics Overview

Currently there are three dominant file types found on the Internet: GIF, JPEG, and PNG. Learn how each can work to help us preserve image integrity, while keeping files sizes minimal. Properly optimizing your graphics will make your site look more professional, and reduce the amount of time your visitors spend waiting for your pages to download.

I wrote this article in response to many posts I’ve seen asking about file formats. This is not a comprehensive, definitive guide, but a primer providing the basics needed to make effective decisions. If you’re looking for detailed explanations, the specifications for the following file formats are posted online. My goal with this article is to make sure you know what a given file type is generally best at, when to use it, and basically how it works.

Currently there are three dominant file types found on the Internet: GIF, JPEG, and PNG. The first two, GIF and JPEG, are the most common and familiar to those that frequent the Web. PNG is relatively new compared to GIF and JPEG, but it offers some very important improvements and combines some of the best of both file types. Although previously not well supported, most current Web browsers display the PNG file type.

In the following pages we’ll examine each format’s strengths and weaknesses. We’ll learn how each can work to help us preserve image integrity, while keeping files sizes minimal. Properly optimizing your graphics will make your site look more professional, and reduce the amount of time your visitors spend waiting for your pages to download.{mospagebreak title=CompuServe’s Graphic Interchange Format (GIF)} Some say it should be pronounced with a soft “G,” as in “Choosy moms choose JIF.” However, most people I know pronounce it GIF, the “G” sounding hard, as in “Graphic.” When in a discussion, I’ll use whatever the other person seems comfortable with. Frankly I don’t much care how it’s pronounced as long as people understand what’s being discussed. It’s a name of a file format, not a political issue, and not worth debating. (Although some will debate that it’s not worth debating.)

GIF was developed by Unisys specifically for online graphics. It supports a maximum of 256 colors and is best used on images with sharply defined edges and large, flat areas of color. Text and line based drawings usually fall into this category. GIF uses LZW (Lempel-Ziv-Welch) compression to make files small and transfer quickly over a modem. GIF is a lossless format, meaning that it doesn’t discard information to save space. Please note that converting an image with thousands or more colors to 256 colors is a destructive change that will result in decreased image quality. GIFs currently come in two flavors, GIF87a and GIF89a. The GIF87a format has fallen out of favor somewhat since it doesn’t support transparent colors, interlacing, or animation. Both types support dithering. If you don’t need a transparent or animated GIF, then don’t sweat over choosing GIF87a or GIF89a. Both should be viewable in any browser that supports images.

Some notes about GIF files: Fewer colors equal smaller files. GIFs have to store every color used in a table. The fewer colors stored, the smaller the resulting file.

Interlacing a GIF will make it appear more quickly in a browser, but will make the file larger. A good rule of thumb is to interlace images larger than 10 or 15k, but not those that are smaller.

You can dither a GIF and make it seem to contain more than 256 colors. Dithering works by grouping differently colored pixels next to each other fooling the eye into seeing a color that isn’t really there. Dithering can increase file size significantly, since it works against the compression method used by GIF.

GIFs can compress an image with horizontal stripes better than one with vertical stripes. A GIF “reads” from the upper left to the lower right, compressing each horizontal row before moving on to the next, making it more efficient at storing files with “horizontally dominant” information. {mospagebreak title= Joint Photographic Experts Group (JPEG)} Pronounced “Jay-Peg”

This file is named after the body that developed the format, the Joint Photographic Experts Group (try repeating that a few dozen times at the next cocktail party you attend). When naming a file, it’s truncated to JPG for compatibility with file systems that require a three-letter extension. JPEGs are best suited for images with subtle and smooth color transitions. Photographs, grayscale, and images with thousands or millions of colors fall into this category. JPEG uses “lossy” compression, it throws away information to save space and create smaller files. The more compression you use, the smaller the file becomes. The resulting trade off is image degradation. The trick is to use as much compression as possible, while maintaining usable image quality. I find that a quality of 3, or medium, is often acceptable, but it’s a completely subjective call. Standard JPEG encoding does not allow interlacing, but the Progressive JPEG format does. Progressive JPEGs start out with large blocks of color that gradually become more detailed. Many older browsers do not support the Progressive JPEG format, and their use has been slow to catch on.

Some notes about JPEG files: It’s best not to sharpen an image very much that you intend to save as a JPEG. Again, JPEGs work best with smooth, gradual changes. Sharpening an image exaggerates edges, and forces sudden changes in tonal values. This works against JPEG compression. In fact, you can create a smaller file by applying some Gaussian blur. Except for special situations, I don’t actually recommend doing this, as you can end up with a muddy and indistinct image.

Don’t over compress an image. Too much compression results in unattractive noise and distortion. Try saving a JPEG with a quality of 0 and you’ll see what I mean. That sort of treatment can render a file completely useless. Like many good things in life, too much is not a good thing.

Text and JPEGs aren’t good friends. Text (and other line-based images) suffers at the hands of JPEG compression. By nature, JPEG tries to break an image up into little blocks and average all of the colors out. You don’t want that with text. Text has to be sharp and crisp to stay legible. Saving a line based image as a JPEG makes it unattractive at best. At the worst it becomes unreadable.{mospagebreak title=Portable Network Graphic (PNG)} Pronounced “Ping”

This file format was developed by an independent panel of graphic experts to replace GIF. PNG supports any number of colors, alpha channels, lossless compression, and interlacing. The only thing GIF supports that PNG doesn’t is animation. This file type works best with about any type of image you care to save. PNG uses the zlib compression scheme, compressing data in blocks dependant on the “filter” you choose. To make compressing your PNG simpler, just choose “adaptive.” This will usually give you the best results. If you want the image to be interlaced, select Adam7. Keeping those two points in mind makes saving PNG files relatively painless. To create a transparent area in a PNG, make a mask or alpha channel and save it with the file.

Notes about PNG files: PNG file sizes aren’t usually as small as a JPG or GIF. PNG makes up for this deficiency by offering the capability to deliver higher quality images.

Older browsers do not support the PNG format. There are many WYSIWYG editors that still do not support PNG. This is quickly changing. Look for increasing support in the next few months.

PNGs are especially nice for small graphics that require a lot of detail. GIF limits the number of colors you can use. JPEG discards information to save space. PNG doesn’t do either one, it keeps everything the way you left it.

Have an image that has mixed content? PNG might be your saving grace. PNGs adaptive encoding looks at each line and evaluates what method of compression will work best for it. An example of an image with mixed content would be a CD cover. The band’s logo is set in big block letters over a picture of the group. A GIF will work wonders for keeping the logo intact, but it’s going to posterize the photo since it can only use 256 colors. JPEG will handle the photo okay, but it’s going to create visible distortion in the logo. You might try keeping the quality of the JPEG very high to minimize the visible artifacts caused by its compression scheme. That will leave you with a sharp looking image that takes forever to download. Next time you’re stuck in a situation like this, see if a PNG will work.{mospagebreak title=Conclusion} The next time you’re wondering how you should save a file out, ask yourself some questions. Is this image mostly lines and large areas of flat color? If the answer is yes, choose GIF or PNG. If the answer to your question is no and the image looks more like a photograph, then choose JPEG or PNG. While PNGs work well for both types of images, Keep in mind that the resulting files are usually larger, and PNG support is still fairly spotty. Most 3.0 version web browser will require a plug in to display a PNG.

Armed with this information, you should be able to choose the best file format to use for a specific graphic. Remember that these are not hard and fast rules, but guidelines designed to assist you with your choices. Be sure to experiment. Every image is different, and each should be treated as unique. You never know what you might be able to do to minimize file size until you try.

[gp-comments width="770" linklove="off" ]

chat sex hikayeleri Ensest hikaye