How to optimise images for your website

Why do I need to edit my images?

Digital photographs from your camera are far too large for the web. If you upload them just as they are, they may make your website load very slowly and you might lose visitors and Google ranking.

How to optimise images using Irfanview: Free, easy to use photo editing.

Physical size:

  • Usually, 500 pixels is a good width, when allowing text to wrap around the image.
  • 500px as a maximum height allows all of the image to be seen on the screen. (Any larger and the bottom of the photo will disappear below the fold.)
    • 700 or 800 px will comfortably fill the width of the screen. Maximum photo width for WordPress Canvas theme: 900 pixels.
    • For smaller images aim for about 1/3 of the width of the page – about 300px.
    • Thumbnails: 150px width works well.
    • A consistent width is much more important for a neat looking page, than height. Keep sizes as consistent as possible throughout the website.

File size:

  • Don’t upload big photos = huge files which take a long time to load.
  • Usually somewhere between 20 & 50kb usually works well.
    • Outdoor images with lots of small detail such as leaves, might need 80kb (maximum 100kb).
  • If you do upload big pictures WordPress can shrink them (you can select smaller dimensions to display), but too many huge file sizes can cause problems.
  • So make your pictures roughly the right size before uploading them
  • Modify your picture using a free image editing tool.

File name:

  • Save the image in a folder on your computer – use a 2 or 3 word file name-with-hyphens that describes the image, and that you will recognise.

File type:

  • Use JPG for most images, including photos;
  • GIF for diagrams or simple illustrations;
  • PNG for very high quality images, or specialist images, e.g. with a transparent background.

Image copyright:

  • It’s best to put the copyright/photographers name on the image itself before uploading to your website – as an unobtrusive watermark. This can be done easily with text or an image, using Irfanview. It is virtually impossible to prevent your image ever being used by other people – but watermarked images usually get left alone.

, , , , , , , ,