Website design and Internet graphics involve three main file types: GIF, JPEG and PNG. Each file type provides a variety of advantages, as well as disadvantages when dealing with file sizes and image preservation. GIF and JPEG are the most familiar, as well as commonly used file types on the Web. PNG is considered to incorporate the best elements of GIF and JPEG, but its use is still relatively new to the public. Choosing the right file type can be the deciding factor in the level of visual professionalism, as well as download time of the overall site.


GIF

GIF was developed to handle online graphics, supporting a maximum of 256 colors and is better when used for images with sharply defined edges, as well as for large, flat areas of color. GIF better supports text and line-based drawings. The type of compression that is used to make files smaller, promotes a quicker transfer over a modem. When an image is converted to 256 colors, decreased image quality occurs because the image was created using thousands or more of colors.

A GIF file will be smaller if there are fewer colors that are used. GIF files store every color that is used in a table and when fewer colors are stored, this results in a smaller end file. If a webmaster interlaces a GIF file, it will appear quicker in a browser, but the file will be larger. It is suggested that images larger than 10 or 15k, should be interlaced, but smaller files should be left alone.

When color quality is important, GIF files can be dithered to trick the eye into thinking it is seeing colors that are not actually used. Dithering means that differently colored pixels are grouped together. This process creates a larger file size because the method used does not involve compression. When compressing a file, GIFs work better with horizontal stripes rather than vertical ones. This is because a GIF “reads” from the upper left to the lower right. Basically, compression occurs horizontally in order to store file in a more efficient manner.

JPEG

JPEG works better for images that contain subtle and smooth color transitions, such as photographs, grayscale and images that contain thousands or millions of colors. When JPEG compresses, it discards information in order to save space and create smaller files. The more compression that is used, results in smaller files, but this also creates image degradation. A designer must find an acceptable balance between compression and image quality. A quality of 3 or medium is a nice place to start, but it is up to the designer to choose what is acceptable to them. Standard JPEG encoding does not deal with interlacing, but the Progressive JPEG format does. Progressive JPEGs first presents large blocks of color that gradually offer a more detailed image.

When one is intending on saving an image as a JPEG file, it is better not to sharpen the image. This is because JPEGs work well with smooth, gradual changes. Sharpening an image only exaggerates the edges, forcing sudden changes to occur within the tone. It is important not to over-compress an image because this will result in distracting noise, as well as distortion. This can be seen when a JPEG is saved with a quality of 0.

Saving text as a JPEG produces unfavorable results. Since JPEG attempts to break an image into little blocks, it is apparent that this is not the best choice for text or line-based images. Text should be able to stay sharp and crisp, in order to remain legible. Line-based images look terrible and unreadable when they are saved as a JPEG.


PNG

PNG was developed as a file format to replace GIF. PNG is able to support any number of colors, alpha channels, compression and interlacing. Animation is the only thing PNG is unable to handle that GIF does. PNG compresses images by making data into blocks that are dependant on a chosen “filter.” Choosing “adaptive” compression in PNG, makes thing simpler. Usually, this produces the best results. When interlacing an image, Adam7 should be selected. Transparent areas are created in PNG by using a mask or alpha channel when saving a file.

Designers should keep in mind that PNG file sizes are not as small as JPEG or GIF. The trade-off involves higher quality images in PNG. A disadvantage to using PNG is that older browsers do not support this format. PNGs are good for websites that feature a lot of small graphics that are quite detailed. This is because GIF limits the number of colors that can be used and JPEG discards information in order to save space. PNG leaves graphics just the way they were created.

PNG is a good choice when a designer is working with mixed content. This can be seen with the design of a book cover. The title of the book is made up of large block letters over a photo of the main character in the book. A GIF will focus on keeping the title intact, but will distort the graphic content. JPEG will deliver the photo well, but the title will be visibly distorted.


When saving a file, a designer should think about the main content involved when considering the JPEG, PNG or GIF format. If the image is made mostly of lines and large areas of flat color, GIF or PNG is the way to go. Images, such as photographs, need JPEG or PNG to keep the photo intact. PNG has been proven to work well with both instances, but resulting files are usually larger and not every browser can support this format.

Top | Back To Articles List | Print Friendly Version