Web Site Mistake Using Images Improperly

Returning to my series of website mistakes I wanted to share with you another common mistake I see web site owners make which is not using the right graphic type for the need, let me explain.

There are three types of image formats that are widely used for web graphics. These are; jpg or jpeg ; gif and png (pronounced as ping). I’ll explain each in just a moment along with their uses.

I’m sure you’ve visited a webiste where a person’spicture looked pixelated or spotted. Or an image had ragged edges, or even yet an image on a colored background that had a white border to it. The reason is that the right image type was not used for the right purposes.  Below you will discover the right reasons to use each of the web approved file formats.

JPEG/JPG Images

JPG files are best for photos I’ll explain the technical reasons in a moment but over all if you are using photo that has a lot of detail say of a person(s) or a scenery, jpg will give you the best picture quality for the image size. Jpg files are formated to allow more color combinations than the other formats that is why you will see a greater difference in image quality.

Short for Joint Photographic Experts Group, the original name of the committee that wrote the standard. JPG is one of the image file formats supported on the Web. JPG is a lossy compression technique that is designed to compress color and grayscale continuous-tone images. The information that is discarded in the compression is information that the human eye cannot detect.

JPG images support 16 million colors and are best suited for photographs and complex graphics. The user typically has to compromise on either the quality of the image or the size of the file. JPG does not work well on line drawings, lettering or simple graphics because there is not a lot of the image that can be thrown out in the lossy process, so the image loses clarity and sharpness.

GIF Images

Gif files are best suited for images that have more text than detail or for simple graphics like iconic style clip art. Since the gif file format allows for less color combination, images with a lot of gradient color will seem not as sharp and may appear to have bands or lines, when a color goes from lighter to darker over a short span.

Gif images are best known on the web for their animation ability.  Any of the animated banners you see on the internet are either Gif files or flash. Flash is actually an animated movie and the file size are generally greater than those of a flash file. Flash files aslo require a special player to be viewd which is why most designers stick with the gif format for simple banner animation.

Short for Graphics Interchange Format, another of the graphics formats supported by the Web. Unlike JPG, the GIF format is a lossless compression technique and it supports only 256 colors. GIF is better than JPG for images with only a few distinct colors, such as line drawings, black and white images and small text that are only a few pixels high. With an animation editor, GIF images can be put together for animated images. GIF also supports transparency, where the background color can be set to transparent in order to let the color on the underlying Web page to show through. The compression algorithm used in the GIF format is owned by Unisys, and companies that use the algorithm are supposed to license the use from Unisys.*

PNG Images

Png graphics are best know for their file size quality and transparency capabilites and are now being supported by all of the newest browser versions. I have seen more designers use pngs more frequently but in comparison to using png over jpg for images the png file size for the quality is still higher.

Overall the png file format is a faster alternative for standard web images.

Short for Portable Network Graphics, the third graphics standard supported by the Web. PNG was developed as a patent-free answer to the GIF format but is also an improvement on the GIF technique. An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same image. PNG builds on the idea of transparency in GIF images and allows the control of the degree of transparency, known as opacity. Saving, restoring and re-saving a PNG image will not degrade its quality. PNG does not support animation like GIF does.

If this article on image types was of interest to you be sure to check out the article on image sizes. You can also find more information like this at my blog and at 50websitemistakes.com