Adam Patterson

Graphics for the Web

When you first start to learn about Graphic design from a technical point you learn about Format. In graphic design there are many different file formats created by even more graphic editors. They all have their Pros and there Cons.

When you are working for the web you really only have three options: GIF, JPEG and PNG. They all server their purpose and are great at their jobs. The trick is to learn how each format can best to its job and when.

JPEG/JPG

JPEG stands for the Joint Photographic Experts Group or simply JPG. The group was organized in 1986, issuing a standard in 1992, which was approved in 1994 as ISO 10918-1. JPG uses a Lossy format. The lossy format is a style of compression that attempts to eliminate redundant or unnecessary information such as colours. JPG supports up to 16 million colours so it is ideal for detailed images or photographs. You may have noticed when you save a JPG you have the option for quality; this will reduce the file size but at the same time reduces the amount of colour present in the image. This in turn creates a smaller file size but a less detailed image will result.

Because the JPG format contains a compression repeated editing and saving of the same source will lead to quality loss. If further editing will be needed save your file as a Photoshop PSD or another form of RAW data.

GIF

GIF stands for Graphics Interchange Format, is a lossless format. This means the image will not lose information when saved. Since a GIF only supports 256 colours. GIFs are suited for small images with few colours like Logos, Banners, and small site Details like Rounded corners or repeating patterns.

GIF also supports transparency and animation, you may remember in the early 90′s the internet was full of animated GIFs. This of course will increase the overall file size compared to a stand GIF.

PNG

PNG stands for Portable Network Graphics. This is my personal Favorite Format. It is used with many operating systems, Graphical Editors, and is patent-free file format developed as a replacement for GIF. PNGs For the web should always be optimized! PNG gives a much wider range of color depths than GIF (truecolor up to 48-bit compared to 8-bit 256-color), allowing for greater color precision, smoother fades, etc. PNG also supports a varying degrees of transparency to give an opacity effects but not all web browsers support this. It is the perfect format for low-colour, high-detail images or for smaller images with more colours.

Graphic heavy websites will use a verity of image formats. Photos will be JPG, backgrounds GIFs and PNGs, the larger images of the site such as headers and footers will more than likely be PNGs. But that’s not the rule. You need to save Optimized versions of each and compare File Size with Quality and chose the best for your needs.