Saving your images for the web

When preparing images for use on the web, saving them in the correct way will ensure that they appear quickly for your readers.

Remember, internet access on campus is much faster than home broadband connections. If you haven't saved it in the correct way, an image which appears almost instantly for you could take several seconds for someone at home, or minutes for someone using a mobile device.

How to save your image

The exact method and settings for saving your image correctly will depend on the software you use:

Adobe Photoshop

1. From the File menu, select Save for Web & Devices (just Save for Web in earlier versions).

Select "Save for Web & Devices"

2. Select JPEG and enter a value between 50 and 60 for Quality.

Select JPEG and enter a value of between 50 and 60 in the Quality field

3. Save

Corel Paint Shop Pro (available on all supported connections)

Corel Paint Shop Pro is available to install on all supported campus computers. Once installed it will be available under Graphics & Presentations from the Start menu.

1. From the File menu, select Export, JPEG Optimizer

Select File Export JPEG Optimizer

2.Enter a value of between 10 and 20 for Compression value

Enter a value between 10 and 20 in the compression value

3. Select OK

Picnik (free online editor)

Picnik is a free online image editor which is very simple to use. One slight downside is that it doesn't compress images quite as well as Photoshop or Paint Shop Pro, so you'll find that your files are slightly larger. But if you don't have access to either of those packages it's a convenient option.

1. Select the Save & Share tab

2. Select a value of at least 6 for JPG Compression Quality

Select at least 7 for JPG compression quality

3. Save Photo

Smush.it (free online optimiser)

Smush.it is an online tool that will optimise any images that you upload, so that file sizes becomes as small as possible, without affecting the image quality.

Images can be uploaded in batches, and the results downloaded as a single ZIP file, making it a very quick and straightforward tool to use.

Savings will vary depending on your images, but you could easily see a reduction of several hundred kilobytes for a batch of homepage banner images.

Appropriate dimensions and file sizes for images

The exact file size will depend on the content of the image, the dimensions you crop it to and the software used to save it. The table below is a guide to the range of sizes that you should expect for different types of image.

  Right hand column
(218 pixels wide)
Middle column
(505 pixels wide)
Full width
(720 pixels wide)
Simple images
10kB to 20kB
15kB to 25kB 20kB to 35kB
Average images
20kB to 30kB 25kB to 35kB 30kB to 50kB
Complex images
30kB to 45kB 40kB to 70kB 70kB to 100kB

Don't over compress your images!  It's fine for your files to be a bit larger than the suggested range - don't compress them beyond the point where they start to obviously lose quality.

Examples of different image types and typical file sizes

Simple images

Examples:

  • One person against a simple, uncluttered background
  • Any image dominated by a single solid colour, such as a clear blue sky

720 pixels wide: 25kB

Low level of detail, 720 pixels wide

505 pixels wide: 20kB

Low level of detail, 505 pixels wide

218 pixels wide: 15kB

Low level of detail, 218 pixels wide

Average images

Examples

  • A small group of people
  • One person against a busy background

720 pixels wide: 35kB

Medium level of detail, 720 pixels wide

505 pixels wide: 25kB

Medium level of detail, 505 pixels wide

218 pixels wide: 20kB

Medium level of detail, 218 pixels wide

Complex images

Examples

  • Large groups of people
  • Intricate architectural details

720 pixels wide: 75kB

High level of detail, 720 pixels wide

505 pixels wide: 60kB

High level of detail, 505 pixels wide

218 pixels wide: 40kB

High level of detail, 218 pixels wide

Who to contact

Paul Kelly, Web Content and Design Officer
01904 324578
paul.kelly@york.ac.uk