Web Design Tutorials and Inspiration | Learn Photoshop Online | Creative Inspiration | Web Resources

Essential Knowledge – Understanding file formats : .JPG, .GIF and .PNG

Posted on 17. Sep, 2009 by bmackler in Design Fundamentals, Photoshop

When speaking with people at the early stage of their design education one of the most frequent questions I get is “What is with all the file formats, how do you choose between .gif, .jpg, .png and and .psd”  This is essential knowledge for any designer, the quality of your work and the end result rides on choosing the right format.  If you choose the wrong format your overall presentation will be greatly affected.  You are compromise file size, pixilization and loss of quality. There are many files that Photoshop can output but we really are only concerned with these four.

Quality vs. Size

When designing for the web we want the smallest size possible, making your site load faster. You also want your images to look good. So… you need to find a balance between having a clean professional image and having a small enough file size.

Bitmap Images (General term for raster images)

Bitmap graphics are the most common graphic format (and the above mentioned formats fall into this category) used in web development.

Bitmap graphics are composed of pixels, each of which contains specific color information. A pixel is small; a single image may be composed of hundreds of thousands of individual pixels.  Much like being in high school science and looking at a piece of cork under a microscope, these pixels are only clearly and individually visible when the image is magnified.

Magnification

As we discussed in a previous posting, A graphic composed entirely of pixels each with its own color properties is ideal for photographic images where there are thousands, even millions of different colors.  Solid colors, shading and gradient effects can easily be rendered.

In Bitmap graphics, there is a connection between pixels and the image they compose. When a Bitmap graphic is saved, the computer is really saving an exact visual picture of the image: this pixel goes here and is this color; this pixel goes there and is that color until it creates an image

When attempting to enlarge these images… the computer must add in extra pixels to the original image to allow it to fill the new larger area.  Since there is no real source for this information, it must be generated and expanded based on what is currently available in the image. Because of this Bitmap images that have been scaled larger are frequently blurry. After extreme size increases, individual pixels “blocks” are more pronounced, pixilating the image.  Once the image is enlarged it will never be as clear as the original.

Image Resizing

GIF - Graphics Interchange Format – Images using a fixed color palette (limited to only 256 colors – not the  full spectrum of colors available to your monitor). The GIF format uses compression for smaller files and faster downloads.  This format is best for images with solid uniform areas of colors like illustrations and logos.

JPEG - Joint Photographic Experts Group – Used for photographic images, gradients and complex color patterns. JPEG images make use of the full spectrum of colors available to your monitor including all the shades and subtleties inherent in it. This format uses a built in compression to create smaller files resulting in faster downloads.  However, unlike the compression method used in GIF files, the JPEG compression is “lossy” which means it discards data in the process. Once a file is saved in JPEG format the data is permanently lost.  IF you plan on using the images at different sizes and compressions it is best to set it to “lossless compression”.

PNG - PNG is one of the newest web graphic technologies. PNG is great for quality and file size. You have the best of both worlds in a PNG.  The biggest bonus is that PNG supports transparent backgrounds. The only downside to a PNG file is that the previous generation of web browsers don’t support it.

PSD – Photoshop’s native format, stores an image with support for most imaging options available in Photoshop. These include layers, masks, transparencies, text, channels, etc.  It is an uncompressed file format, this is in contrast to many other file formats (e.g. .EPS or .GIF) that restrict content to provide streamlined, predictable functionality.

Tags: Photoshop, tutorials