How to optimise your blog images for site speed and SEO

How to optimise your blog images for site speed and SEO

Share with friends

When it comes to optimising your blog or website for speed and search engine ranking one of the most often overlooked aspects is site imagery.

According to GTMetrix optimising your sites images can reduce page loading size by up to a whopping 80%. Just think about how much loading time you could save if you carried out a couple of basic resizing and compression methodologies to these. 

In this article I’ll show you a handful of super easy ways to optimise your images to speed up your site and improve SEO. 

Disclaimer: This post contains affiliate links for which I may make a small commission at no extra cost to you, if you make a purchase. I only recommend products I love.

Benefits of optimising images on your blog

  • Site speed improvement
  • SEO advantages
  • Less storage space on your server 
  • Enhanced user experience
  • Easier backups
  • Reduced bounce rate 
pin image

1. Upload the correct dimensions for your site

One of the first things I look at is what dimensions the image should be for the particular use. When a site doesn’t have to resize your images on loading, this speeds up the process. So make sure you’re aware of what the optimal dimensions for your particular theme are. I use the Kale theme and my optimal dimensions for header images is 800×1200 pixels. 

To find your image sizes in WordPress . org go to your admin dashboard > settings > media.

So, when I create a post I make sure I’m uploading images that fit these dimensions.

I use Canva’s magic resize function to create my images in the correct dimensions.

It’s super easy to use and you can switch up your images to exact the measurements required. This makes it super fast for your blog to load images on your pages. 

2. Use the correct file type 

PNG’s are super high quality and are fabulous for when you need a super large file – like for print. Or, you need your image to be crystal clear. However, they are notoriously large in file size. For that reason I usually use JPEGs on my blog for all my imagery. 

Blog featured images, graphics and pins are all jpegs on my site. 

JPEGs are a lossy image format. Which basically means that some of the data is lost in the image when compressing. Your image won’t be as sharp as if you download it as say a PNG file but it will be much much smaller in file size. 

3. Save files as smaller file size

WordPress automatically compresses your JPEGs for you, but not nearly enough to make a big difference in site speed optimisation.

As a rule I try to keep my main images under 100kb for my blog site. If they are super large files then I might go to 150 max.

Adjust the file quality level so you are achieving the benefits of optimisation without compromising your image quality. I tend to go for around 70-80% depending on file size. You need to be super careful to not lose too much data here or your images will look grainy and pixelated. ie: they have lost too much data. 

4. Run your images through TinyJPG

TinyJPG is an online tool you can use to run your JPEGs through to optimise. TinyJPG uses lossy compression and takes out unnecessary data from your images. 

I tend to run my images through TinyJPG after I’ve downloaded them from Canva

You can also run your PNGs through TinyPNG for the same effect. TinyPNG will remove a LOT of data from a PNG file. 

image of Smush site

5. Add a plugin like Smush

I use the Smush plugin on my site to do a final pass at lossless compression of my images. Lossless compression does not comprise the image quality but takes aways any unnecessary metadata from the image. The Smush free version carries out lossless compression, while the paid version allows you to also do lossy compression. 

6. Name your images correctly

This one’s a no brainer. Sometimes we get busy and just upload an image to our site that might have a dubious file name. For instance, we might forget to add a title at all and the image file name might be something like:

Untitledesign.jpg

Or it might be a random file with number or letters like IMG_558987

Take the image below for instance. Perhaps we design or sell jewelry. We can leave the image title as something random but that doesn’t serve us very well. Instead, labelling it something logical that search engines can find and add to an image search result means we will get found more easily for our products.

This particular image haas the file path below – no date = timeless and evergreen and a basic description means it’s searchable in search engines.

https://onlinebusinessgrowthhacks.com/wp-content/uploads/mens-silver-chain-necklace.jpg

mens silver chain necklaces on a male model in a black tee shirt

This will improve your on page SEO and your ability to rank in search results. 

7. Use Alt attributes wisely

The alt attribute will be displayed when the image is unable to be displayed. It is also viewable on hover and most importantly is used if someone is using a screen reader for accessibility purposes. It is the alternative text for an image.  

8. Add subfolders to your media library for image SEO 

Google uses your images url path and file name to help rank images in search. It’s that simple. Image paths are a ranking factor!

Because of this it’s a great idea to organize your images into subfolders in your media library. There are a number of plugins to do this on WordPress.

One I’m trying right now is FileBird – WordPress Media Library Folders & File Manager. Super simple to set up. You can drag and drop images into new folders that make sense. This is particularly important if you have a shop or sell multiple products. Creating sensible folders for differing categories will help up your image SEO game. 

For instance using the jewelry example above. You might create sub folders for necklaces, rings, bracelets and so forth … or perhaps gold, silver, rose gold etc. 

The image above might be filed in necklaces .. or in silver… and the file URl might look something like this:

https://yourjewelrybiz.com/wpcontent/uploads/necklaces/mens-silver.jpg

Descriptive subfolders are a much better indication of image content and intent than dates in my opinion. 

9. Make your image URL sensible 

Your image URl should be super easy for Google to make sense of. Check this! You can see your image URL by going to your media library and checking the data on the right hand sidebar per image. 

woman at a white desk working

Or you can check an image’s URL in  the front end by right clicking on an image on your site and clicking open image in new tab or copy image address

woman at a desk

Your URL will contain the title of the image you created earlier for your image prior to uploading. So, make sure it makes sense! 

If you have dates in your current image URLs you can remove these from uploads going forward in your admin dash. Head to settings >media and uncheck the box below. This makes your URLS short (which is better for SEO and more evergreen… ie: won’t age)

Make sure that this will not affect your current imagery first! by contacting your theme provider. Mine doesn’t change old file paths.

removing date from url screenshot

Optimising your images for the web is a massively high value, low nuisance activity for all bloggers to add to their blog post workflow. It’s super easy to get into the rhythm of using a few simple tricks to get your image site ready and well worth the payoff! 

You might also like:

What are the best WordPress Plugins for bloggers

How to update old blog posts for SEO

SEO for bloggers – A beginners guide



23 thoughts on “How to optimise your blog images for site speed and SEO”

Leave a Reply

Your email address will not be published. Required fields are marked *