How to Optimize Images in WordPress the Quick and Easy Way

This is part 3 of our 3-part series on speeding up your WordPress site trough the means of Content Delivery Networks (CDN) and image optimization. Just as previously, this is all about the quick wins for your WordPress blog … no coding involved, no hassle.

1. Introduction to CDN and Image Optimization + Why You Should Care
2. Top 3 CDN Services for Your WordPress Blog + How to Set One Up
3. How to Optimize Images in WordPress the Quick and Easy Way

---

The guide you’re reading right now is all about image optimization in WordPress – aka. the easiest way of saving even up to 50% of your site’s whole bandwidth consumption.

In other words, optimizing your images is THE no.1 way of reducing your site’s loading times, and thus making the experience smoother for your visitors, as well as Google (it’s always good to stay on Google’s good side).

What’s up with image optimization in WordPress

Okay, so images, as you know, have certain disk size – the amount of kilo bytes that they occupy on the disk.

The trick with image optimization is that you can reduce that disk size of an image without impacting the visual quality of the image itself.

Let me emphasize on this again because it’s key here; with image optimization, you can keep your images looking just as great, but reduce the amount of space they take on your server’s disk.

The equation from there is pretty simple:

More optimized images = less disk space consumed = less bandwidth consumed = better loading times for your WordPress site = better experience for your visitors.

The background on image optimization

I don’t usually like to get into the technical details of all those optimization-related things, but I just want to show you what’s possible, so you can better understand the whole concept.

Here’s an example image, one of my own:

In its current state, it’s exactly 503 kB.

Now here’s the image again, the same image, it’s only been optimized:

It looks (basically) the same, but now it takes up only 76 kB. Yep, that’s ~85% savings with just one image. Now imagine what would happen if you could have similar savings on not just one, but all of the images that you use on your WordPress blog…

To say the least, those results are really cool, and not that difficult to achieve.

Here’s how:

Start with the right dimensions

The standard code of conduct when uploading an image to a WordPress blog is to simply take the image from somewhere (or use one of your own pictures), and just drag and drop it directly to the Media Library, without doing anything to the image itself.

This is how you lose bandwidth.

A better starting point is to open your image in a basic image editing tool, and adjust the dimensions of that image (the first step to optimize images in WordPress).

All WordPress blogs have a certain width associated with the main content block (it’s where your posts are displayed). So basically, no matter what the dimensions of your image are, they will be scaled down to fit that main content block.

For instance, the blog you’re reading right now limits the content width to 680 pixels. What this effectively means is that any image that’s bigger than that will be scaled down to fit. Taking this conclusion even further, attempting to upload any image that’s bigger is just a waste of bandwidth.

So we need to make it smaller. Here’s how:

On Mac, you just need to double-click on an image to open it in the default Preview app, and from there you can enable the toolset > “Adjust Size” > and then input the new width and height. Like so:

On Win, get a tool called Paint.NET. It’s a free thing and does the job really well. Just open your image, press “Ctrl + R” and input your desired width and height:

Save images optimally

So now that we have the right image dimensions, it’s time to save your image using the optimal format and the optimal compression.

Starting with the format; there are two main formats for graphics used on the web: PNG and JPG.

PNG works great for images with very few colors or large blocks of solid color. Example from our previous post in the series:

JPG works for everything else – pictures, images using multiple colors, color gradients, complicated graphics, etc.

Let’s use Paint.NET again to illustrate the process.

When you try to save your image, you first need to choose between PNG and JPG.

If you go with JPG, you also get to choose the level of compression of the image. This is done through that small bar labeled “Quality”:

My advice is to go anywhere between 75-90. You’ll see the live preview on the right, along with the file size.

At this stage, try keeping your images below 150 kB.

Put the image through an optimizer

The last step is putting your image through an image optimization tool.

The thing here is that even though you’ve saved your image at a specific level of compression, there’s still some further optimization that can be done to it.

I like to use two tools for that:

The first tool is an online tool called TinyPNG. It’s very easy to use – just grab an image file from your desktop (works with PNG and JPG) and drag-and-drop it next to the panda:

After what seems like a couple of seconds, you will be able to download an optimized version of the image:

From there, just take it and upload that optimized image to your WordPress blog like you normally would.

Next, there’s the second tool. It’s actually a WordPress plugin called WP Smush.

It’s a free plugin with a pro version available if you ever need more features (not required; 99% of the time, the free version is more than enough).

So the way this plugin works is very straightforward. You basically only need to install it (standard procedure, like with any WordPress plugin), then set it up by going to Media / WP Smush in your wp-admin. Once there, make sure that this option is checked:

And you’re done! From now on, WP Smush takes every image you upload and optimizes it automatically. Additionally, you can go to your WordPress Media Library and optimize each of your images by hand (should you ever need this):

Conclusion

At this point, you should be familiar with the ideas of content delivery networks and image optimization in WordPress. Put together, those two “things” can improve the performance of your WordPress site quite exceptionally.

This has its impact on both the cost of running the site – you don’t get billed as much for bandwidth – and on the user experience you’re providing. In other words, everyone wins.

Feel free to submit any questions in the comments section below. We’re happy to help you through the setup process with CDNs and image optimization in WordPress.