Saving Images for the Web

Compression, Formatting and Optimising

When working with and saving images for the web there are several considerations, primarily size and speed of loading, which will ensure that your image is viewable to the majority of web users.

Firstly you need to source your images and find a graphics program to edit your images with. More on Online Image Sources.

With your selected image in hand, here's our list of suggested steps. Some you may be able to skip depending on the resolution and size of your image.

1. Crop your Image

Get rid of any extraneous material which is making the file larger than it needs to be. This automatically gives you a smaller file size, and an image that is tighter visually for your audience.

2. File Format
If your file is not yet a format that is web compatible, then it needs to be saved as usually either a .gif, .png or .jpeg to be viewed online. To decide which is better for your image, read this article explaining the difference.

3. File Size
Think about the size that you want your image to appear on your website. For this exercise you need to start thinking in terms of pixels rather than in centimetres, millimetres or inches. A standard web page is somewhere between 500-1000 pixels wide (depending on your layout), thus if you want your image to be half the width of the page you can work out how many pixels wide it should be. 

If you have multiple images, then try to think about how your images are going to be viewed as a whole on your page before you resize and save them

  • Are the images all lining up one below the other?
    Make your images the same width so they align nicely.
  • Are the images lining up across the page?
    Make then sure you images are the same height, again for good alignment visually on the page.
  • Do you have lots of images to sit together on a page?
    Drop them into a table so that they sit in proper alignment

4. Compression

When you are saving your file, you have options regarding the 'quality' of the image. This is referring to compression which directly influences your file size.

There are two types of compression-

  • Lossless- squashing a file which later returns to its original size
  • Lossy- the compression of a file which loses information permanently

When saving a jpeg file there are four levels of quality that can be selected (generally I go for one of the medium levels 6-9 to maintain reasonable quality but reduce file size)-

Level 12

Level 9

Level 6

Level 3

Highest Quality

High Quality

Medium Quality

Low Quality

No Compression

Minimal Compression

Medium Compression

High Compression

The more an image is compressed, the more blurry it gradually appears. The challenge when saving images for the web is to retain enough detail for the image to be clear at its size, but not to load overly large files unnecessarily.

Some images are more able to be easily compressed; those with large areas of similar colour. Very 'busy' images are more difficult to compress because of their detail.

To Anyhoodles Home from Saving Images for the Web  .  More Web Tutorials