Image optimization — why it's important

Image optimization contributes to webpage faster load time, contributes to SEO and a better user experience (UX)

 Mobile users expect pages to load in less than 4 seconds.

Information on this page includes:

What is image optimization?

Image optimisation is a process that contributes to faster web content load time. The first part of the process is to decrease the file size of each image using a procedure that maintains image resolution quality. Adding an alt tag to optimised image during upload is the next step. The process contributes to content SEO.

Why is it important to optimize images for the web?

Optimized images contributes to:

Quick load time

In relation to quick load time, we all know how frustrating it is to land on a website with slow load time. It makes you want to jump off and try somewhere else

SEO

People jumping off your site too soon because of slow time will mean a high bounce rate, not a good signifier of site authority if the web page is more than, say, a ‘contact us’ page.

Accessibility

Alt tags for each image provides a description of the image. This contributes to accessibility for vision-impaired people relying on a screen reader so that they get the experience and information that other people have from your content. Alt tags are also an opportunity to contribute to content SEO by using keywords where they are contextually relevant (don’t willy nilly cram keywords into alt tags!). Adding alt tags to images on your site is properly finishing the job of providing quality content to your page.

Optimise the image by decreasing the image file size

  1. Start with a high resolution image

  2. The image quality is maintained (to best possible) while decreasing the image resolution and file size.

Steps for optimising images

1. Resizing image dimensions

If you have multiple images on a webpage, a basic rule of thumb for a standardised professional look is to have the image dimensions the same.

On ecommerce sites, all product imagery should be sized with consistent dimensions to ensure the images render on your page without being skewed, stretched, and/or without poor resolution.

Ecommerce website platforms like Squarespace or Shopify generally render product images to present as the same size. However, if the uploaded image is too small, or with markedly different dimensions, it might be stretched or skewed and therefore present as poor quality.

2. Minimise the file size (resolution)

High resolution image files, used in print media, are too large (in file size) to use as web imagery.

Images used in print media have high resolution (300+ dpi).

Images optimised for the web have low to medium resolution (72 – 200 dpi).

What will happen if you use images that are too large? The webpage load time will be very slow especially on mobile devices — not a good user experience. 

File size rough guide for web images

Web banner images file sizes: less than 200kb

Smaller content images for pages and widgets: less than 100kb.

See tools for minimising the image file size.

3. Apply ALT tags

ALT tags are important for web content accessibility compliance. If some users have their web browsers set not to show images, the alt tag still renders and offers a description of image

ALT tags are important for SEO: if you apply a meaningful alt tag that describes the image in relation to the page context, and include keyword(s) if contextually relevant, the tag will contribute to SEO. Also, search engines consider that completed alt tags contribute to meaningful and helpful content.

When to apply alt tags to images? This varies on the website platform you’re using. You’ll generally see a window during the upload process where the alt tag should be added.File

Tools for optimising images

Photoshop

If you have access to Photoshop, you probably already know how to save your images for the web using Photoshop's optimising tool. Depending on what version you are using, there are plenty of online instructions to help with using Photoshop to optimise images for the web.

Otherwise, there are two browser-based tools we recommend.

Free browser-based editing tools to resize images

Resizing image dimensions

Pixlr Editor will resize and crop images e.g. for setting the correct dimensions for a banner or widget. Then, after applying your changes, download the edited image to your desktop and upload it into the relevant Media folder in your area of the CMS. Although this editor is free, you do need to set up an account.

Go to Pixlr Editor

Decreasing file size and resolution

Tiny JPG — or Tiny PNG — reduces or compresses the file size of your images without losing quality e.g. optimising an image previously used for print media down from 500kb to 100kb.

Go to Tiny JPG

Basically, this is all you need to do once you open these tools:

  1. Drag and drop images from your desktop (or wherever) into the online tool (follow the prompts)

  2. Select and apply the changes you want to make.

  3. Download the edited image to your computer.