When to use which image format

Web graphics generally come in 3 main formats – JPEG (or JPG), GIF & PNG. Most browsers have no trouble displaying any of these three image types but some are better suited for certain uses than others.
JPGs are most commonly used for displaying photography that look fine while maintaining a low file size, GIF files can have transparent areas & are a widely-supported format for animated images and PNGs have the ability to maintain full quality in nearly all instances & have transparency. However, there are some pros and cons of each…
JPG (Joint Photographic Experts Group)
The JPG is the most commonly used file format online as it does a fantastic job at creating high quality output with a low file size.
JPGs are most commonly used for photography and when you export to a JPG from Photoshop or similar, you have the ability to choose the level of compression so you can find the correct compromise to ensure images load quickly and still look great. The main downside to a JPG is you cannot have transparent areas – for example you cannot layer a logo in a JPG format over a background very well on a web page as the JPG will always have a square edge.
See a beautiful example high-quality JPG below from our recent Bouffe project.
GIF (Graphics Interchange Format)
The GIF is the oldest file format and was initially launched back in 1987. It has made a real resurgence in its use mainly due to its animation capability and complete cross platform support.
A GIF is an 8-bit file format and has a colour pallet of 256 colours which is very limiting if you are looking for a high quality output but the file size is generally very small. Animation is a GIF’s strongest ability as it can contain “frames”. These are essentially several varying states that can be timed to appear in a particular order to make an animation effect. Animated GIFs are generally larger (depending on the length of the animation and number of frames) but usually smaller than a video format.
Another big feature of a GIF is that it supports transparency which means you can layer it on top of another image on a web page and it will not have a square edge (providing you have exported it correctly).
Take a look at this example animated GIF below. Notice the low quality of the frames & it’s clever animated qualities. (this file has 82 frames and each frame shows for 0.08 seconds to achieve the effect)
Space Shuttle Move In
PNG (Portable Network Graphics)
The PNG is a raster graphics file format that supports lossless data compression. PNG was created as an improved replacement for a GIF, and is the most used lossless image compression format on the Internet.
PNGs can look beautiful, have transparency & have the ability to be animated (in some browsers) but the big downside is they can be too large (in file size) to be used in every scenario.
When exporting a PNG you can choose between a huge range of settings to try and get the file size as low as possible, but generally you will find in nearly all scenarios a PNG will be larger in file size than either a JPG or GIF, especially for photography.
Animated PNGs are not widely supported enough and have failed to take-off fully, mainly due to them encroaching on compressed video file sizes.
Here at Clicky we nearly always use a PNG for a logo as it ensures it looks great and has transparency.
See the example PNGs below which illustrates the transparency qualities and the high quality of the image. (the second image is exported with the transparency qualities – the first illustrates this) – Source
So what’s the conclusion?
JPGs, PNGs, and GIFs have benefits and limitations, and it’s more important to know when to use each file type. There is no “does it all” file format yet and it is up to web designers to make sure the correct file format is used in the correct scenario to ensure your website looks great and loads quickly.
Or better still, just use Clicky to do it all for you!

Written by Oli Yeates


Follow Oli on Twitter