Optimising Web Images

Optimising Web Images
Share with friends

Table of Contents

Web Hosting from £19.95
Hosting plans come with enhanced server security and 24h automatic backups. Lightening fast speeds with SSL certificates included free with all our plans.
Written by Simon

Last Updated 18/12/2023

Why You Should Consider Optimising Web Images

So what do we mean by “Optimising Web Images”? Large image sizes will slow down your web page’s load time and this will impact your user experience and negatively impact your SEO. Having images optimised will mean your website can load quickly and your visitors can see your content.

There are three main components for ensuring your images will load fast:

  1. Image Size
  2. Image Optimisation
  3. Good hosting specifications

This article covers the first two items. Be sure to resize your images before optimising them with a free Optimising Web Image tool TinyPNG.

Recommended Reading: Uploading an Image to WordPress

How do I Size an Image for My Website?

As mentioned above, the primary role of ensuring your images are the right size is to speed up your website’s loading time. Amazon ran a web speed study where they found that for every 100ms it took their website to load, they lost 1% in revenue. So we can see that this is indeed very important. 

It is quite common for web startups to use stock images on a website. However, stock images are often hi-res for print and this can cause delays to a website’s load time.

Resizing your images before uploading them to your website is always the best practice as this will save you server space. If you have Photoshop and Illustrator, resize your images and move on to image optimisation. There are free alternatives like gimp.org (a Photoshop equivalent) or befunky.com (a simple photo editor). Below are some image size recommendations:

  • Thumbnail – 300px width
  • Box image – 750px width
  • Half page image – 900px width
  • Banner image – 2000px width

Adjust your height is ratio to the recommended width.

If your image is already on your website, below are some steps to reformat your images in WordPress.

Resize an Image on WordPress

Navigate to the media gallery and click the square box to change the view from thumbnail to list view. Click Edit and this will open the image editing window.

Edit an image size in WordPress

Here you can edit the image’s name, when you have done this don’t forget to click Update to save. To edit the image further, scroll down and click Edit Image.

Edit an image

In this window you can edit the dimensions of your image to be better sized for your website. Below is a diagram to assist with correct size selection. 

On the right, under where it says ‘New dimensions’, change either of the boxes to the size you require. You will notice that the other box auto-scales to fit.

Once you have a size you’re happy with, click Scale>Update and your new image is saved.

Scale an image size

Image Cropping

At this point in the editing window, we can also crop the image for better proportions. Click Crop, and drag the dotted edged line into the centre. You will notice the selection box on the right will start to change. Click Crop>Save>Update and your new cropped image will be saved.

Here you can edit the image’s name and when you have done this, don’t forget to click Update to save. To edit the image further, scroll down and click Edit Image.

Crop an Image

Once you have a size you’re happy with, click Scale>Update and your new image is saved. Check to see how your image looks on the front end of your website, if it looks a bit pixilated, select Restore Original Image and keep playing with the size until it looks right

Optimising Web Image

Your server plan, unfortunately, isn’t infinite. The more server space you need, the more you will need to pay! Good image optimisation will allow you to squeeze as much value out of your plan as possible.

To optimise your images, we recommend TinyPNG. They are a free .png and .jpeg compressing website and will reduce your image file size without compromising on quality. Look at the screenshot below:

Optimising an image with tinypng

As you can see with these three images we saved 73% of the file size, which is great! If you do this before uploading your images, you will have a speedy website and save money with one server space.

Before uploading your images to your website, make sure you run them through TinyPNG first.

Link to website: tinypng.com

Bonus Image Resizing

If you are working on a file in Illustrator, another top tip is to copy it into Photoshop and then export it there. The file size Photoshop exports flattens the image and will be much lower than Illustrators. Where possible, always export as .webp.

.Webp is a popular modern image file type that is smaller and better suited for the web. There are some free .jpg to .webp converters like CloudConvert.

Some site optimiser plugins have .jpg – .webp converters built in

Web Hosting

From £19.95 /mo