Understanding Graphics for the Web
It is incredibly easy to add all sorts of graphics to web pages, but without a basic knowledge of what you're doing you might end up wasting space and bandwidth using the wrong file format. In graphic design, there are hundreds of different file formats created by hundreds of different graphics programs, but on the Internet we need only use three: GIF, JPEG and PNG. These three file formats all have their own place, and their own ideal use.
JPEG/JPG
Joint Photographic Experts Group, or JPEG, is a "lossy" format. Lossy refers to the style of compression; lossy compression attempts to eliminate redundant or unnecessary 'information' (in the case of a JPEG, this would be unneeded colours). JPEG supports up to 16 million colours and is therefore ideal for detailed images or photography. Many graphic editing programs allow you to choose the quality of a JPEG when saving to reduce the amount of colours, and thus the file size. However, this is where the lossy compression comes in which can result in the blurry, anti-aliased look in some pictures. Choose a happy medium between file size and quality when saving.
Repeated opening, editing and saving of a JPEG causes gradual quality loss on each save, even if the same quality is selected in your graphics editor. This is caused by the lossy compression. If you know you will need to edit an image later on, save the original as an unoptimised PNG and make a web safe JPEG copy only when required.
GIF
GIF, which stands for Graphics Interchange Format, is a lossless format: it doesn't lose information when saving. It only supports up to 256 colours. This means it's ideal for small images with few colours such as logos and web banners. GIF also supports transparency and animation, but these increase the overall file size compared to a stand GIF.
PNG
PNG, short for Portable Network Graphics is a patent-free file format developed as a replacement for GIF. It supports multiple stages of optimisation which can cause some confusion leading to massive images that take an age to load. For the web, PNGs should absolutely always be optimised. Optimised PNGs can often give smaller file sizes than identical images saved as GIF. It is the perfect format for low-colour, high-detail images or for smaller images with more colours. PNG supports varying degrees of transparancy to give opacity effects but not all web browsers support this.
You can save lots of bandwidth by choosing the right file format, so don't fall in to the trap of choosing the first one you come across. If in doubt, make separate copies of your original image saved with all three formats and see which holds the best quality for the lowest size.
Tags:
gif, png, jpeg, images,
Last Updated On: 20th December 07 by Jem
Bookmark At: StumbleUpon, Digg
Handy Stuff
Downloads
Top Links
Resources