HTML Tutorial – Optimising Jpeg files

HTML Tutorial – Optimising Jpeg files

Jpeg files are recommended for photographic images for the web. Jpeg files can be compressed . The more they are compressed, the smaller the filesize , but this is accompanied with a corresponding loss of image quality. This tutorial will use Photoshop 6.0 again but can be done in any graphics program.

  1. Open your jpeg file in Photoshop.
  2. Go “File” and “Save For Web”
  3. Click the “4 -Up” tab. This will show 4 different settings at once as well as the original file on the top left
  4. Select “Jpeg” from the file format listbox.
  5. Tick “Progressive” . Progressive Jpegs load in stages.
  6. Select “Low” in the Quality listbox
    • As an alternative to “Low” quality setting , you can use the “Quality Slider” or type a number between 0 and 100 in the quality field.
    • As you change quality, check each image preview for artifacts like in the image below. Zoom in to check for artifacts or chunky bits, and increase the quality until you have reached a compromise between filesize and image quality.
      1. Click “OK” and save.

Leave a Reply

Your email address will not be published. Required fields are marked *