WordPress: How to compress images to improve website speed

Should you compress images to improve website speed?

Absolutely! Page elements like images can create bulky files that a browser has to deal with when it renders site pages. If you compress your images before you upload them to your server, your website will run much more quickly.

Why your website speed matters

So you’ve been looking at your website sales and user retention stats and realised your website isn’t doing what you need it to do. Your immediate thoughts turn to how to drive more sales, but have you considered your website images might be affecting your conversions?

The speed of your website is paramount. In fact, web speed is now a ranking factor in Search Engine Optimisation (SEO). Web speed will also affect the likelihood of someone staying on your website and buying from you.

Let’s keep this simple. Have you ever landed on a website which has taken more than a few seconds to load? I bet you decided to leave and try another site almost immediately.

Another question for you… Have you tried to buy something online when the website suddenly becomes unresponsive and seems to be taking ages to load? 

I bet, once again, you left and found somewhere else to purchase from. As consumers, we don’t even realise how much web speed affects our browsing behaviour.

So where do you find out how long your website takes to render for users?

Where to find your page speed insights

Several online tools will give you your page speed insights. Here are a few for you to try:

• GTmetrix – This tool provides a detailed analysis of your website’s load time and makes suggestions for improvement
• Pingdom –  This tool allows you to test the speed of your website from different locations around the world and provides a detailed report of the performance
• Google PageSpeed Insights –  This tool, developed by Google, analyses a website’s performance and provides recommendations for optimisation based around their SEO guidelines
• WebPageTest –  This open-source tool allows you to test the loading speed of your website from multiple locations and provides detailed performance results
• YSlow –  This tool, developed by Yahoo, analyses web pages and suggests ways to improve their performance based on best practices for high-performance websites under Yahoo SEO guidelines.

Anyone of these tools will tell you where your website speed issues are. There’s a very good chance that website images are a safe place to start when it comes to improvements in speed.

What is a good website page speed?

Fully optimised pages should load in as little as 2-3 seconds, which is what you should aim for.

Remember that while users take around 15 seconds to view a page on average, most will click away in just a few seconds if they aren’t satisfied that the page is downloading quickly enough.

Here are some hard facts about your users, according to Kissmetrics

• 47% of consumers expect pages to load in 2 seconds or less
• 40% will abandon a website that takes longer than 3 seconds to load
• 79% of shoppers who experienced poor websites will not buy from the same website again
• 44% of shoppers who were dissatisfied with a website shopping experience will tell their friends and family

What that means for you is that a slow web page could damage direct conversions and future conversion opportunities.

How to compress images to improve website speed

Before we give you our steps for compressing images, we need to remind you that it’s important to find the right balance between image quality and file size, as compressing images too much can result in lower-quality images that look pixelated or blurry. WP-Optimize* offers lots of different features that can help you optimise your website however below we’ve broken down a few different options and helpful tools for each. 

Step 1. Create your web image files no bigger than 100KB

It may seem really simple, basic information, but this is super important. I see it all too often that images on sites are just too large. You should aim to have images on your website lower than 100KB.

To give you an idea of that size, there are 1000KB in 1 MB. We regularly have clients saying that their website is running slowly, and it turns out they’ve uploaded four or five images of 1.5MB to a single page. So, we’d highly recommend that you reduce and compress your images before putting them online. You can do this with

Tiny PNG

TinyPNG is a great bit of kit that gives you twenty free images. It uses smart lossless compression techniques to reduce the file size of your PNG files. The plus is that the images look exactly the same and are much smaller in size. The benefit of this being smaller files are much quicker to load – winner!

Adobe Photoshop

Adobe Photoshop is the benchmark by which all other photo-altering software is compared. Being very advanced, there is a cost applied to this. However, they do offer a free version.

To optimise your images, all you need to do is:

• Open the software:
• Go to File> Export> Save for web (Legacy)
• Reduce the percentage number down so the image still looks good, but the file size is reduced.
• Job done

PhotoPea

A free alternative to Photoshop, Photopea offers very similar functionality, and images can be exported similarly:

• Go to File > Export as
• Select the file type and then the quality percentage
• Then save – simple!

Step 2. Consider how many images you need on a single page

Images are great for story-telling, but too many can slow down your website speed considerably. Relook at each page and ask yourself, “how can I provide clarity for this page/product/service with as few images as possible?”

Step 3. Caching speeds up your site by saving the important bits

So first, let’s explain what caching is. Caching is the storing of data on your local computer. It can “cache” or save common elements such as logos and imagery that are used on all pages so the site doesn’t have to keep loading those parts each time, which in turn can quickly speed up the experience whilst on the site.

WP Super Cache 

There are many different plugins which can be used to add caching to your website, but some are pretty complex. For now, I’d recommend using WP Super Cache, as it’s simple to add and will do the job perfectly.

Step 4. Minifying – the overlooked technique that enhances your web speed

Minification is the process of minimising code by removing gaps and spaces within the code on web pages and script files. It’s one of the main methods used to reduce website load times and bandwidth usage. Instead of readable code, it looks more like something you would see on the Matrix, but it’s a great way to reduce file size again, speeding up your website.

While this doesn’t affect images as such, it will help give your web page an extra boost – and it is something you can do at the same time as addressing your image sizes.

WP Super Minify 

Again, there are many tools on the market to do this, and we recommend using WP Super Minify. An excellent plugin for minifying your code!

How Strafe Creative is improving web speeds for our clients 

At Strafe Creative, we’ve made this process simple for our clients. Our custom-built image compression programme sits within all the sites we build and automatically does the following: 

• Offers dynamic resizing depending on the device and screen size, thus loading the correct file size, format and quality.
• Removes noise from the images, helping to load a quality image, even from a small file type. 
• Uses WebP image files or other ‘next-gen’ image formats – these are rapid, tiny, high-quality images. Not all browsers support these file types, so our technology uses an alternative where required. 

We’re always looking for ways to enhance the customer experience and improve our own processes. Check out this blog about our innovative Welcome Dashboard, which offers clients a unique, transparent and valuable experience every time they log into the back end of their WordPress website.

You can learn more about WordPress CMS in some of our other content: 

• Why we designed a user-friendly WordPress welcome dashboard for our clients
• WordPress vs Craft CMS  – which should you choose? 
• What are the disadvantages of using WordPress?
• Which intranet shall I choose? Sharepoint or WordPress?

Need a team on hand to handle all of this for you? Contact us today using our Project Planner form!

*We have affiliate links for products and services we love. By clicking on any of our affiliate links and purchasing, we receive a small commission at no extra cost to you.