Web Speed - How do I compress images to speed up my website?

How do I compress images to speed up my website?

Author
Published
TechWeb Development
Web Speed: Overlay Graphic

The speed of your website is paramount. In fact, web speed is now a ranking factor in SEO (Search Engine Optimisation). Web speed will also affect the likelihood that someone will not only stay on your website but also buy 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 most of you decided to leave and try another site almost immediately.

Another question for you… Have you tried to buy something online when all of a sudden the website becomes unresponsive and seems to be taking ages to load? I bet once again you left and found somewhere else to purchase from. As a consumer we don’t even realise how much web speed affects our browsing behaviour.

If you’re managing a WordPress site and are non-technical or a non-coder, then this guide will help you get the best quality, yet fasting loading files onto your website.

Here is a list of three areas you can look at to improve your web speed and our recommended tools to help you along the way:

1. Web speed can be improved by optimising Imagery

This 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 an great bit of kit, which gives you guys twenty images for free!. It uses smart lossless compression techniques to reduce the file size of your PNG files. The plus is the images look exactly the same and they’re 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 softwares are monitored. Being very advanced, there is a cost is 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 in a similar way:

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

2. Caching, speed 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 quite complex. For now, I’d recommend using WP Super Cache as it’s simple to add and will do the job perfectly.

3. 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 load times and bandwidth usage on websites. Instead of readable code, it looks more like something you would see on the Matrix but it’s a great way again to reduce file size which in turn speeds up your website.

WP Super Minify 
Again, there are lots of tools on the market to do this and we’d recommend using WP Super Minify. A great plugin for minifying your code!

 

How we are improving web speed 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 and high quality images. Not all browsers support these file types, so our technology will use 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.

We'd love to hear about your project!

Get in touch with us and see how we can help you.

Please select applicable project types:
Web ProjectUX / UI DesignBrandingPrint Project