Introduction

The 2 most supported image file formats for the internet are GIFs and JPEGs. PNG's are great but despite their benefits are not properly supported in many browsers including Internet Explorer which rules them out for use on most web sites.

Many browsers can handle PDFs, native Photoshop files and Flash, but all these formats require an installed browser plug-in. GIFs and JPEGs will display natively in all browsers.

Extra reading

You may wish to read these associated articles for more depth and background to the concepts explained here.

More on the pros and cons of different image file formats here.

More on Image Quality concepts (including bit-depth and palettes) here.

Which file format should I use?

The basic rules are ...

JPEGs are better for photographic type pictures, which usually contain complex patterns of coloured pixels.

GIFs are better for illustrative flat colour images such as logos and simple illustrations.

Of course these rules are just rough guides and you can obtain some interesting results by turning photographic scans into GIFs.

What are the basic differences?

JPEG (.jpg)

The Joint Photographic Experts Group format is the most widely used interchange file format for pixel based images to be used in web sites.

JPEGs work by applying a compression algorithm to the image. The more you compress the smaller the file size but the poorer the quality. JPEGs must be de-compressed to be viewed. This makes them an unsuitable format for animation. De-compression occurs automatically in all web browsers.

GIF89a (.gif)

The Graphics Interchange Format is the most widely used interchange file format for flat colour graphical images to be used in web sites. The GIF89a format has superceded the original GIF format. GIFs work by reducing the number of colours in the image to 256 or less.

There are a number of ways this is acheived but all involve shifting some of the colours in the image to a smaller palette and/or creating a palette that contains only the colours that are in the image. Here are the main features ...

GIFs do not require decompressing to display (thus no codec is required).

GIFs have a maximum of 256 colours.

GIFs support interlacing which means the image will display in progressively more detail as it downloads into a browser window.

GIFs use an adaptive custom palette derived from the image itself and containing only the colours in the image.

You may also specify a transparent background for the image.

Finally GIF89a's support multi-image animation, so called "GIF animations".

What programs make GIFs and JPEGs?

Many programs can do this including ...

Photoshop

ImageReady

Fireworks

Illustrator

Freehand

Canvas

InDesign

How do I make a JPEG in Photoshop?

From Photoshop click on File > Save for web ... In the window that opens you can compare your original image with a preview of the compressed version.

If the 2-Up or 4-Up tab is active, click on the right hand image to select it (a soft blue border will surround it) and from the palette choose one of the JPEG presets, Low, Medium or High.

You can fine tune the level of compression with the Quality slider and add some Blur to help reduce the "blocking" side effect of compression.

Unlike GIFs, JPEGs don't support transparency so any transparent areas in the image will appear white. You can select another colour in the Matte box to help your image blend with a different non-white background.

You can click the Progressive button if you want the pixels in the image to display as they arrive in the browser rather than wait until the complete file has downloaded.

Check the picture whilst keeping your eye on the file size display. You will need to achieve a balance between acceptable quality for the lowest possible file size/download time. Remember to add up the total amount of download time for ALL the images on a single web page.

How do I make a GIF in Photoshop?

From Photoshop click on File > Save for web ... In the window that opens you can compare your original image with a preview of the compressed version you are working on.

If the 2-Up or 4-Up tab is active, click on the right hand image to select it (a soft blue border will surround it) and from the palette choose one of the GIF presets. Try a few of them and check image quality against file size/download time. This may be all you need to do.

There are many more options to choose from in making a GIF but whilst you are trying them, constantly check visual quality with file size/download time.

Here are the important options ...

Select a colour reduction algorithm (process).

Perceptual ... creates a colour palette based on the colours in the image according to how we perceive colour

Selective ... creates a colour palette from the colours in the image

Adaptive ... creates a colour palette in a slightly different way from selective

Web ... shifts the colours in the image to the closest colour in the web safe palette (216 colours) and creates a colour palette from them

Select a dither process

You can experiment with adding dither as you reduce the number of colours in the image. More on how dithering works here.

Colors

You can take control of the maximum number of colours in the images palette here and further reduce the number in order to try and reduce file size.

Transparency

Tick this box if you want transparent areas of the image to stay transparent. This will help reduce file size and allow you to overlay rectangular type images over a background. However, because the GIF format doesn't allow for semi transparent pixels, curves and irregular shapes will have unpleasant jagged edges

Lossy

This allows you to further reduce the file size. Try it and see if the reductions in image quality are worth it.

Interlace

Performs a similar function to Progressive for JPEGs.

Saving

Whether you are creating GIFs or JPEGs, don't forget to observe the ISO file naming conventions when you save them.

Related downloads

None at present

Related ads