How to Optimize Images in WordPress

Images make up a large part of any web page. When people ask me what they should do to improve page speed, I always reply to “optimize your images”.

In this tutorial, we are going to cover how you can optimize images in WordPress.

We will cover:

Let's get started.

Why should you optimize images?

Images on the internet are getting bigger year over year. Yet the technology to make images smaller has improved. HTTP Archive tracks the total size of images on the web and it is clear the size of images is increasing:

As you can see in the above graph there are many websites with images that are larger than 2mb. This will have a dramatic effect on your site's page speed. When a web page loads it will need to load all the images before the browser can display the web page.

On a good 3G connection a 2mb image will take 30 seconds to download and this is only the image. There are still other page files such as CSS and JavaScript to download.

You want to aim to have your pages load in under 3 seconds. 30 seconds is too slow.

If you compress a 2mb image it will go down to 100kb without losing quality.

What is an optimized image?

On the web there are three most common image formats:

• PNG
• JPG
• WEBP

They all have there uses depending on the type of image and the browser that is being used.

PNG is for transparent images, these are images with no background. This can be common for when you need to overlay one image on top of another. Yet, they have one downside as they have a larger file size than both JPG and WEBP.

JPG is much better at creating quality images while keeping the file size small. Yet, JPG cannot create images with a transparent background.

WEBP is an image standard created by Google that combines the strengths of both JPG and PNG. It is small in file size without losing quality. Yet it can support transparent backgrounds.

To get an idea of the file size difference between each image format, let's look at an example. Let's take the same image and then compress them in each format. We need a picture of a cute cat:

We can use a tool like Squoosh which can compress images in all these formats. When using the default settings each format produces these results:

• PNG - 320kb
• JPG - 22kb
• WEBP - 14.3kb

This is the same image and looks identical in each case. Yet, there is a huge difference between the PNG size of 320KB and the WEBP image at 14.3kb.

With WEBP being smaller and more flexible, we should use WEBP all the time, right?

The answer is that it is not supported by Safari or Internet Explorer. Internet Explorer is becoming less of an issue. This is because Microsoft has replaced it with the Edge browser. Yet, no support for WEBP in Safari means that iPhone/iPad users cannot see these images.

Safari users make up around 17% of those browsing the internet. We will have to support this browser for some time to come.

The best solution then is to provide both WEBP and JPG/PNG images based on the browser that is requesting them.

How to optimize images

Squoosh is a great tool to optimize an image once. What if you have a whole site of images.

Let's look at a plugin we can install in WordPress that will optimize all the images. This plugin is ReSmushIt.

First, open WordPress and then click on Plugins and “Add New”.

In the Plugins page search for “ReSmushIt”. Then click the Install Now button:

After the install is complete you can then click “Activate”:

This will give you a new menu option under “Media”. Click “Media” and then ReSmushIt:

ReSmushIt will then look at all the images in your WordPress media area and it will optimize them. If they are not then you will see a message like this:

Click the “Optimize all pictures” button and a timer will start. Depending on how many images you have this can take some time. Once the images are ready you will see this message:

We are not finished yet. You see ReSmushIt will not change the format of the image. As a test, I uploaded a PNG file that was 497kb. ReSmushIt detected the file needed optimizing and reduced the file size to 180kb.

This is good, except this image would be much smaller if it was a JPG. The same image uploaded as a JPG went from 314kb to 57kb.

The original PNG was 497kb and a compressed JPG version made the same image 57kb in size a massive 440kb saving.

As a rule and to keep it simple. If the image does not have any transparent background then use a JPG file and upload that to WordPress. ReSmushIt can take it from there.

To see the difference in Page Speed lets run some tests next.

Image Optimization and Page Speed

Let's test two versions of the same web page one will have 5 optimized JPGs and the other 5 unoptimized PNG files.

This will let us see how much faster the page speed will be on the optimized version. The two pages we will test are:

• Page 1 - Five unoptimized PNGs the file size is 497kb
• Page 2 - Five optimized JPG files with a file size of 57kb

We know that Page 2 is going to be faster but how much faster?

To run the test we will do 3 tests and take the average result. This will allow for any network changes and make the test fairer.

We will use a free tool from Google to run the test called Page Speed Insights. This allows you to run a test and get a score of how fast it is. This score will be from 0-100 with 100 being a fast page and 0 a very slow page. We will also focus on the mobile speed of the page.

Let's start the test.

PNG Test Page

• Run 1 - 63
• Run 2 - 64
• Run 3 - 68

Average of 65

Optimized JPG Test Page

• Run 1 - 75
• Run 2 - 76
• Run 3 - 77

Average of 76

As you can see the optimized page has an average of 11 points better than the unoptimized one. This means that the optimized JPG page loads 2.5 seconds quicker than the PNG original.

ReSmushIt Advanced Settings

There are a few advanced settings that you may want to enable on this plugin:

• Image quality - This is set to 92 by default the higher the number the better the quality
• Optimize on upload - ReSmushIt will optimize all images as soon as you add one to the library
• Enable statistics - Generates statistics about optimized pictures
• Enable logs - Used to find errors as they occur
• Process optimize on CRON - This will run a separate background task to optimize images
• Preserve EXIF - This is the information on the image such as when, where and what device took the image. You do not need this on any of your web images
• Do not preserve backups - By default ReSmushIt will keep a copy of the original image. You may want to turn this off as it will use up a lot of hard disk space

The one setting I would recommend is to enable “optimize on upload”. Once you turn this on all new images added to the media library will have compression applied.

Wrapping Up, How to Optimize Images in WordPress

In this post, we have covered the different image formats that are out there including:

• PNG
• JPG
• WEBP

We know that WEBP format is the best yet, it is not supported by Safari and iPhones. This means that you still need to use PNG/JPG.

We have looked at how you can install the ReSmushIt plugin. This plugin will compress all the images in the media area of your WordPress site.

Remember to upload the correct format of the image. If the image is not transparent then use a JPG. Setup ReSmushIt to automatically optimize images when you upload them to WordPress.