Return to Answer

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

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.

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.

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.

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.

• 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

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