Image Files for the Web
There are 3 standard image files that are used on the web: 1) jpg, 2) gif, and 3) png. These files are best known for their compression ability and are recognized by most browsers. The average resolution size for a web image ranges from 72 - 150 dpi (dots per inch). The higher the number, the higher the resolution, which means the larger the file size and download ability takes longer.
JPG or JPEG - Stands for Joint Photographic Experts Group and is the most commonly used file type on the web. It is best known for the ability to compress without losing quality. This file type cannot be used on a transparent background. Notice the basketball image to the right. On a white background it looks transparent because the background is white, but if we cut and paste it on another image, you can see the white background on the image below. The floor is the background, but with white around the ball, it looks awkward.
PNG - Stands for Portable Network Graphics and is becoming more popular as it can be used on a transparent background. The ball without the white background on the image below was a png file that was cut and pasted onto the floor background. PNG files are better at being compressed without losing quality, unlike a gif file. If you have to choose between a gif or a png file because you need a transparent background, my advice is to go with the png file.
GIF - Stands for Graphics Interchange Format and is used on transparent backgrounds. Unlike jpg and png files, it can also support animations. See the rotating earth below. Notice how the blue water has swirly lines in it? This because of resolution issues. Gifs supports up to 256 different colors, which makes it unsuitable in reproducing photos with continuous color, especially high-resolution.
Print File Types
The following file types are not typically used on the web, but are preferred output file types for printing. The preferred resolution for a printable file is 300 dpi or higher. All of these files types can be converted into a web-based format using a program such as PhotoShop or some other photo editing program.
TIFF - Stands for Tagged Image File Format and is often used by designers in laying out graphic design images. Since this file does not compress, it is usually large and takes up more storage space. Designers like using this file type while creating their design projects because it does not lose resolution no matter how many times it is saved.
EPS - Stands for Encapsulated Postscript and is a vector file. While the other file formats I've listed are created by using pixels, an eps file is created using mathematical equations. Therefore, when the other images are enlarged or made smaller, they lose pixel quality, but a vector image never loses quality or proportion because of the mathematical percentages that it uses to calculate the size changes. EPS files can only be opened by special programs such as Adobe Illustrator, Photoshop, Corel Draw, etc. These files are not viewable on the web.
PSD - Is a Photoshop file that is only recognized by the Photoshop program and some other Adobe programs. It is great for graphic designers to use while creating their design work. The resolution is excellent, it supports layers, high quality colors, transparency, animation, etc. I often create my files in psd formats and render them in one of the other formats for publishing on the web or for printing.