Guide to WordPress image optimization

Are you still not sold on all the image optimization thing? Let’s look at all the benefits that you will get, if you only fix that small and trivial problem:

• Your site will be faster
• Your Google PageSpeed score will be better
• Google will like you more and your search engine rankings will improve
• Your bounce rate will be smaller and more visitors will see your page
• You will need less storage on your servers and you will spend fewer resources on servers, which will save you money
• You will save mobile data plan money for yourself and your visitors

I’ve got your attention now, right? Now we can start with the real work.

Image Formats

Image optimization starts with some basic knowledge about image formats. The two most common formats on the internet are PNG with extension .png and JPEG with extension .jpg. I will use JPEG in most cases, since it is the best format for photos, images with gradients and images with millions of colors. On the other hand, PNG is better with limited color images, such as logos, and with the images with transparency.

The next example will show you, just how important it is to choose the right image format for the best image optimization.

Resize Images Before Uploading

We saved some space with choosing the correct image format in our previous example, but we can save even more space, if we resize the image before uploading it. But how much should we resize it? It really depends on the width and the container of your website.

On our ProteusThemes site, the maximum width for the image is 1110 px, so I will resize the current image child.jpg, which is 1800 px wide, to 1110 px in width. In that case we just went from 3.1 MB to 1.1 MB in size, which is another 65% of saved and reduced space.

Hint: You can resize images directly in your WordPress Media Library. Click on the Media -

> Select your image -> Edit Image and pick new dimensions for your image:

Imsanity WordPress Plugin for Automatically Resizing Images

If you don’t want to think about image resizing or if many different users upload images to your website, then Imsanity plugin should work perfectly for you. In the plugin settings, you can choose the maximum width or height the images should have and the plugin will resize all the bigger images to that size. You can also select bulk-resize feature to resize all the existing images. I definitely recommend this plugin to anyone, who has problems with resizing each image separately before uploading it. You can download Imsanity plugin for free.

Compressing Images

Now that we’ve learned the basics of image optimization, let’s see how we can we raise our game. We can find numerous image compression online tools on the internet and even WordPress plugins, which will reduce the size of your image. But we have to be careful here, some of the tools will make almost no difference and some of the settings will destroy our image and make it useless. So, how to find the perfect balance? Don’t worry, at the time of writing (June 2017, updated 2018), we tested all the most popular online tools/services and WordPress plugins for image optimization and we’ve made a selection of the best ones.

Use the following six-step sequence – adjusting according to the needs of your own particular site as you go – and you’ll be in good shape:

1. Make sure you’re selecting the right image format for the job to be done. Always select the right image format for the job.
2. Crop and resize images for maximum visual impact and minimum file size.
3. Future-proof your articles by producing image variants for both standard and retina display.
4. Take advantage of image compression and visually proof the results. Our WP Smush tool should be your first port of call here.
5. Take the extra time to optimize all images for SEO to pick up some low-hanging fruit in terms of traffic.
6. Consider leveraging the power of a CDN for image delivery for further gains.