What web graphics formats to use?

Question

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

Answer 1

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.)}

Answer 2

(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).

Answer 3

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.

• Indexed means that the image can only store a limited number of colours (usually 256), controlled by the author, in something called a Color Map
• Direct means that you can store many thousands of colours that have not been directly 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.

---

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.

---

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.

---

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.

Important Note: Photoshop has finally added support for alpha transparency in their latest versions. If you have an older one, 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 / Vector

A filetype that is currently growing in popularity is SVG, which is different than all the above in that it's a vector file format (the above are all raster). This means that it's actually comprised of lines and curves instead of pixels. When you zoom in on a vector image, you still see a curve or a line. When you zoom in on a raster image, you will see pixels.

For example:

This means SVG is perfect for logos and icons you wish to retain sharpness on Retina screens or at different sizes.

Additionally, SVG files are written using XML, and so can be opened and edited in a text editor, that it can be manipulated on the fly, if you wish. For example, you could use JavaScript to change the colour of an SVG icon on a website much like you would some text (ie. no need for a second image).

I hope that helps!

Answer 4

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

Answer 5

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 file-format tags, such as jpeg, png, gif & svg 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';
        }
    }
}

<DA01>

When to use SVG

• Whenever you can as it's typically the smallest file size and resolution independent meaning it can handle any device pixel ratio (retina screens, for example)
• When your art is suitable for vector file formats (icons in particular)
• When you have the luxury of only having to target modern browsers (SVG support is relatively new for some browsers)

When to use icon fonts

• When you need an extensive set of icons
• When, like SVG, you want the benefits of vector file formats
• When you have the luxury of only having to target modern browsers (web font support is relatively new for some browsers)

</DA01>

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.)

• IE does not support SVGZ, the compressed format available for SVG graphics. For greatest compatibility across browsers and recent previous versions, it's best to use SVG 1.0 at this point in time.

• 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.

  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 80px x 10px canvas, and don't worry about the empty 12.5%. The icons will be at exactly 12.5% increments, which, needless to say, is much easier to work with.

Answer 6

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.

Answer 7

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.

Answer 8

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).

Answer 9

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).

Answer 10

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

Answer 11

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.

Answer 12

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.

Answer 13

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.