Image Optimization: How to Optimize Images for Your Blog

Image Optimization: How to Optimize Images for Your Blog

Image OptimizationGoogle 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.


google analytics page speed
View the average download speed of every page on your website


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.


If your site is hosted in New York and someone in the UK accesses it, it will be slow. But using MaxCDN it will be much quicker
If your site is hosted in New York and someone in the UK accesses it, it will be slow. But using MaxCDN it will be much quicker


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.


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

16 Responses to Image Optimization: How to Optimize Images for Your Blog

  1. Ian, thanks for the great suggestions. My website and the sites of most of my art business clients contain galleries of our artwork. Individual files can be very large so my first thought is to optimized for web using Photoshop and to limit the number of images to no more than ten per gallery page. Too often that doesn’t resolve the problem. What would you suggest?

    • Hi Janis, it’s not a simple answer and your performance improvements will generally from a collection of items that each will enhance performance by a small amount. For example, with progressive rendering of images the images are displayed and progressively get better so it appears that the image is drawn to the user. Caching will help significantly because the image doesn’t change. Figuring out the ideal size for your website visitor may mean you image is large or smaller! There are also many different lightboxes which allow for viewing the images and some are high performance ones and some are lower performance ones. Your idea of limiting to 10 per page is good but like I said, it’s a collection of things that help not just one (e.g. your hosting provider could be slow also!) Sorry I’ve no one single answer. There are developers that focus on performance improvements and they can do wonders!

  2. Some great tips here, Ian. Definitely bookmarking this for future reference.
    I would recommend a few plugins that can help. The first is the Imsanity plugin- this resizes the uploaded image. This is particularly useful when you (or your clients) upload very large resolution images which you won’t be using. Of course it’s much better to resize the image before you upload it, but this is helpful for when you forget.
    The other one is EWWW Optimizer which optimises images after you upload them. I know some people use and recommend WP Smushit, but I had issues with that from time to time.

      • No problem. Of course, you probably won’t need EWWW because you’re on WPEngine- they do all that fancy caching and optimising already! I love learning about tools and happy share the love!

          • Really? Didn’t realise that. I have heard good things about WPEngine, but if you can’t have 24×7 support it isn’t worth it. I’ll have to look at siteground. I’m really happy with my host, Clook- they provide 24×7 support and usually get back to me within 30 seconds!

          • The are suffering growing pains as they are growing very quickly but if you’re in Europe and your server goes down you need to wait for the team to get into work before you get any answer. I can’t understand how a hosting company can operate like that. 30 seconds is a lot better! p.s. I’m not familiar with hostgator.

  3. Ian, forgive me if I ask a question that is not quite related to this post. What social media plugin are you using on this site (the one on the side, to the left of of the content?

  4. Ian great post on optimizing your images, alot of newbie blogger do not realize this is and additional stream of traffic with images are optimized correctly on your blog post.

      • I want to show great work opportunity… three to five hours of work daily… Weekly paycheck… Bonus opportunities…Payscale of $6k to $9k /a month… Just few hours of your free time, any kind of computer, elementary understanding of web and stable connection is what is required…Get informed more about it )by visiting my profile>page

Leave a reply