WordPress Image Optimization: The Ultimate Guide

WordPress image optimization involves reducing or compressing the file sizes of the images on your WordPress site without negatively impacting the way the images appear on screens. When you make the effort to optimize images in WordPress, you’ll speed up your website and page speeds, which ultimately helps to capture more new site visitors.

In this guide, we take a look at WordPress image optimization is, why you should optimize images and image optimization techniques. We also look at WordPress image optimization plugins, image resolution and image format. Finally, we’ll wrap up with how WordPress image optimization impacts SEO. Let’s go!

To understand the importance of image optimization, ask yourself one simple question: When you go to a new website and the page doesn’t load quickly, what do you do?

If you’re like a lot people, you probably close it and move on, right? At the very least, you’ll feel impatient and frustrated with how long the website is taking to load. Or if you do stay, it’s only because you’re really interested in that particular piece of content. You’ll probably never be back on that site after reading this one article. The site is simply too slow.

What does this experience have to do with why you need to optimize images in WordPress? Page load times are often greatly impacted by image sizes. So WordPress image optimization comes into play in a big way when it comes to improving user experience and even your SEO rankings.

What Is WordPress Image Optimization?

WordPress image optimization is a technique to reduce the file sizes of images without negatively impacting the way the images appear on a screen to the naked eye. The goal of WordPress image optimization is to shrink image file sizes without noticing any loss in image quality.

Images can be optimized in several ways for a WordPress website, using different tools and techniques. Utilizing smaller file sizes means that you can fill your site with even more images without weighing it down or making it run slower.

Optimizing all of your WordPress site images should be at the top of your priority list when it comes to optimizing your WordPress site in general. The process of image optimization will make your site weigh a lot less and load faster than it ever has, capturing more new users and making them come back for more content.

After all, no matter how great your content is, it won’t matter if users leave before they consume it.

Why Should I Optimize Images in WordPress?

There are four main reason you should optimize images in WordPress.

1. Speed up page load times
2. Improve SEO (search engine optimization)
3. Reduce server loads
4. Reduce overall website size so that it requires fewer resources
5. Stay on top of important WordPress maintenance tasks

Let’s take a look at some of the specifics of page load times when it comes to WordPress image optimization.

In 2020, a website that takes ten seconds or longer to load simply isn’t going to hold a user’s attention. And while there’s no exact definition of an optimal target page-load speed, recent expert studies show that:

1. The first ten seconds greatly impact how long users stay on web pages. Readers will bounce from your page or post if all content isn’t displayed within that short amount of time.
2. In 79% of cases, if a user isn’t satisfied with site speed, they’ll never return to that site because speed is a killer.
3. Even worse, a full 47% of dissatisfied users will not only reject your site personally, but will discourage other users by talking with their friends about their experience. They’re also more prone to leave negative reviews on social media and Google.

All of these stats mean that it’s absolutely critical to keep your website’s page load times well under ten seconds. In reality, your goal should be less than three seconds. And that’s where WordPress image optimization steps in.

Factors That Affect WordPress Page Load Speeds

You want your WordPress site to load faster but you’re not exactly sure where to start. The main focus today is on image optimization, which you’ll have a thorough understanding of by the end of this article.

But as part of a larger effort at WordPress optimization, it’s important to understand all of the factors that impact your site speed.

For a lightning-fast site, it’s important to:

1. Use Images That Are Lightweight

Using images that are “lightweight” is accomplished through image optimization. The goal is to compress images to their max without losing any of the quality. This process is referred to as lossless compression (we’ll touch more on that later) and requires the use of an image optimizer.

2. Optimize Your Website Caching

WordPress caching helps your website load more quickly by reducing the amount of data transfer between your site visitor’s browser, your site’s WordPress database, and your website’s web server. A WordPress caching plugin that will keep and clear your site cache when necessary, both manually and automatically.

3. Use a Quality WordPress Host

Serious WordPress site owners don’t run their websites on a $4/month hosting plan for a reason. While those may work fine for individuals running personal blogs that use very few resources (and don’t get a lot of traffic), they don’t cut it for site owners that have a higher load and demand faster site speeds.

Spend some time finding a quality managed hosting provider that has data centers spread across multiple regions. Also, compare server level response times when you’re shopping for a host. These factors will definitely impact how quickly your site loads for your users.

4. Optimize Code

The code that powers your website also needs to be optimized in order to speed up page load times. Optimizing the code on your WordPress site, in general, means:

• Using quality plugins and themes
• Keeping your themes and plugins updated to the latest version
• Not using plugins that overlap in functionality or features
• Uninstalling/deleting any unused plugins or themes.

Developers need to minify code by:

• Removing formatting and comments
• Getting rid of extra spaces
• Removing commas and code that’s not being used

It’s important to minify the code in all of your resources, including HTML, JavaScript and CSS. For minifying your HTML, a powerful tool is HTMLMinifier. For JavaScript, give UglifyJS a try. The Closure Compiler is also worth looking into. When it comes to your CSS, CSSNano is a good choice.

5. Cut Down on Redirects

There are times when it’s necessary to set up redirects in order to avoid those nasty 404 errors. But if at all possible, always avoid what are called “multiple-use redirects.”

This means that your redirects go from, for example, example.com > example.com/subdomain > example.com/subdomain/redirect.html. It would be very difficult for the target page to load in three seconds or less with those multiple redirects running.

One redirect is okay. More than one typically isn’t.

Now that you have an understanding of the additional factors that impact your site speed, let’s focus on getting your WordPress images optimized.

At the end of the day, WordPress image optimization is a process you’ll want to implement whether you run one small business site or manage multiple WordPress sites for several clients.

Does WordPress Automatically Compress Images?

Yes and no. With the release of WordPress 5.3, WordPress core introduced improved support for uploaded high-resolution images. These include images that you’ve taken with a high-quality camera or your smartphone.

• The image compression feature introduced in WordPress 5.3 detects when a large image is uploaded, then automatically generates web-optimized versions of the image.
• Upon upload, images are automatically resized to 2560 pixels, the new full size in WordPress.
• When an image you upload is resized, the word “scaled” is added to the name of your file.
• If an automatic image resize fails due to a timeout on the server, WordPress will continually retry until the optimized image is produced.

This update to WordPress core was a big one for developers who may have not realized how much their large image files were slowing down their websites. However, the built-in image optimization provided by WordPress isn’t a great blanket solution and isn’t tailored to each WordPress developer individually. It’s a good first step, but to fully maximize your image optimization, you need to go farther.

How Do I Optimize Images in WordPress?

Fully optimizing your images within WordPress isn’t too tricky of an endeavor.

There are three main ways to optimize images for your WordPress website:

1. WordPress image optimization plugins that allow you to do the work directly from your WordPress admin dashboard.
2. Pre-upload image optimizer software/application – These applications can be either open-source software like an image optimizer or, at minimum, a photo editor, or paid apps that provide image size adjustment capabilities. Photoshop is an example of a premium software application that allows you to adjust image resolution to compress images for web usage.
3. Free online services that compress and optimize your images prior to uploading them to WordPress.

Using A Pre-Upload Image Optimizer

Generally, optimizing an image means compressing it. An image optimizer, or compressor, is a software program that you install either on your personal device or access online via your web browser.

To use an image optimizer, you simply upload an image and allow the program to make slight changes to the pixels. These charges cannot be detected with the naked eye, which is why the process is sometimes referred to as lossless compression.

The same type of technique is applied when you compress an audio file into an MP3. In that process, the high frequencies get strategically reduced in a way that the ear cannot detect any change.

Pre-Upload Image Optimization Tool Options

You have quite a few options for tools that will compress and optimize your images before you upload them to WordPress.

1. A Desktop Photo Editor

If you’re a regular Photoshop user, you probably don’t need to further compress your images. This is because you can export your newly-created images in any resolution you’d like.

The same principle goes for most other desktop photo editors. But in reality, if you’re not already using Photoshop to create the images for your site, you’re probably not going to take the time to learn such a complicated program for the sole purpose of compressing images.

However, desktop photo editors like Photoshop are a stand-alone option to compress and optimize images.

2. Mobile Apps and Online Photo Editors

Photo editing apps and online photo editors (like Fotor and Pixlr) are made to do basic photo editing. Many of these tools also include options to optimize your images before you upload them to WordPress.

However, much like using Photoshop to get this job done, using these types of tools almost feels like overkill. Some of these solutions will come at a price and you may not use most of their other features.

3. Web-Based Image Compressors

If you want to optimize your images before you upload them to WordPress, dedicated web-based software is probably your best solution.

Simply Google the term “online image compressor” and pick the free one with the most interesting name. Most of them work the exact same way.

After you choose the one you like, all you need to do is upload your image and select the type of compression you want to apply.

Additionally, many web-based services offer bulk optimization options that work great if you need to optimize a large number of files.

WordPress Image Optimization Plugins

If you’d like a WordPress image optimizer that works right within your WordPress content management system, an image optimization plugin is the way to go.

With a WordPress image optimizer plugin, all you do is upload your image to WordPress and the plugin will automatically compress it to the settings you’ve predefined. You can also compress and optimize each image manually if you prefer.

In the WordPress plugin repository, you’ll find dozens of plugins for optimizing images. Some of the best WordPress image optimization plugins options are:

Smush – Optimize, Compress and Lazy Load Images

EWWW Image Optimizer

TinyPNG – JPEG, PNG & WebP image compression

Choose the one that’s easiest for you to work with and customize for your needs.

What Is the Best Image Resolution?

In general, a good target for web-based image resolution is 72 PPI. However, there isn’t a well-recognized, universal “perfect image resolution” for websites. Basically, if the compressed image doesn’t appear pixelated or distorted on your site after it’s uploaded, the image resolution is perfectly ideal to use on your site.

Unlike the printing industry, where the required image resolution is 300 DPI (dots per inch) for anything going to print, you’ll need to check how an uploaded image looks on a large computer monitor before moving forward.

What About the Size-Weight Ratio?

Colors play a major role in how much an image “weighs.” A simple black and white photo sized at 1000×800 pixels with very few elements might weigh about 100 KB. However, a photo the exact same pixel size with high contrasts and vivid colors will sometimes weigh more than eight times that amount.

Your site host may limit you in maximum weight and limit you in the file sizes you’re allowed to upload. But the size-weight ratio will always be reliant on the structure of the image.

That said, there is no optimal size-weight ratio for WordPress images. Just do your best to keep them as low as you can without sacrificing visual quality.

What Image Format Is Best for WordPress Sites?

The official WordPress documentation on image size and quality recommends that you use JPEG or PNG files on WordPress-powered sites. As such, these are far and away the most common image formats published across all WordPress sites.

Depending on the specific content you’re posting, JPEG and PNG files will work a little differently.

JPEG (or .jpg) files are perfect for all things raster (images that are made up of pixels rather than lines). Photographs in particular are almost always saved as JPEG files.

When you save a photo as a JPEG, it will typically be compressed by a certain percentage automatically. The top photo editors allow you to control exactly how much detail gets removed by the compression process.

It’s always best to select the absolute minimum amount of compression here, then compress the image later with one of the image optimizers we’ve already discussed. This helps avoid image distortion.

PNG files are for line art and photographs. When you save an image as a PNG, it will be compressed without losing any detail. However, PNG files are typically much larger than JPEGs. This file format is best used for vector files. They won’t be distorted regardless of the size.

WordPress supports images in the GIF format as well. However, this isn’t a format that we recommend using because it causes a maximum amount of distortion, no matter how carefully you’ve converted your file.

Do WordPress Sites Benefit From Image Optimization?

The easy answer to this question is a resounding yes. For example, does your site feature your proprietary logo at the top of every page and post on your site? You might not believe how heavy that image file can be, or how much that alone can slow down the performance of your site. Try optimizing it and checking the difference it makes in site speed and performance.

Do you upload new images to your blog nearly every day? Are you currently managing an ecommerce store with hundreds of product images? If so, don’t forget to install a plugin on WordPress that will automatically optimize the new images you upload as well as the images already featured on your site.

The truth is, it really doesn’t matter what category your website fits into. If possible, start thinking about optimizing its speed while you’re still designing the site. Don’t wait until it’s ready to launch.

If your site has already been launched, use one of the simple plugins referenced above to bulk-optimize all of the images on your site.

Image Optimization and SEO

While it’s true that optimizing your images isn’t the only answer to perfecting the ever-changing SEO rules, the speed of your site remains a major determining factor. That’s why WordPress image optimization is so important for your SEO strategy.

The size of your images can negatively impact search results for your site in a couple of ways.

Bounce Rate

We’ve already discussed how using large image files will slow down your site. But did you know that the major search engines like Google actually measure your average page load times and rank the fastest-loading sites the highest on search results?

The search engines also measure the bounce rates (when a user lands on your website but leaves without visiting a second page or post) of every website they crawl. A major determining factor of a high bounce rate is slow site speed.

As you can see, high bounce rates will send your site plummeting to the bottom of search engine results. Lower bounce rates, however, will drive you up on the list.

Faster site speeds almost always equal lower bounce rates.

Page Prioritization

On several occasions, Google has stated that page speed is a highly important factor for ranking websites and page prioritizations. Images, on average, take up more than 60% of the storage space of your entire website.

If you’re not optimizing images, that number could be substantially higher.

Again, this means a slower site and a lower ranking factor on Google.

And that’s not good for business.

Metadata Optimization for Images

Think of metadata as information giving more information about other information.

For images, metadata is the text information that you write about and save on your image file. This information is visible to Google and other search engines.

As a WordPress developer, all you need to do to optimize metadata on an image is fill out the small form when you’re uploading the image into your media library.

The areas you’ll need to input data for are:

• Alt text
• Title
• Caption
• Slug

By applying the most search engine-friendly text in these fields, your images will be much more likely to show up in a Google Image search.

Ranking higher on Google Image searches will drive more traffic to your site than you may think.

WordPress Image Optimization Made Easy

Before landing on this article, you may have not fully known how much WordPress image optimization can improve all aspects of your WordPress site’s performance. When you optimize your images using the methods and tips detailed above, your site will be able to perform at a level that’s similar to the big boys.

But when your site traffic starts to pick up, are you prepared for the security threats that may come with it? A powerful WordPress security plugin like iThemes Security Pro can nip these threats in the bud before they become problems.

If the worst does happen and you need to restore your site after a security breach (or other catastrophe), you’ll be glad you have a solid plan for WordPress backups with a WordPress backup plugin like BackupBuddy. Believe us, it will save you hours of labor and frustration.

Now, let the WordPress image optimization begin!