Jpeg, Png or Gif?: How To Decide Which Image Format To Use, And When, And Why
The three most popular formats for images on the web are .gif, .png and .jpg. Once you’ve been futzing around with the design of your website for a while, you will start to wonder why sometimes you find a .gif, sometimes you find a .png, and other times you find a .jpeg. Which one is best for which format? Is there one I should be using for different things on my site?
When And How To Use .jpg
The .jpg format is best used on photographs or other realistic images. It is a high-quality format that can keep file size relatively low, and with photographs you will get the best quality of reproduction, for the smallest file size, possible. Photographs are big files, and you don’t want them taking forever to load. But you also don’t want them to look crappy, like they would in a .gif format or a (praise Allah!) bitmap. With photos, go .jpg.
When And How To Use .png
The .png file type (short for Portable Network Graphic) is best for line drawings, graphics, text-heavy images and images with few colors. There are sometimes when a photo will look better as a png, but few — only when you want to emphasize some kind of text or bold graphic in a photo. The .png will always look better for graphics with high definition and anything you draw in Photoshop or Illustrator. You can use the .png form for regular photos, but it’s likely that the file size will be very large, which is why it’s probably better to use them with graphic-type images. If you want the background of a drawing to be transparent, it’s also usually necessary to use a .png, so with background images, etc. you will often find it’s a .png format.
Here’s a set of actions from SwissMiss that will ensure your .pngs are being read well and consistently across browsers:
- In Photoshop, turn on proof colors (view -> proof colors)
- Make sure your proof setup is set to “monitor rgb” (view -> proof setup -> monitor rgb)
- When you save for web, make sure you do 24 bit png, interlacing OFF, and uncheck convert to srgb
When And How To Use .gif
Some people will tell you not to use .gif ever. Personally, I find that .gif is a good option for very small, very simple graphic images that you use for structural elements of your site. For example, the borders on my menus are created by .gif images that repeat. You don’t want to use .gif on a larger graphic or a photo, though — it will load fast, but it will look bad. Of course, everything that .gif is good for is done as well or better by .png, but as usual, the problem is that .png, despite being an official style recommendation of W3.org, is not supported by all browsers that people use. Sometimes, you will see a .gif in a place where it’s essential that the image works on every browser out there (such as borders, etc.).
A Note On Browsers
Whenever you choose a file format, you have to take into account the fact that not everyone is using the same browser. The older formats like .gif and bitmap will render in pretty much any browser, but some things in other file formats like .png will be compromised in older browsers. For example, .png has transparency capability, but this won’t work in certain old versions of browsers [cough — Internet Explorer — cough]. In my mind, this is not a reason to not use the .png format, because most people will adjust as time goes on and technology advances, but this is something to keep in mind if your audience is more likely to use older browsers.