WordPress image optimization: free and premium methods to make your website faster

WordPress image optimization techniques can significantly reduce the weight of the pages on your website, and eventually reduce bounce rate, and increase retention of your site visitors.

In this post I’m going the share with you my workflow and the tools I use to considerably reduce the file size of the images I use and make websites much faster! I will share free and premium methods, and they can also be used outside of WordPress if you happen to build your website on another platform.

There are many tools out there but as often, I like to keep things simple and share with you what has helped me along my digital journey.

WordPress image optimization like a boss for free

Is it possible to optimize your images like a boss of 0$? Yes sir! Or madam. You get the point!

Now it’s hard to know you’ve arrived if you don’t know the destination. And what I mean by that is, which file size should you aime for? I advise to aim for max 250KB per image when they must be used full screen and even less then that when they are not going to get used fullscreen. The idea here is to find a compromise between good visual quality and a maximum file size of 250KB.

Find images

Before wordpress image optimization can take place, we first needs images.

Although I will write a dedicated blog post about it, you need to find good images, and one resource of choice of stunning AND free images is Pixabay.

Pixabay is free and features pictures, vector graphics, illustrations and videos.

You can download without creating an account, although if you want to download higher resolutions you do need an account. It only takes one minute, so get your account, you will enjoy it for sure.

The search engine works well, and but you can also filter by portrait or landscape orientation, category, size or even color and contrary to some free stock photos websites, there is a lot of quality here. The only downside in my opinion is that because it’s free, many people will use the same pictures, so you need to be aware of that.

Get the right dimensions

So you’ve downloaded the right picture for the job? The next step for wordpress image optimization is to crop your image to the required dimensions.

Now, those dimensions differ, depending on the project, but typically let’s say that you need a picture for the hero section of your website, which in case you are not familiar with it, is a large web banner image prominently placed on a web page, generally as the first section of the page.

So in this case I will create a picure with a 16 by 9 ratio, and one popular format you can use is 1920px by 1080px.

So first of all you will need to use an application like Photoshop (or Affinity Photo) but since I promised to show you how to do it for free, you could either install The Gimp for free, or even faster, go to Photopea.com and enjoy a in-the-browser Photoshop-like free tool.

1. create a 1920 px by 1080 pixels document
2. open your image
3. place your image in the prepared document
4. crop the desired framing and dimensions

First optimization

Once you’ve done that, go to File > Export As > JPG – and here we’re going to aim at a file size under 400KB, less if we can while still maintaining a good quality.

For organisation purpose, I have an Assets folder, and in this folder, I have a subfolder called “_pre-optimized” and that’s where I will save this file, ready to take to the next step on the path of wordpress image optimization.

Second optimization

Once you’ve got that pre-optimized file, you’re going to open a website called tinypng.com, and you’re just going to drag and drop your image, and TinyPNG’s going to work it’s magic, and once done, you can just download the file and compare the file size and the quality. And if good for you, then you can upload the image to your website.

As I mentioned in the beginning of this post, this technique isn’t strictly for wordpress image optimization since you can do exactly the same for non-wordpress websites.

WordPress image optimization like a boss on steroids

Now, if you want to use premium tools for wordpress image optimization, I got some cool resources for you.

Find images

One platform I love using these days is Envato Elements. Sure the image stock is not as large as ShutterStock and other similar stock marketplaces, but it’s way more affordable, more than enough if you’re doing web design, and it gives you more choice, and less chances of seeing the exact same image being used everywhere than if you were using a free stock photo marketplace.

The advantage is also that on top of photos, you get stock videos, video templates, graphic, graphics templates, presentation templates, photos, fonts, Photoshop and Lightroom addons, web templates, cms templates, wordpress themes and plugins and 3D files.

And you can get that for a very tiny amount per month or even cheaper if you pay per year. And I say very tiny amount compared to the value that is being offered.

So, download the picture of your choice and let’s get going on our way to wordpress image optimization.

Visit Envato Elements

Get the right dimensions

The process will be seemingly the same than explained previously, except that you may do this in Photoshop, or in my case in Affinity Photo.

Not that I don’t like Photoshop, I love Photoshop, but I find Affinity Photo to be much faster and snappier, and it’s just like always open on my workstation and I totally recommend it, especially if you don’t need all the functionalities of Photoshop and you’re trying to cut down on monthly recurring expenses, since Affinity Photo is a one shot payment.

First optimization

Same story for the first level optimization, the naming of the export functionality may differ depending on the software you are using, but it would be something such as save as, export, or something along those lines.

For the rest, aim for the same target, which is 400KB max or even less while maintaining quality if possible.

Second optimization

Now what if instead of manually optimizing your images, you could do that automatically? That’s where wordpress image optimization shines.

Well, if you have a WordPress website, TinyPNG offers a premium plan and a dedicated plugin that can help you achieve that, but personally I use ShortPixel which also has a wordpress plugin, and what I like with ShortPixel is that it gives me a few options:

– I can always batch optimize on their website if I want to, but this time I can choose between 3 options : lossy, glossy or lossless compression. Why is that interesting? Just because not all images are created equal and sometimes, you will get better results with a different compression method, for example when you have images with a very detailed background.

– similarly I can achieved that but straight into WordPress, I can choose the compression technique and can always revert back to the original uploaded version.

Visit ShortPixel

Does it really help?

The short answer is YES, tremendously.

Think about it: images are usually what accounts for the most weight of a website, and if you can divide that weight be 5, 10, 15 or even 20 times, your website will be significantly faster.

Many people don’t see the interest of optimizing their website, because:

– they are very patient themselves (but let me tell you that people ain’t)
– or they have a very fast internet connection, but they forget that this is not necessarily the case for everyone in their target audience
– they always consult their own website from the same machine, which eventually has all the images in their local cache ( = memory) so it doesn’t seem like such a big deal

But the truth is that people lack patience, and this is even more true when it comes to the internet.

Usually, when people are visiting your websites, they probably have a dozen of other tabs open in the browser, or they are on the run on a mobile connection, and are constantly solicited by apps begging for their attention like Facebook, Twitter, Instagram and so on.

So you have a double problem here: you are competing for speed and attention.
Now let me tell you this: if speed is an issue, you won’t even make to the attention fight.

People will just leave your website and of your competitor’s website load faster, unless you are dominating your industry, you will lose a potential client.

Now to make this clear, optimizing your images is just one part of the optimization techniques available to us. Other techniques include minifying css stylesheets and scripts that are loaded on your website, using CDN which stands for Content Delivery Network which in case you are not familiar with it, make your website faster by serving its assets (like pictures, stylesheets and scripts) to your website visitors from various servers around the globe, using cache plugins, which I will develop in a dedicated post but which reduces calls to the database and stores a static version of your website, and there are other techniques but the first technique in my opinion is to reduce the file size of your images because they have so much impact on the rest.

I remember one day, a potential client asked me if I could re-design their website because it was so slow and the person who made the website has closed shop.
I had a look a the website, which wasn’t bad at all, but immediately noticed that something was wrong with the images. So I checked and the first image was 25MB. So approximately 100 times the file size I recommend!

After optimizing the images, the experience was completely different, and the result is that in the following weeks and months, the traffic significantly increased, the bounce rate dropped to normal levels and the client was happy he had a faster website.

So if your website is slow, make sure you apply what I just shared in this video and you should see significantly different results!

So, I hope that this post helped you understand how to optimize your images for the web and that you found some value in it.

Now question of the day: which tools are you using to optimize your images? Let me know in the comments !

If you liked the companion video, please give it a thumbs up, as it really helps growing this channel and if you know someone that could benefit from it please share it now, because let’s face it, there are so many things to do in a day that if you don’t do it now you’ll probably forget.

Now if you want to brand, market and grow your business it in the Digital Age make sure you subscribe and smash the notification bell, so that you never miss your share of digital alchemy, and if you are interested in tips, tools, services and case studies that can help you grow your business online, make sure you subscribe to my email newsletter. So I hope to see you in the next video, and in the meantime, do you know what time it is? I think you do, it’s time to invest in your success!