Which format do you use and when?
One of the trickiest questions to answer in web design is which image format do I use – JPEG, JPG, PNG or GIF? Here are brief descriptions and histories of the most well-known and most-used image formats used in web design today.
Hanging the J on the PEG
JPEG or JPG is the standard format for compressed 24-bit still images. JPEG is usually used for photographs but not for images involving letters or illustrations. JPEG uses ‘lossy compression’. In order to create a file size that is relatively small despite the content of the image, some of the information is removed from the image. However, as the removed data is too small for the human eye to see, the image looks the same to the untrained eye.
There are arguments for and against using lossy compression all around the quality of the image. For web design purposes JPEG is the ideal format for displaying photographs due to its small size in relation to its loading time. Loading time now affects your Google page rank so image file size is more important than ever to keep in mind.
JPEG is not the best format for letters or illustrations, particularly cartoon still images. The finalised image tends to pixelate when re-sized either by the designer in Photoshop or by the web browser due to the user’s screen size or the web designer’s CSS declaration. Letters and illustrations are better presented as vector graphics – more on that later.
JPEG files end in .jpg or .jpeg
First came GIF then came PNG
GIF (Graphics Interchange Format) is a lossless 8-bit format. It supports up to 256 colours and has a high compression rate. The format was created in 1987 as a suitable format for transferring across slow connections. Dial-up internet connections were only available in households as broadband was still three years away.
The GIF format was revised in 1989 and transparency was introduced with improved interlacing. Also GIFs can be animated. All modern web browsers support animated GIFs.
Unfortunately the company who created GIF, Unisys, patented the compression technique used by GIF. This was a blow to commercial developers who then had to pay a licence fee if they wanted to use it.
GIF files end in .gif
The birth of PNG
Commercial developers did not want to pay Unisys every time they created a GIF. In 1995 a number of developers banded together to create the patent-free PNG (Portable Network Graphics) format. PNG was released to the masses in 1996. PNG is far superior to GIF as it supports millions of colours and has better compression.
PNG comes in two types PNG-8 and PNG-24.
PNG-8 supports 256 colours and has a smaller file size than PNG-24. PNG-8 is ideal for 2- or 3-colour logos, icons and buttons.
PNG-24 is lossless and supports up to 16 million colours and is ideal for illustrations. PNG-24 can be used for still photography however it is easier to reduce the quality of a JPEG which is why most photographs are presented in JPEG format. However, if your image has a transparent background or uses gradients then PNG-8 or PNG-24 is preferable for a cleaner image.
The 8 and 24 refer to the number of bits per pixel.
PNG tend to be slightly larger files sizes however if you optimise for the web then a lot of superfluous data is removed without any real difference to the final image.
PNG files (either 8- or 24-bit) end in .png
What’s best for web design?
The question that now plagues us is “which format do we use”? The short answer is use PNG wherever possible either as 8-bit or 24-bit as this produces cleaner images with better alpha transparency. The long answer is that it depends on what you are trying to do, the browsers being used and optimising the image for web use.
As a web designer you will need to balance out a number of factors to ensure your web pages load quickly – amount of bandwith used and amount of data to transfer. Images of any type increase load times due to their size. The best thing to do is experiment and find what works for you.
Whatever you decide it will pay you to experiment and see what works best for the project you are working on. Just bear in mind file sizes slowing down your website.
What works for you? Which formats do you use with which type of image? Share your experience and help the rest of us out!