[act]Work in progress!! still need some piccies. Leave any initial comments below :D [/act]
This tip is to simply serve as an explanation of the most common different raster image file formats, where to use them, why to use them, etc.
A lot of explanations will come direct from Wikipedia and be edited to demystify (since they've already got the wording sorted - why reinvent the wheel? :D ).
Firstly and explanation of the terms 'Lossy' and 'Lossless', which are very important when considering which image format to use.
In plain English, lossy and lossless both describe the way an image is compressed when it's saved in a various format. For example, a 2MB photoshop (.psd) file can save out as a .jpg and reduce to 100KB in size - how?
When you save any file to another format, some sort of compression is involved. Lossy and Lossless explain two types.
Lossless reduces file size with no loss in image quality, but greater file size. When image quality is valued above file size, lossless should be used.
Lossy takes advantage of the limitations of the human eye, and discards information that cannot be seen. Most lossy compression allows for variable levels of quality (compression) and as these levels are increased, file size is reduced.
At the highest compression levels, image deterioration becomes noticeable (blocky edges, loss of colour depth, etc).
Now that's explained, onto the most common image formats.
.jpgJPEG (Joint Photographic Experts Group) files are a
lossy format (in most cases). The compression when not too severe does not detract noticeably from the image.
When to use: the majority of high-quality images on websites are .jpgs. This is because it provides the best balance between colour depth + quality, and file size.
I would recommend use a .jpg if you weren't sure on which image file format to use (but that is just my opinion; many people are partial to .png over .jpg, which will be listed later on in the tutorial).
Example:The main obernet header
~Link~ is a .jpg, since we have a lot of blended colours and want it to be highest quality but not take too long to download on user's computers.
.gifGIF (Graphics Interchange Format) is limited to an 8-bit palette, or 256 colours. This makes the GIF format suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images.
The GIF format supports animation and is still widely used to provide image animation effects. It also uses a
lossless compression that is more effective when large areas have a single color, and ineffective for detailed images or dithered images.
When to use: When you need animation (and don't want to use flash player), you need to save as a .gif. It's the only basic image format I know of that supports it. Also use a .gif if you have an image with less than 256 colours (eg, cartoon-y type images, not photographic quality).
Example:My current
avatar is a .gif.
.pngThe PNG (Portable Network Graphics) file format is regarded, and was made, as the successor to the GIF file format. The PNG file format supports true color (16 million colors) whereas the GIF file format only allows 256 colors.
The
lossless PNG format is best suited for editing pictures, and the lossy formats like JPG are best for final distribution of photographic-type images because of smaller file size.
When to use: When your images contain lots of uniform colour, .png can't be beat for best image fidelity and smallest file size.
When you have a lot of colours on your image, .jpg will still give you the smallest file size.
Example: I use .png for small images on websites - for example, the text formatting option buttons (
,
, etc). Why? Because they give the best quality, and an absolutely minuscule file size, which is very important when building image-heavy websites.
Be careful: Many older browsers do not yet support the PNG file format. Instead of seeing transparency, occasionally a user will see a slightly darker background colour (it's to do with the alpha transparency interpretation, but I won't go on about it; just know that occasionally this will happen if you use .png's on websites).
.bmpThe BMP file format (Windows bitmap) is used internally in the Microsoft Windows operating system to handle graphics images. These files are typically not compressed, resulting in large files.
When to use: NOT ON THE WEB!! :P I can't stress that enough. .bmp file sizes are, as previously mentioned, traditionally quite large. The larger the file, the longer it takes for other people to download it from the web. You're much, MUCH better off saving any .bmp's off as .jpg before sharing them.
So where are they useful? During image creation. Because .bmp are 'typically not compressed', they will give you a high image quality (as well as a high file size). Use them inititially when creating your masterpieces; give them to people on a CD --
(tbc...)
Sources:
Wikipedia: Image_file_formats
Wikipedia: Raster_graphics