Google hates a slow website, and it loves fast ones.

This is going to continue because more and more people now browse their content on mobile devices, where you typically have slower connection speeds.

Are you monitoring the performance of your web pages?  Do you do anything to optimize your images?  Because this is going to make up a significant portion of the download time for your website.

On our blog, we typically include a lot of images and this can increase the page download time.  This means image optimization is important for us, and it is for you, too!

Identify Your Slowest Pages

In Google Analytics, under the section Behavior -> Site Speed -> Page Timings, you can see the average page download speed for all  the pages on your website, and the variation for each page.

So, for example, in the example below the first page (the home page) is 53.30% less than the average, which is good.  But look at the page for the ‘Facebook Organic Reach’ post: this is 68.93% above the average.  This may be one worth investigating.

What’s also really important about this report is that it automatically displays the results according to the pages with the most views first.  This is great, because the ones with the most page views are ones that you should work on first.

Navigate through the first few pages of your results and start with the first five worst-performing pages. If you have images on these pages, try to reduce the image size to reduce the download time.

How to Optimize Website Images

Now that you’ve started to identify some issues with poor performing pages, you will want to work on solving the issue.  No matter what size your home page is there’s always room for optimization, as it is likely to be the most visited page on your website.

When you have chosen the page you want to work on, you’ll want to do further analysis to find out which images are slow to download.  This could be images that are specific to the post but it could also be the images that are loaded with every single page, such as images in the sidebar, banner etc.

One of the first pages I picked out was our post on SEO competitor analysis, which had a load time 86% above the average.  So, we entered this page name into the Webpage Speed Testing Tool and started to analyze which images were taking the most time to download.

If you see there’s any specific image that is causing the problem you may need to compress the image, upload a smaller image etc.

Once you have identified the slowest pages and have started to figure out the images that are causing problems, it’s time to resolve the issue.  Here are some ways of improving performance:

1.  Implement a CDN

If you have an online business that is available globally, you really have to subscribe to a content distribution network (CDN).  If I’m in Ireland and my site is hosted in Ireland, then the speed will be fine. But if someone is accessing this content in the US, the speed will be slower for them.

If you have a CDN, however, the content will be made available through many hosting centers around the world.  If a request comes from the US, it won’t travel all the way to Ireland because that doesn’t make any sense!  It will go to the nearest hosting center, which will probably be the US.

This will make your site faster overall.  We use MaxCDN for our CDN on our site.

2.  Make Your Images Smaller

This seems an obvious one but it’s often overlooked.  When you take a screenshot, you may be able to reduce the image size by 10 – 20% or more, and it still could be very visible.

I created an image in Canva.  The dimensions of the image were 800×800 and the size of the file was 1.7 MB.  If I insert this into WordPress, my options are:

• Full size – 800×800 and the size is 1.7 MB
• Medium – 300 x 125 and the size is 1.7 MB
• Full – 560 x 235 and the size is 1.7 MB
• Thumbnail – 150 x 150 and the size is 1.7 MB
• Widget banner  – 135 x 135 and the size is 1.7 MB.

As you can see, no matter what size I display it within WordPress, the image size stays the same.  If I decide to use a smaller size and still upload the bigger file, the advantage is that users can click on it to view the larger image.  But if that’s not what you want to do, then reduce the image size before uploading!

You need to use a photo editor and reduce the size to the dimensions you want to display it within your content management system.

3.  Take out some images

After investigation you may realize that you have too many images and could remove images that are not relevant.  Add images that will add value to your content but don’t over do it.

4.  Crop Images

Cropping images means cutting out what is not relevant from the edges. You might have taken a full screenshot where only a section of the screen is really required.  You can go back and cut out the bits that are not needed.

We generally use Snagit for cropping our images but there are many tools available.

5.  Implement Caching

A cache stores information that doesn’t change that often in memory.  If you create a blog post, it doesn’t make sense to always retrieve the post from disk if there have been no changes since the last time it was accessed.

A lot of caching programs also support progressive rendering.  So when an image is displayed on your screen it’s initially a bit blurry but then it appears better a second or so later.  For a website visitor, this is good because the image is displayed quicker than without the rendering.

6. Save With the Right Image Format

If you use the wrong image format then the image file could end up much larger than you need it to be.  For example, I never use the format .bmp because the file sizes are usually far too big.  The safest bet is to stick to .JPG or .PNG formats.

7. Compress Images

There are various tools available that will help you compress the size of your images.  For example, TinyPNG will reduce the size of your png files without sacrificing quality, and JPEGmini can be used for reducing the size of a Jpeg file.  I tried shrinking a 146kb jpeg image with Jpegmini: it was reduced to 110k and the quality was still perfect.

Summary

The speed of your website is extremely important and images are one of the things that can cause delays.  Why add this extra delay to your website when you don’t need it?

Which tools do you use for image optimization?  Would you use any of the above?  I’d love to hear from you.

Computer image by Shutterstock