gif, jpg, png… You may have noticed these three little letters at the end of your image files. There are a lot of different types of file formats available for images, so how do you know which one to use?
Each file format has different advantages and disadvantages. Depending on what type of image you are creating, you can pick the file format that will give you the best quality and size for your project.
Here is a handy guide to some of the most common file formats for the web:
Graphics Interchange Format (.gif)
The GIF file format is common for icons and other graphics, because they can create small file sizes that will load quickly. Because the GIF format is limited to 256 colors, it’s best for images that have blocks of solid color – such as logos or icons. Photographs saved in a GIF format will look choppy, because photos often require much more than 256 colors.
Below is an example of a photo (left) and an illustration (right) saved in a GIF format. On the left, you can see how there are not enough colors to create a smooth transition between the dark purple and the lighter purple. However, on the right you can see how the solid colors of our illustrated flower look nice and clean — even when we take a close look at the detail.
GIFs can also be used to create transparent images on websites, however the transparency features are limited. Each pixel must be either completely transparent or completely opaque, which means the edges of transparent GIFs will not have a smooth transition into the background. I’ll explain this more in a little bit.
Finally, GIFs are the original “animation” format on the web. You might remember those small, quaint animations of flames or flashing lights… those were simple animated GIFs. Nowadays, much more sophisticated things can be done online with Flash, Javascript, and now even HTML 5, however animated GIFs still show up in unexpected and imaginative ways every now and then.
Joint Picture Experts Group (.jpg / .jpeg)
The JPG file format is capable of saving images with millions of colors, which makes it ideal for saving photos. To reduce the file size, JPG will use a compression algorithm that will reduce the quality and details in the photo. This means the more an image is compressed, it will have a smaller file size and lower quality appearance.
JPG is not a good file format for images that need crisp edges – like for text and logos – because the loss of quality will add artifacts and make the text blurry.
Below you can see that the photograph of the purple flower (left) looks much better than the previous GIF example. On the right, the solid colors in the blue flower look a bit fuzzy. These “artifacts” are caused by the JPG compression algorithm. By reducing the file size, the photo has lost some of the details — making the image a lower quality.
Portable Network Graphics (.png)
PNG files have two different versions: PNG-8 and PNG-24.
8-bit PNG
PNG-8 is similar to the GIF format. It is limited to 256 colors, and has limited transparency features. In some cases the PNG-8 format can save smaller files at a higher quality than the GIF format, so it is best to compare both of these options to choose the format that works best. You can see below, that the images look very similar from the examples in the GIF section.
24-bit PNG
PNG-24 can save images with much more colors, similar to JPG files. However, PNG-24 doesn’t reduce quality the way a JPG does, making the file sizes much larger. In the examples below, the PNG-24 photo of the purple flower is more than 4 times the file size of the JPG version, and the PNG-24 image of the blue flower is more than 2.5 times the size of the PNG-8 version. Smaller file sizes are ideal for websites because they will load faster, so these large PNG-8 will slow your website’s loading time.
So why would you ever want to use a PNG-24? Transparency?
PNG-24 will give you the best quality for transparent images, because it allows you to have several different levels of transparency. This means that your image will have a smooth transition into the background. Below, you can see the difference this makes on our blue flower image.
On the left, is an example of a GIF image with transparency (or a PNG-8 with transparency), and on the right is the same image as a PNG-24. The image on the right has a much smoother edge, because it uses transparent pixels to transition into the white background.
Please Note: Transparency for images is a bit more complicated than how I’m presenting it here — but for the purposes of this article I’m keeping it simple. If you are interested in saving images with transparency, I highly suggest learning more about browser support for PNG-24 transparency, and how to improve the quality of transparent GIF and PNG-8 images.
Choosing a File Format
Now that you know the differences between the most common file formats, you can make a better choice when saving your images for the web. So, just to recap:
- For photographs – save your photo as a JPG
- For logos, text, and images that use solid colors – save your image as a GIF or a PNG-8
- For images with transparency – save your image as a GIF, PNG-8, or a PNG-24