What is the difference between JPG, GIF and PNG image files? Let us at Novage Communications explain to you what each one is and when you should use it in web design.
JPG (or JPEG) is a commonly used file type of lossy compression for digital images. This means, that every time you save an image as a JPG, it compresses the file down to different levels of image quality and data size.
GIF is a bitmap image format that was introduced by CompuServe in 1987. It now has widespread usage on the World Wide Web thanks to its wide support and portability. It can support 256 colors.
PNG is a cross between a JPG and a GIF file. It keeps high quality like a JPG but is capable of having a transparent background like a GIF.
For example, here’s a background image I created for an iPhone with a canvas size of 320 x 489px and a resolution of 72 dpi:
Upon opening the “Save for Web & Devices Format” dialog box (File – > Save for Web & Devices Format), you will be able to see the difference in contrast when the image is saved as a PNG compared to a JPG. The file size is probably the most significant difference with the .PNG at 258k but the JPG at only 18k. This is a huge difference! Your website visitors aren’t going to want to wait around for the larger PNG picture to load on your page. Also, as you can see from the picture, the JPG version has a richer contrast and more saturated color whilst the PNG looks slightly faded.
Basically, if you want a high quality image with good color and saturation, choose the JPG format. If you want your image to have a transparent background, choose the PNG format.
What about GIF and TIF? Let’s talk about them.
A TIF is a high quality image that keeps all of its layers. These files types are normally used for printing.
On the other hand, a GIF is normally used for web design and can be saved with a transparent background. There are two important points you need to take note of when using the GIF format.
First of all, if you export an image (like the example below), no matter how high you set the quality, a GIF will never compare to a JPG.
When saving an image as a GIF, the way it keeps its transparency is different to a PNG. Let’s take a look at the example below. I want to keep the glowing color around the button.
I cut the button out, hide the background, and then click File > Save for Web & Devices Format and the following dialogue window pops up:
You can see from the image that when I choose GIF, the glowing color does not fade out nicely the way I want it to. It doesn’t look right and you can imagine what it would look like if I put it on top of the box pattern background on the web page. A GIF picture needs a background in order to create the gradient effect that I want. That’s why PNG is a wonderful thing. It creates real transparency and will look the same no matter what background you add it to.
This article was contributed by Novage who are a full service digital agency. With some of Singapore’s best web designers they provide quality websites, ecommerce solutions and online marketing services.