Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Web sites can contain JPEG, GIF,PNG, SVG format graphics. Which ones should be used, and when?

share|improve this question
1  
Given the age of this question, we should update it to include SVG –  DA01 Mar 11 at 15:30
add comment

12 Answers 12

When to use JPG

  • photographic imagery
  • when compression doesn't matter

When to use PNG

  • when you need transparency
  • when you have patterning (backgrounds)

When to use GIF

  • when you need backwards compatible animation*
  • when an image is primarily comprised of just a handful of colors (2-16)**
  • when you don't need transparency and have patterning (although png is preferred)

* With the rise of CSS animation as a viable option for nearly all browsers the use of the .GIF format is less and less the go-to format for web animation. .jpg, .png, and .gif can all be set to have an "animated" feature with the use of CSS. Although animated gifs may be used attractively in web design in certain case scenarios, exceptions are rare, so it tends to be best to just avoid them.

** (.gif images are restricted to only 256 colors within their palette.)

share|improve this answer
1  
I agree with most of your points, but I also use GIF for simple illustations/diagrams with few colours/no gradients as they result in smaller file size and a sharper look than JPEG. –  George Profenza Jan 8 '11 at 14:08
1  
The difference between GIF and PNG transparencies is that GIF is either transparent or not for each pixel and PNG supports alpha transparencies (so you can have percentage transparencies over pixels). PNG isn't better for a background unless the image isn't detailed, in that case, JPG which is a lossy format would keep the data best, just at a higher filesize. –  dkuntz2 Jan 12 '11 at 14:34
1  
This answer is great. PNG8 is very important distinction though imho as it is more friendly to lower IE versions. PNG32 is great when you can use it but check out these two articles about PNG8 here and here‌​! –  Garet Claborn May 9 '11 at 14:20
    
@George: I also use GIFs for simple 1-16 color graphics with simple shapes for size benefits. +1 –  Garet Claborn May 9 '11 at 14:22
1  
@Phlume, by all means add your own answer. This one is from 3 years ago when CSS animations weren't as viable an option as they are today. Additionally I'd note that SVG is a good option to add to the list for certain circumstances. –  zzzzBov Mar 11 at 13:30
show 1 more comment

The main Web graphics formats are GIF, JPG, and PNG. It's important to know the differences and choose the best format for each image, so that pictures look good and are as compact as they can be so they appear quickly on your site visitor's screen.

GIF - Graphic Information Format

GIF graphics format is best for images with only a few colors: charts, graphs, or text set as graphics. The fewer colors you use, the more efficient GIF files are. GIF files...

• can contain up to 256 colors.

• support a feature called transparency, in which one color out of the 256 colors is set to be transparent. This keeps your graphics from looking as if they're in boxes, because the background of the file is invisible, letting the Web page's background show through.

• can be animated. Inside a single file is stored many picture frames and an index telling how long each frame should be shown. Animated GIF is treated as a standard image file, so it is loaded with the standard tag.

• are lossless, which means the image quality is not degraded by the compression process.

• can be interlaced so they appear to fade in, from lower to higher quality, while loading. This gives your visitors something to look at while they're waiting.

• are not good for photographs - you lose quality and the files won't be compact. Use JPG graphics format for photos.

JPG - Joint Photographic Experts Group

JPG graphics format is best for images with many colors, such as photographs or scanned artwork. JPG files...

• can contain up to 16 million colors.

• support variable compression. You can apply more or less compression to each individual image. The more compression you apply, the more quality you lose. While file sizes can be made quite small with this graphics format, you often have to compromise between file size and picture quality. Newer graphics software gives you a preview before you save - this allows you to experiment with various levels of compression to choose the best compromise between quality and file size.

• come in three types: baseline or standard, baseline optimized or standard optimized, and progressive. Baseline was designed for browsers that we'd consider to be ancient these days (such as Internet Explorer version 1). Baseline optimized offers more compression over standard baseline, and practically every browser today can read such an image. A progressive JPG, like an interlaced GIF file, builds as it downloads, going from a crude representation of the image to its finished look. While this is a nice Web graphics format, older browsers don't all support this format.

• are not good for images with only a few colors, such as text set as graphics or images with areas of flat colors. If you use JPG for these graphics, they will be larger than necessary, and look "mottled."

PNG - Progressive Network Graphics

PNG is the newest Web graphics format. PNG files...

• are supported by all modern browsers. These files may not appear in older browsers, so using this graphics format may cause some of your website visitors to be unable to see your images.

• are compact and versatile and can combine the best features of GIF and JPG, such as the ability to have transparent backgrounds or the ability to contain images with millions of colors.

• are still not widely used, mostly because they're not supported by older browsers.

When to use which?

Choosing the right Web graphics format can ensure that your images look good and appear quickly on your visitor's computer. Choosing the wrong format makes your images look bad and take forever to download.

The most common graphics mistake people make on the Web is to use the wrong graphics format for their images. But the choice is really quite simple...

• If your graphics have a lot of colors (such as a photo), choose JPG.

• If your graphics have few colors, choose GIF. When using GIF, try optimized palettes that contain only the colors used - they can cut file sizes in half.

share|improve this answer
add comment

I can see from various articles 90% of web designers still think that PNG is lossless format only. Many professionals don't even know about PNG-8 existence.

But obviously PNG-8 is what they should be using for the web, instead of PNG-32. Because it provides 2x-5x smaller file sizes with acceptable quality.

Sometimes it's hard to decide which compression is better for an image. For example, if it's not a photo, but has many colors and gradients. That tool allows to compare both lossy formats visually and choose the best variant.

Here's a nice tool to compare lossy PNG and JPEG formats: PNG vs JPEG

share|improve this answer
add comment

Here's a BMP vs GIF vs JPG vs PNG comparison for you.

You should be aware of a few key factors...

First, there are two types of compression: Lossless and Lossy.

Lossless means that the image is made smaller, but at no detriment to the quality. Lossy means the image is made (even) smaller, but at a detriment to the quality.

There are also different colour depths (palettes): Indexed color and Direct color.

With Indexed it means that the image can only store a limited number of colours (usually 256) that are chosen by the image author, with Direct it means that you can store many thousands of colours that have not been chosen by the author.


BMP - Lossless / Indexed and Direct

This is an old format. It is Lossless (no image data is lost on save) but there's also little to no compression at all, meaning saving as BMP results in VERY large file sizes. It can have palettes of both Indexed and Direct, but that's a small consolation. The file sizes are so unnecessarily large that nobody ever really uses this format.

Good for: Nothing really. There isn't anything BMP excels at, or isn't done better by other formats.

BMP vs GIF


GIF - Lossless / Indexed only

GIF uses lossless compression, meaning that you can save the image over and over and never lose any data. The file sizes are much smaller than BMP, because good compression is actually used, but it can only store an Indexed palette. This means that there can only be a maximum of 256 different colours in the file. That sounds like quite a small amount, and it is.

GIF images can also be animated and have transparency.

Good for: Logos, line drawings, and other simple images that need to be small. Only really used for websites.

GIF vs JPEG


JPEG - Lossy / Direct only

JPEGs images were designed to make detailed photographic images as small as possible by removing information that the human eye won't notice. As a result it's a Lossy format, and saving the same file over and over will result in more data being lost over time. It has a palette of thousands of colours and so is great for photographs, but the lossy compression means it's bad for logos and line drawings: Not only will they look fuzzy, but such images will also have a larger file-size compared to GIFs!

Good for: Photographs. Also, gradients.

JPEG vs GIF


PNG - Lossless / Index and Direct

PNG is a newer format, and is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can. Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format.

Here's what's good about it: Unlike GIFs, PNG files can store thousands of colours, if need be. That means that it can have nice smooth gradients. It also supports a nifty thing called Alpha Transparency which means that you have things like smooth drop shadows, even on Indexed color images. Most of the time, the file sizes will be smaller or equal to a GIF equivalent. Using extra features (like thousands of colours or alpha transparency) will increase the filesize, though.

Essentially using PNG just gives you greater options and flexibility.

PNGs, however, are not intended to replace JPEG images, despite allowing thousands of colours and having compression. A photograph saved as a PNG will likely be at least 5 times larger than a equivalent JPEG image, which very little improvement in visible quality. (Of course, this may be a desirable outcome if you're not concerned about filesize, and want to get the best quality image you can.)

Good for: Logos, line drawings, and images that require alpha transparency.

PNG vs GIF

I hope that helps!

share|improve this answer
    
+1 for the nice efforts –  Jack Aug 4 '11 at 11:01
    
As for the last example, you could also index a PNG image to compair it fairly to GIF.. PNG appears to be better than GIF at compression, if they're fighting on equal turf... imgur.com/a/MDO4m –  JamesTheAwesomeDude Apr 30 '13 at 4:33
add comment

(migrated from duplicate question)

This totally depends on the kind of image you want to store.

  • PNG is a lossless compression format best suited for "vector-like" bitmap graphics (i.e. graphics with large, regular areas with the same colour and clearly defined edges; graphics containing clear text).

  • SVG is a vector format, best suited to contain vector graphics (in short, collections of geometrical elements instead of collections of pixels). SVG is limitlessly scalable, while bitmap graphics lose quality when enlarged.

  • JPG is a lossy compression format (among other things, it removes nuances in the image invisible to the human eye to save storage space). It is best suited for photographs; due to its compression method, it is not well suited for vector illustrations or text.

Browser compatibility:

  • PNG Graphics are supported across browsers, with the exception of IE 6 if the PNG contains alpha transparency (the transparent portions will be rendered as a solid grey), and all versions of IE if the PNG is inside a HTML element with opacity less than 100% (but that's an edge case).

  • SVG is not always an option yet because browser support is not 100% at the moment. There may also be other behavioural differences to a normal <img> tag. Use this only if you know what you're doing.

  • Standard JPG is supported across all browsers as long as saved in RGB mode rather than CMYK (if your program doesn't make the distinction, it probably is the default).

share|improve this answer
add comment

As most pointed out, JPEG is good for photography and PNG good for graphics with texts and graphs. GIF has the only advantage, that it supports animation, that should be used very careful.

A good tip is, to export your image as JPEG and PNG. Nearly always the format that is better for your graphic results in a smaller file. Photographs get smaller as JPEG and graphs smaller as PNGs. So if you unsure which to choose, that can be a good decider.

share|improve this answer
add comment

You should choose your image in base at the level of compression/quality you want to achieve.

Web is all about speed in downloading information, and lesser is a size of an image, better it is for speed of loading a page.

JPG: For images with million of colors (photography)

PNG and GIF: For transparency and few amount of colors. I use it only under 64/128 different colors, but generally under 256. (icons, vector images that need to be raster, high contrast color, gradients with few colors)

How to choose between PNG and GIF?

First of all Check the compression/quality optimization, and choose who give you better result for less weight. I still use broadly GIF, and it is better sometimes than PNG for same kind of images. Do not discriminate one format for another, simply check the one that looks more suitable for your optimization.

  • Choose GIF: for animated images at no more than 256 colors
  • If you don't need animation, you might choose the PNG. Chose the right PNG: There are 2 kind 8bit and 24bit. 8bit it tend to be a better version of the GIF without animation for quality/compression (but like I said not always, check it out when you Save for Web). 24bit has no compression (so use it scarcely for some special graphic effect), and has the alpha vaule for using color transparency (Old IE browsers are not supporting this, if you don't apply a special filter or .htc behaviour to the page).
share|improve this answer
    
All of them have about the same file size. +/- 25% or so. –  muntoo Jan 7 '11 at 5:58
    
Yes, the difference it is not substantial, still I personally prefer optimise as much as I can, whenever is possible. If I can optimise down to results like 800byte and 600byte, I still go for 600byte if the quality it is not drastically affected. –  Littlemad Jan 7 '11 at 11:18
add comment

JPG :

Advantages :

  • A lot of different compression level available
  • Easy to manipulate with all images editor

Inconvenients :

  • Compression artifacts

Uses :

  • Large photos or images with lots of colors
  • When high compression is needed

PNG :

Advantages :

  • Transparency with alpha !
  • Lots of colors
  • Can replace jpg

Inconvenients :

  • Less compression than JPG (but not that much)
  • Incompatible with IE6 (and 7 I believe) - must use patch or hack for this. But who cares? A must use ;)

Uses :

  • Small or medium photos/images with lots of color
  • A must use if you want gradient transparency
  • Icons
  • Logos

GIF :

Advantages :

  • Can be animated
  • Very light if you use just some color (like 8 - 16 or 32 different colors)
  • Transparency

Inconvenients :

  • Can't have more than 255 colors.
  • Animated gif can make people flee
  • No alpha for transparency (it's transparent or not !)

Uses :

  • Animated gif (I use them mainly in newsletters)
  • Icons
  • Animated favicon \o/
  • Logos
share|improve this answer
add comment

In an ideal world, it would come down to this:

JPEG - For raster images and photographs

PNG - For vector graphics (eg. logos, etc)

Unfortunately, Internet Explorer 6 (still, unfortunately, a large number of users) does not support transparency in PNG images. So if you PNG contains transparency, it may run into issues. Luckily, there is a hack that can be used to bypass this issue, although not in an elegant way:

http://24ways.org/2007/supersleight-transparent-png-in-ie6 http://www.alistapart.com/articles/pngopacity/

(EDIT: Also, I think even IE 7 has issues with some features of PNGs.)

GIFs only have two advantages over PNG:

  1. (Almost) perfect browser support (although no transparency, so this isn't much of a bonus)
  2. They may be animated, however animated graphics should be used sparingly in web design.

EDIT: PNG is always preferable to GIF where it is supported and usable, since PNG is an open format.

share|improve this answer
3  
Google stopped supporting IE6 (at least for gmail), I think it's time we all do the same. –  zzzzBov Jan 5 '11 at 2:04
2  
It depends on your audience. If you run a tech blog, you can forget about supporting IE6. If you run a gardening site, you should probably still support it. Also, IE 7 still has issues with some features of PNG. –  Computerish Jan 5 '11 at 2:06
    
What if those tech users use IE6? Everyone else upgrades. Stubborn old techies. –  muntoo Jan 7 '11 at 6:00
1  
GIF has transparency. What it has not is the ability to set alpha value to the various colours. –  Littlemad Jan 12 '11 at 15:46
add comment

I use PNG for pretty much everything, as it doesn't have the compression artifacts that JEPG does, and it's nigh-universally compatible these days (I've seen a couple of site editors that don't take well to it, such as the desktop version of Homestead's SiteBuilder software, but that's about it).

share|improve this answer
2  
If you're going to choose a single format, then that's definitely what I'd go with. But for photos, you really should consider using JPEG. At high quality settings the compression artifacts are usually imperceptible in most photos, and the resulting file is still smaller than a PNG--even more so if you use multi-pass compression. The size difference can be quite significant. –  Calvin Huang Jan 13 '11 at 4:46
add comment

A nice formula could be to use JPEG for photos and PNG for everything else.

Of course, if you have graphics that don't need alpha transparency and have less than 256 colors, GIF might save you some bandwidth but it's definitely on its way out.

share|improve this answer
1  
You can use indexed colors with PNG as well. So there's no reason to use GIF at all, unless you're dealing with some old browsers or want to use an animated GIF. –  Calvin Huang Jan 13 '11 at 4:39
add comment

You should use .jpeg for photographs or images with a lot of colors. The .gif file type is useful for animated images or where transparency is needed, but it is decreasing in use. The most popular format is .png, which can also offer alpha transparency and greater range of colors than the .gif file type. For a more detailed overview, check out Jonathan Snook's article, Which Image Format Is Best.

share|improve this answer
    
isn't png a lot larger filesize than a jpg with a bit of compression, though? especially for larger images or tiled backgrounds –  Damon Jan 4 '11 at 22:59
2  
@Damon - I think it depends on the image. If you have a photo or a lot of colors, I would probably go with a .jpg over .png. –  Virtuosi Media Jan 4 '11 at 23:01
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.