What is an Image?
You will most likely be familiar with digital images through webpages or the pictures on your computer. Digital images are produced by scanners, digital cameras, image software (eg. Paintshop, GIMP, Adobe Photoshop) or other devices and software.
A Digital Image File is a file that contains the information that describes the image. This file describes columns and rows which make up the image. Each unit of these columns and rows is known as a pixel (short for picture element). A pixel is the smallest unit that makes up an image.
Formats
There are many methods for describing how the pixels and columns and rows make up an image. The way you describe how these components work together is known as the format. For example, a digital picture of a house can be described in many ways. You may decide to use the method for describing the picture known as JPEG - so you save the picture as a JPEG. This means that the image file describes the image of the house using the rules of the JPEG format. If you saved the picture as a GIF then the rules describing the picture of the house conform to the GIF format. Each of these formats has its strengths and weaknesses depending on the purpose. The most used formats are TIFF, PNG, GIF, and JPEG. It is good to know a little about image formats so you can know which is the best format for your purpose.
File Compression
File size is an important function of a format. Some formats reduce the size of the file dramatically, this can aid the delivery of images over the internet where file size is a factor in determining how fast an image loads in a browser. The process of making a file smaller is referred to "as compressing the file".
When you want to make a file smaller you can compress it in one of two ways, to visualize this you can imagine placing a object into a plastic bag. How do you make the volume of the plastic bag smaller? You can either throw stuff away, or you can make the bag fit better around its contents (by sucking the air out for example).
If you throw stuff away you are losing some of the original contents. You can keep doing this until there is nothing left, reducing the bag volume more and more until nothing is left.
If you suck the air out of the bag you have the same contents but the total size of the bag is smaller. However you can only do this to a certain point - if you had an apple in the bag, for example, you could not get the bag to be smaller than the apple.
These strategies apply to image files too. If you throw data out of the image file you reduce the size but you also are losing data which means the quality will be reduced. This is known as lossy compression. If you optimize the file size by 'compacting' the data without throwing data away, you reduce the file size but only to a certain point. This is known as lossless compression.
Different file formats approach compression in their own way. PNG and TIFF use lossless compression so are called lossless formats, while JPEG and GIF are lossy formats.
PNG
PNG (short for Portable Network Graphics) was created as a royalty-free replacement for GIF. PNG uses lossless compression, relying heavily on using smart mathematical ways of finding and describing patterns in an image file. Hence if you have an image with a large area of the same color then PNG is very effective in reducing the file size. PNG is also the only lossless format supported by browsers so if you wish to display images online without losing quality then PNG is the format for you.
PNG supports transparency which is good for creating fades, placing images nicely on a webpage regardless of what the background color is etc. However while this will look good in Firefox (for example) Internet Explorer 6 (and earlier) does not support transparency in PNG so transparent parts of a PNG image will display as grey in Internet Explorer in these browsers. Internet Explorer 7 displays PNG transparency correctly.
PNG does not support animation so you cannot make moving images similar to what you may have seen with Animated GIF.
When saving an image in the PNG format you can use the suffix '.PNG' or '.png'.
TIFF
Once known as Tag Image File Format, TIFF has been around for a long time, and the format is now owned by Adobe Systems Incorporated (the manufacturers of Adobe Illustrator, Adobe Photoshop etc). TIFF uses lossless compression and is often the highest quality format produced by digital cameras. However the file size of the resulting image is huge compared to JPEG and the quality difference is not always noticable to most people.
TIFF is suitable for image storage or manipulation where quality is important. You can edit a TIFF file with a software like GIMP and lose no quality when you save it as a TIFF. Excellent for storage of original image material or for print production. TIFF is not suitable for web browsers as the file size is huge and most browsers do not support displaying TIFF.
If you save a TIFF file you can use the suffix '.tif' or '.tiff' (or '.TIF and '.TIFF').
GIF
The Graphics Interchange Format (GIF) is owned by ... well there's a story in itself. It used to be owned by UNISYS and it still is in some countries but in others the patent has expired. In 2003 and 2004 the patent expired in the USA, United Kingdom, France, Germany and Italy, Japan and Canada - hence in these areas GIF is a patentless format and belongs to the public domain. The history of the ownership of GIF is interesting and worthwhile reading about if you have nothing better to do than read about histories of file formats!
GIF is a lossy format, however this is not quite true...GIF actually only uses lossy compression if the original image uses more than 256 colors. If you know how many colors your image contains and it is less than 256 then GIF will compress the file size a lot while keeping the image exactly the same. This makes it very effective for web graphics where small file sizes are important.
However, if you have more 'color rich' images (eg. most images from a digital camera) then converting them to GIF will reduce the file size but also the lossy compression will dramatically reduce the colors used and hence the quality will be reduced.
Hence GIF is ideal for creating simple images of text (for example) which might be used in a navigation bar on a web page. However your holiday snaps put online in GIF format will look pretty surreal.
GIF supports transparency which makes it nice for webpages where the background of an image needs to blend into the webpage background color. GIF transparency is supported in all browsers.
GIF also supports animation and there are several tools that enable you to make animations using GIF. These animations can be displayed in any browser.
When saving a file as GIF use the '.gif' or '.GIF' suffix.
JPEG
JPEG stands for Joint Photographic Experts Group. Huh? you might think..."I thought it was a file format not a committee"...well....the Joint Photographic Experts Group is the name of the committee that created the JPEG format. However there was a battle over who actually owns the format but it is now settled (phew). The JPEG committee believe the format should be used without enforceable license fees, so while the format is patented you can use it for free.
JPEG is the most commonly used format for images on the web. It is usually a lossy format but there are variations of JPEG that use lossless compression. It is likely that any form of JPEG you use reduces file size by lossy compression.
Where GIF will kill the quality of images with many colors, this is where JPEG excels. A photo from your digital camera will look good when compressed with JPEG while reducing the file size dramatically. Most digital cameras store images in JPEG for this reason.
The amount of data thrown away when saving to JPEG is determined by the software. Good softwares give you the choice of the compression level JPEG will use on your image. Generally speaking a compression ration of 85% will dramatically reduce file size while not creating any noticable quality deterioration. However the level of compression needed depends on your needs and your eye. Experiment with it.
JPEG is great for putting images with many colors online, and it is also great for reducing the storage space needed for your collection of digital images.
JPEG does not support animation or transparency.
You usually use .jpg, as a suffix for JPEG files although .jpeg, .jpe, .jfif and .jif are all used (or the capitalised equivalents : .JPG,.JPEG etc)