Share this Post
Choosing the correct image file type or format for your website, blog or social media platform can be a digital minefield. Choose the wrong one and your logo can look jagged and crappy, or that fantastic photograph of you on your about page takes someone on a 3G signal on their mobile 2 weeks to download. Don't worry, I am here to help.
As a graphic designer, I feel your pain as I often have to ask my clients to supply me with images for various projects and invariably I would receive a blank face in response. So, I thought to myself, it is time to educate and inform my clients as to the differences of image formats and their uses. So guess what, you've come along at the right moment and landed on the right blog! Hoorah!!!!!
There are hundreds of image file formats out there but between you and me, there are only a handful that really get used on a daily basis. These are the ones that we will be looking at today.
The JPEG
(Joint Photographic Experts Group)
Pronounced JAY-PEG this file format is best used for photographic images. It is also what is known as a 'lossy' file format. What this means is that you can compress your image so that it has a smaller file size. this is good in terms of download speed as it will load faster on your website, but there is a pay-off for that small size, the quality of your image deteriorates or in other words, it will look crap.
In most design applications when you choose to save as a JPEG you will be asked what quality you want to save it as. This varies from application to application, but the choices available are usually small, medium, high, very high and maximum. As a rule, you will generally get a good balance between file size and how your image looks when you choose medium or high.
In the examples here I have saved the same image at different JPEG quality levels - : Maximum Quality, High Quality & Low Quality.
As you can see, there is very little difference in visual quality between the first 2 images (Maximum and High), but there is visible deterioration in the background of the JPEG saved as Low quality on the far right.
If you look closely you can see that it has turned 'blocky'. This may be hard to see on fairly small images like the ones I have shown, but on larger images it will be very obvious and look bad.
The interesting thing here, and what you would be most interested in is the file size difference between the maximum and high quality images. The one saved at maximum settings is 44Kb in size and the one at high quality is only 11Kb in size.
That's three quarters smaller in terms of file size with very little visual loss in quality. This is where JPEGs come into their own, where you want a decent quality image but can also balance that with a file size that will still download quickly for the viewer.
The GIF
(Graphic Interchange Format)
It's pronunciation is debatable, the creator of the GIF file says it should be pronounced 'JIF', but that sounds like a household cleaning product before it mysteriously changed it's name to CIF (pronounced SIF, and not KIF).
When you are in my house it is pronounced GIF, okay? Now we've got that straight between us let's move on to usage shall we.
A GIF file can only support 256 colours, unlike the JPEG which can support up to 16 million. This as you can imagine means that the GIF file format has some limitations of its own, but where it excels is in flat or block colour images like logos.
The GIF can also utilise transparency so you can completely knock out a colour and allow a background or other image to show through. They can also support animation which I'm sure you have seen on many websites.
For example, I use an animated gif version of my logo in my email signature, which you can see here:
The PNG
(Portable Network Graphics)
The PNG, pronounced 'ping' (but most people say PEE-N-GEE) is the new kid on the block compared to the other two file formats, having been developed in the mid 90's.
It really comes into its own on the web. Coming in 2 different flavours, PNG-8 & PNG-24 this file format can cover an awful lot of bases.
Let's take the PNG-8 version first, this one is very similar to the GIF file in terms of colour depth (256 colours) and its ability to utilise simple transparency. It can't however, be used in animation. Where the PNG has one up on the JPEG and the GIF is that it can also store a short text description within its code. This allows search engines to catalogue and search based on the information stored within.
The PNG-24 can display millions of colours and also utilise alpha transparency ranging from fully opaque to completely transparent which the GIF, 8-bit PNG and JPEG cannot. However, file sizes will be larger than the other file types so download times are longer. The benefit though is an image with no compression and pin sharp quality that can use varying levels of transparency.
In these examples, the first image has a copy of the Pixels Ink logo saved as a PNG with no transparency applied and placed over the top of a polygon background. In the second image, the logo has been saved with transparency applied and you can now see through what used to be opaque white areas through to the background below.
As the PNG is still a fairly recent image format older web browsers may have trouble displaying them correctly as they do not support alpha transparency. If you can't see PNG's in your browser or where areas appear black that should be transparent, UPDATE YOUR WEB BROWSER!
I know you love Internet Explorer, you know all of it's buttons and idiosyncrasies but jeez, let's get into the Twenty-Twenties shall we. Bin that hunk o' junk and install something shiny and new like Google Chrome, Safari or Microsoft Edge browsers.
File type cheat sheet
I hope this has given you a better understanding of the main web file formats.
As I mentioned, there are many others and there is even more information that I could give on the JPEG, GIF & PNG. However, in the grand scheme of things only professional designers need concern themselves with that information.
I will leave you with this simple cheat sheet graphic showing the basic uses for each file type and ask that if this blog post has helped you I would appreciate it if you could leave me a comment below 🙂
