How To Optimise Your Images

Team member - Daniel Hales By Daniel Hales |
Published 05/07/2021

Good web design will be centered around making the most out of any image resources that your business has. This takes you from being another generic business to one that feels real, personable and one that people want to do business with. However there are a number of issues and potential opportunities you may miss if these images aren’t optimised.

In this blog post we look at why it’s important to optimise your images as well as the different elements you need to be looking at.

Why Is Image Optimisation Important?

There are three main reasons why you want to ensure that images on your website are fully optimised:

  • Website loading times – it’s likely that your images are going to be the largest files your website is loading and can therefore have a huge impact on your loading times. Minimising your image sizes can therefore go a long way to reducing loading times, which is important for both user experience and your search engine rankings.
  • Traffic from image searches – depending on your niche, there’s plenty of opportunity for you to be driving traffic to your website from people doing image searches. These may be less commercially ready compared to regular searches but are still great for brand awareness.
  • Accessibility – Making sure your images are optimised also has accessibility benefits for your websites. For example if your website has a visitor that requires a screen reader for content, the alt text will be read out to them so they’re aware of the image’s context.

Elements of Image Optimisation

You should now have an understanding of why image optimisation is important, next we look at the individual elements that you should look into.

File Size

As mentioned above, images can have a huge effect on loading times and making sure the images file size is as small as possible for how it’s being used on the website is very important. There are three main things to look at for this:

  • Image Format – Selecting the right image format is the important first step. Different formats have different benefits, but also affect the file size. The standard image formats are:
    • JPEG – Usually results in the smallest file size and should be used whenever possible.
    • PNG – Can be larger in file size, however allows for transparent backgrounds and should therefore be used if a transparent background is required.
    • GIF – Allows for animation on the image and should be used if this is a requirement.

    There are also next generation image formats which can be used. If using WordPress these can easily be implemented using a plugin such as SG Optimizer, which automatically takes the above file types and changes them to be next gen.

  • Compression – Most of the time you will be able to compress images without noticing any difference. You should test image compression at different levels in order to get the right mix between image quality and file size.
  • Image Sizing – There’s no point having an image bigger than it will be displayed on your website (you may want it to link through to a bigger version.) so you should ensure that the image is saved to the size you require it to be. This can have huge savings on the file size.

Ensuring that you get all these elements correct will mean that your images are loading as quickly as possible, leading to an overall faster website.

Image Attributes

In order to enable your images to be understood, whether from search engines or people with eyesight difficulties, it is important that certain elements are used. These will ensure that your website is accessible to everyone as well helping them be shown in search engine image results.

  • Alt Text – The alt text tag is the most important element for these factors. It was originally designed to tell you what an image is meant to be if it couldn’t be loaded and therefore should be descriptive of what the image is in context with the rest of the content. It is now also used by screen readers to give the same information to people with eyesight problems.
  • File Name – The file name is then an extra hint as to search engines what the image is. This should be descriptive of the image and include keywords you wish the image to show for.
  • Title – You may also want to consider adding a title tag to your image. This is slightly less important and will show when your image is hovered over.

To ensure that your website meets accessibility standards and that your images can be found on search engines you should ensure that all these elements are added to your images.

If you’re having issues optimising your images and your overall SEO strategy you can get in touch with Pinnacle Digital via our SEO page.

Sign Up To Our Newsletter