Business & Marketing

Using images on your website

This article takes you through how to name your image files for optimum find-ability, and how to optimise them to make the most of your hosting space.

Images and Search Engine Optimisation (SEO)

What you name your files can have an impact on your SEO.

Giving your files consistent, descriptive names will give your website a boost and get you found in image searches.

Image naming

Make sure your images aren’t named things like DC1334.jpg. What is the picture of? This photo in my example is of a brown sea turtle, so you might name the file brown-sea-turtle-closeup.jpg

Hyphens not spaces

Use hyphens, not spaces or underscores. As above, brown-sea-turtle-closeup.jpg

Alt text

Make sure you specify an alt text. This descriptive text is used for accessibility, but search engines will read it too. If you are using WordPress you can set the alt text in the media manager like so.

Screenshot of the WordPress media library

Optimising your images

It’s important to optimise your images before uploading them to your website. Your content management system (CMS) will handle some of the image optimisation tasks for you, but there are reasons to optimise first, such as:

  • Your hosting may have a restriction on how much space your website is allocated. Image files, especially straight from the camera, can have very large file sizes. If you upload these big files these files will still sit on your server and take up room.
  • Your hosting or CMS may have a restriction on the size of file you can upload.
  • It allows you to crop and optimise the images to your preference.

For this tutorial I am using Squoosh ( This does all the key tasks:

  • Allows you to specify the dimensions of the image (2400px for my websites).
  • Reduces the file size (we’re aiming for below 500kB if possible)
  • Ensures the image is web safe (RGB colour, 72dpi)

In this example we are using this lovely photograph from Unsplash.

Screenshot of image information in Mac Finder

As you can see from the details, the image is already 72dpi, but is 1.6MB and almost 5000px wide.

Simply drag and drop your image onto the Squoosh screen.

Here in Squoosh you can see that it has reduced the file size, but the image is very big, so we’re going to reduce it to 2400px wide.

Screenshot of Squoosh showing the differences in image quality

The arrows in the middle allow you to compare quality and adjust to your preference. Remember that once the image is smaller, the difference in quality will be less noticeable.

Screenshot of Squoosh, showing the image options

Here you can see we’ve reduced the size from 1.65MB to 154kB – much better! You can download your new image with the button in the bottom right.

File types

As a rule of thumb:

  • If your image is a photograph or detailed drawing, it should be a JPG.
  • If it animates, it should be a GIF.
  • If it is an icon, or other small image, it should be a PNG.

Further Reading