Image Formats and Saving Images for Websites

I was recently asked (by my girlfriend who’s learning HTML) what image formats to use on websites. After trying to explain things such as transparency in GIFs I thought it would be best just to write it up.

• How do you save images for websites?
• The Three Main Image Format
• GIF Format
• JPEG Format
• PNG Format
• Summary

How do you save images for websites?

First of all you need an image editing program if you intend to create and save images. GIMP is completely free, available on a variety of platforms and is a good all round application for beginners and experts alike. I highly recommend you get it.

Once you’ve create an image (just draw a few squiggles at any size) you can save it by going to File > Save As. In the bottom right you will be presented with a lot of different image formats, so what do you chose?

The Three Main Image Formats

There are three main image formats when it comes to images and websites. They are GIF, JPG and PNG. The three formats are enough for most tasks and are recommended as lots of different browsers and operating systems can handle them with no effort on the users part. There are differences though described one at a time below.

GIF Format

GIF (Graphics Interchange Format) images are used mainly for animation and transparency.

Standard GIF images can only support true transparency. A pixel (1×1 square) can only be 100% transparent or 100% opaque. For this reason transparency in GIF is only good for square objects otherwise they will display like the image below.

JPEG Format

The JPEG image (Joint Photographic Experts Group) format is popular for compressing images with small file sizes. It doesn’t support transparency but is widely used for quickly sending photos or for loading images quicker on websites (as they have a small filesize).

PNG Format

The PNG (Portable Network Graphics) format was intended as a replacement for GIF files and is recommended by the World Wide Web Consortium (W3C). It has full support for transparency and lossless compression but isn’t supported or has quirks on many older browsers (including Internet Explorer 6) as it’s a new(ish) format.

Summary

• JPEG: Use for compressing images to a small size that don’t need to be high quality.
• GIF: Use for animated (or animating) images
• PNG: Use for high quality images or for transparency.

Bookmark or share this page:

Related posts:

1. GIMP Graphical Content Divider

MSN Contact: contact [at] danielgibbs.net