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

This question has an open bounty worth +200 reputation from Scott ending in 20 hours.

The current answer(s) are out-of-date and require revision given recent changes.

Someone needs to provide a modern update beyond PNG, JPG, and GIF to include SVG. The existing answers are good, but none of them even elude to SVG.

3  
Given the age of this question, we should update it to include SVG –  DA01 Mar 11 at 15:30
    
@DA01, TIFF too –  Pacerier Oct 14 at 22:13
1  
Added a bounty to hopefully gain more SVG input. There is some, but it's somewhat outdated. @Pacerier .tiff is not a web format and therefore never suitable for web use. tiff is a format designed for printing. –  Scott Oct 15 at 21:04
    
And Dori it would be nice if you marked an answer correct. –  Scott Oct 15 at 21:44
2  
@Jongware as with TIFF, APNG has also poor support currently (and it will probably not get better in the future). –  Ken Fyrstenberg Oct 16 at 2:43

13 Answers 13

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

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

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
3  
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

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

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

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
    
Compression artefacts for JPEGs are not always visible. It depends only on the image type; computer graphics should not be saved as JPEG, but photographs should. –  Jongware Oct 15 at 22:05

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

(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

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

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. If you saved an image in a Lossy format over and over, the image quality would get progressively worse and worse.

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 for most use cases, 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

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-8 - Lossless / Indexed

PNG is a newer format, and PNG-8 (the indexed version of PNG) is really a good replacement for GIFs. Sadly, however, it has a few drawbacks: Firstly it cannot support animation like GIF can (well it can, but only Firefox seems to support it, unlike GIF animation which is supported by every browser). Secondly it has some support issues with older browsers like IE6. Thirdly, important software like Photoshop have very poor implementation of the format. (Damn you, Adobe!) PNG-8 can only store 256 colours, like GIFs.

Good for: The main thing that PNG-8 does better than GIFs is having support for Alpha Transparency.

PNG-8 vs GIF

Important Note: Photoshop does not support Alpha Transparency for PNG-8 files. (Damn you, Photoshop!) There are ways to convert Photoshop PNG-24 to PNG-8 files while retaining their transparency, though. One method is PNGQuant, another is to save your files with Fireworks.


PNG-24 - Lossless / Direct

PNG-24 is a great format that combines Lossless encoding with Direct color (thousands of colours, just like JPEG). It's very much like BMP in that regard, except that PNG actually compresses images, so it results in much smaller files. Unfortunately PNG-24 files will still be much bigger than JPEGs, GIFs and PNG-8s, so you still need to consider if you really want to use one.

Even though PNG-24s allow thousands of colours while having compression, they are not intended to replace JPEG images. A photograph saved as a PNG-24 will likely be at least 5 times larger than a equivalent JPEG image, with 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.)

Just like PNG-8, PNG-24 supports alpha-transparency, too.


SVG - Lossless / Indexed

SVG is a very unusual graphics format compared to the rest, as it can be created in a text editor. It's also unusual because it's the only format here that is Vector instead of Raster. With Vector images you can zoom in all you want, and it will never get pixelated. This is because, instead of the image saying, "colour the first pixel red, the second pixel blue, the third yellow", etc. SVGs say, "this is a circle filled with blue, this is a curve in red, this is a straight line in green". When you zoom in, you're just zooming in on a curve, not a pixel.

Because of this, SVGs are great for simple shapes, like icons, to be used on Retina displays, and especially shapes like you wish to animate based on user input (like graphs, for example).

W3Schools has a bad reputation, but I'm going to link to a very simple SVG example to show you how simple and effective they can be:

http://www.w3schools.com/svg/tryit.asp?filename=trysvg_ellipses

SVGs are very tricky to work with, so most people just find using a traditional raster format (like PNG or GIF) works well enough. If you wish to do advanced animations on your site, that can change on use input, then SVGs are perfect.

I hope that helps!

share|improve this answer
1  
+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

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

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
    
I must challenge your assumption that PNGs "are still not widely used, mostly because they're not supported by older browsers." - They are and have been widely used for a number of years now. –  Mr E. Upvoter Oct 15 at 23:21

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

For photos:

JPEG if there is no need for transparency. PNG for photo graphics that need transparency.


Whilst not 100% true, it's a good rule of thumb. Check out the other answers to this question to learn more about the other formats. Also, check out Which raster image format is better for digitally displaying images when there is no transparency; JPEG or PNG? and a selection of our tags, such as , , & to find out more.


For graphics:

SVG with PNG/JPEG Fallback.

There is absolutely no reason not to provide SVGs in this day and age. They are implemented in almost the exact same way as any normal image, and much more versatile.

So, the workflow for any modern website designer has not been completely changed, it has been updated. You still prepare and serve PNGs and JPEGs for graphics, but they are only fallbacks for when SVG doesn't work.

What is an SVG?

SVG stands for Scalable Vector Graphic. Without getting too technical, the difference between SVGs and other pixel based formats, is that the data for the composition of the graphic is stored as mathematical calculations. When a browser opens an SVG, it has to make calculations to render the SVG. Older browsers do not have the functionality to make these calculations or handle SVGs, furthermore, older computers might've struggled to render an SVG heavy webpage even if they could've been used 10 years ago (which they couldn't). The data for an SVG is stored in hexadecimal format (base-16), enabling it to be optimised in to very small file sizes in comparison to the binary storage of pixel data.


Here are some resources for learning more about how to achieve the fallback technique:

  1. Mastering SVG use for a retina web, fallbacks with PNG script

  2. Revisiting SVG workflow for performance and progressive development with transparent data URIs

  3. CSS Tricks - SVG Fallbacks

The following JavaScript snippet, copied from the first link, is all you need to detect SVG support in most, if not all browsers, and change the filename to provide PNG fallbacks.

function supportsSVG() {
    return !! document.createElementNS && !! document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect;  
}
if (!supportsSVG()) {
    var imgs = document.getElementsByTagName('img');
    var dotSVG = /.*\.svg$/;
    for (var i = 0; i != imgs.length; ++i) {
        if(imgs[i].src.match(dotSVG)) {
            imgs[i].src = imgs[i].src.slice(0, -3) + 'png';
        }
    }
}

Why is SVG the bestest option?

  • Scale beautifully to any size from one file (no need to serve @2x.jpg for retina screens or stretch the graphic)

  • Very often smaller file sizes than JPEG and PNG

  • Almost never have to sacrifice quality in the logo

  • Makes responsive design easier in many ways

Notes

  • Support is less common for inline SVGs, so for safety it's best to link to the files through image tags at the moment. (If you are going to reuse the graphic anywhere else, i.e. navigation icons, you want to link to it externally anyway so the browser caches it and saves time loading other pages.)

  • As usual, IE is slacking on support, and even the most modern IE cannot render SVG perfectly under all conditions. Most notably, if you only declare a height for an SVG image, hoping that the browser will scale the width proportionately (or vice-versa), most other browsers will do it wonderfully, but IE will instead make the image huge and basically stretch your webpage a lot with empty space. I'm still working on a way around this for my own project. With both width and height declared explicitly, IE renders SVGs perfectly fine.

  • You can still make sprite-sheets with SVG in much the same way you would with other image formats, but instead of using actual pixel values to define the x and y coordinates of each image, use percentage-based values.

    -- But what about those cases when percentage values aren't accurate enough?

    You should build the sprite sheet with the goal of being able to divide both the width and height by 100 and achieve whole numbers, or numbers with 1 decimal place at most. As an example, if you are arranging 7 x 10px x 10px icons together in a sprite sheet, do not create a canvas that is 70px x 10px. Why? Because when you divide 100 by 7, you get 14.285714285714285714285714285714, which, as a rounded percentage, would definitely cause some imperfect math somewhere. Instead, create a 100px x 10pxcanvas, and don't worry about the empty 30%. The icons will be at exactly 10% increments, which, needless to say, is much easier to work with.

To conclude and reiterate:

There is no reason not to serve SVGs for non-photo graphics in 2014. It is widely supported enough. Furthermore, the fallback is very easy to implement.

share|improve this answer

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.