Web sites can contain JPEG, GIF,PNG, SVG format graphics. Which ones should be used, and when?
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.
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
Here are some resources for learning more about how to achieve the fallback technique:
When to use SVG
When to use icon fonts
Why is SVG the bestest option?
When to use JPG
When to use PNG
When to use GIF
* 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.
You should be aware of a few key factors...
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.
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.
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 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:
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!
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.
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
(migrated from duplicate question)
This totally depends on the kind of image you want to store.
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.
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.
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:
(EDIT: Also, I think even IE 7 has issues with some features of PNGs.)
GIFs only have two advantages over PNG:
EDIT: PNG is always preferable to GIF where it is supported and usable, since PNG is an open format.
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).
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.
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.