How to speed up your website by optimising the images

Improve SEO and make your website super fast for visitors

Slow websites are annoying and there are better things to do than wait for web pages to load. There are many causes and one is poorly prepared images. Speed up your site by shrinking and compressing them.

Optimise images for the web. Shrink them and compress them to make them smaller and speed up web pages

The speed of a website is important and the longer it takes for pages to load, the more chance there is that someone will skip your site and go elsewhere.

A slow web server is one cause of a slow site and sharing the hardware with dozens or even hundreds of websites can make your own site very slow. However, it is the most common and most used form of web hosting.

If the computer your site is running on is also running many others, each one only gets a small part of the processing power and memory. That's why it is slow. The solution is to move to a hosting plan where you share the hardware with fewer other sites.

You can even get your own dedicated hardware. The downside is that this can be expensive, so you might want to avoid this if at all possible.

Another cause of a slow site is a poorly designed theme for your CMS (content management system), typically WordPress.

Changing the WordPress theme isn’t always easy and it may cost you money too. You might even need to employ someone to do it for you.

Tweaking the code to make a site more efficient is technically difficult too.

Optimise the images

The one thing you can do to speed up your website without spending any money and that is technically easy, even for a novice, is to optimise the images.

The performance of a website can easily be improved by reducing the size of images and and compressing them. It can make a huge difference, especially when viewed on mobile devices.

Optimising a website for phones and tablets is essential these days because it is becoming one of the most common ways to access online content.

Being mobile friendly will also boost your Google ranking in search results.

A slow site because of large images can lower your ranking in search results. Improve your SEO by optimising images.

Let’s work through an example.

Don’t use original photos

Here is a high resolution photo that is 2,720 k in its original file transferred from a phone. Never use original photos on your website because they are far too large.

Grasmere in the Lake District

It is surprising how many people don’t realise this and they post photos taken with digital cameras and phones without even looking at the size. Maybe they see the size, but don’t realise what a big problem it is.

I have seen web pages with three or four images this size!

  • They have a negative effect on SEO
  • They lower your Google search ranking
  • They use a lot of mobile data.
  • They are slow to load on mobile.

Scale images and reduce the size

Web pages cannot show original sized photos and there are simply too many pixels. It depends on the WordPress, Blogger or whatever CMS theme being used, but often there is a limit to the width of images.

This web page has a column for the text and images that is about 600 pixels wide. If a larger image is used, it is automatically shrunk to fit. However, the image file must be downloaded first, then it can be sized to fit.

This takes time and processing power. If the image is resized before being added to the page, it speeds it up, reduces downloads, uses less mobile data and so on. Always resize images.

Use Photoshop to resize images if you have it, but if you want a free photo editor for optimising images, get GIMP. It works on Windows, Apple Mac and Linux.

Load the image, go to the Image menu and select Scale Image.

Scale images in GIMP to make them smaller or larger

Set the width to the maximum size that will fit on the web page. This one uses 600 pixel wide images in the body of the article. There is no need to set the height because it is automatically set from the width.

Scale images in GIMP to make them smaller or larger

Save the image

The resized image must be saved before it can be uploaded to your site. Select Export As on the File menu.

Export images in GIMP and save them in any format

Enter the name, making it different to the original filename to avoid overwriting it. Make sure it is a .jpg file.

Export images in GIMP and saved as JPEG

Set the compression

When saving JPEG images, there is a quality slider. When the quality is set to 1 the file size is very small, 7.7 kB in this case, but the quality is awful. (Tick the box, Show preview in image window.)

Set the JPEG quality and compression in GIMP

As the quality is increased, the image looks better and better, but the file size gets bigger and bigger.

However, after a certain point you cannot see any improvement. This point is often around the 50, 60, or 70 setting.

This image looks OK with a quality setting of 50. Clicking Export saves it.

Set the JPEG quality in GIMP

The file size is 35.9 k.

Remember that the original image was 2,720 k, so the image is 2,660 k smaller! That is a huge saving. The web page with this on will be faster and is better for mobile, which in turn is better for SEO.

Optimise all your images this way.

Shrink images with PNG

JPEG images with compression provide good file size savings and are best for photographs. Line drawings like the banana below often, but not always, work best as PNG files.

PNG files use lossless compression. This means there is no loss in quality. We saw earlier that a low quality setting with JPEG photos looks awful. PNG files always look the same as the original though.

Save images as PNG files when there are large areas of single colours. Use it for drawings like the banana below.

If the image is simple and uses only a few colours, changing the mode to Indexed offers big file size savings.

Convert images to indexed using GIMP for file size savings

The image above is 57 k as a JPEG, but only 17 k when converted to Indexed and saved as PNG. It is not as large a size saving as before, but every little helps.

To save images as PNG files, just set the file extension to .png when saving from GIMP.

Pick the best format

It is sometimes helpful to save images in both .jpg and .png file formats so you can compare the sizes and check the quality. Then you can choose the best or the smallest as you prefer.

 

SEO - search engine optimisationGet more tips like this in The On Page SEO Guide

How to get more visitors from Google: Have you created a website, but are struggling to get visitors? Would you like Google, Bing and Yahoo! to send you lots of visitors? Here’s how!
 SHOW ME MORE 


notepad Save 50% on RAWinfopages online courses! Get 50 Shares A Day - PDF with 50 places to promote your blog/website daily!
Join our FREE newsletter!

 


 

1 Comment on How to speed up your website by optimising the images

  1. thanks for the great tips this was very useful

Comments are closed.