Saving Images for the Web

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 either a .gif 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 about 500 pixels wide, thus if you want your image to be half the width of the page it will be about 250 pixels wide.

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?
  Stay posted for a tutorial on using a table for your images.

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)-