Getting images to load efficiently in WordPress takes a little bit of work. Here’s a few of my tips for ensuring that they load at the proper size and as quickly as possible.

Set Your Image Sizes

When you insert an image into a WordPress post you have a couple options for image size: “Thumbnail”, “Medium”, “Large” and “Full Size”.

These sizes can be adjusted under “Settings > Media”.

I like to set the “Large” size to the maximum content width for the theme. If you’re not sure what that is, you see what the $content_width is defined as in functions.php. Or you can measure it with your browser developer tools.

Avoid “Full Size” Images

Most themes will scale down images are that are too large using CSS, so you may not realize you’ve inserted a super huge image. However, these images take a much longer time to download than ones that have been resized to the actual content width.

To avoid this issue, I recommend always inserting images using the “Large” size.

Another option is to install the “JetPack” plugin and activate the “Photon” module. This will ensure that full size images are never generated larger than they need to be.

Regenerate Your Image Sizes

If you’ve ever switched themes (or changed the sizes in the Media settings) there’s a good chance you’re not loading images at their ideal sizes. This is because each theme defines its own custom thumbnail sizes, and if you switch, previously uploaded images are not generated automatically.

For example, here’s the thumbnail sizes defined for each of the previous three default WordPress themes:

set_post_thumbnail_size( 604, 270, true ); // TwentyThirteen
set_post_thumbnail_size( 672, 372, true ); // TwentyFourteen
set_post_thumbnail_size( 825, 510, true ); // TwentyFifteen

If uploaded a featured image when TwentyThirteen was active, and then switched to TwentyFifteen, your featured image would be scaled up to 825px using CSS rather than generating a new image at 825px.

To fix this, you’ll need to regenerate your thumbnails after switching themes. There’s two great plugins you can use to do this:

Regenerate Thumbnails
AJAX Thumbnail Rebuild

If you have a lot of images on your site, this might take a little while to run. But it will fix all your blurry and oddly cropped images as long as you originally uploaded a large enough size.

They has been a lot of discussion about improving this (so users don’t need to install a plugin), but it’s a complicated issue.

Update Your Post Images

Regenerating the image sizes is helpful for featured images, but it won’t update any of the images you’ve previously inserted into posts. If you just have a few, it might be easiest to just go through an re-insert them manually.

But if you have a lot of posts, you can try this plugin (Replace Content Image Size).

This one isn’t for the faint of heart. It hasn’t been updated in a while, throws a couple debug notices, and highly recommends you make a backup of your database. But it worked fine for me last time I used it.

Lazy Load Images

Lazy loading works by delaying the requests for images until they’re actually needed on the screen. As a visitor scrolls down, they’ll render as needed. This makes the initial load of the site a bit quicker.

Even better, if you have a lot of images near the bottom of the page (comment avatars for example), they won’t even be loaded if your visitor doesn’t scroll that far- saving you both on bandwidth.

Use the Lazy Load plugin for this. It hasn’t been updated in a while, but still works great.

Alter Image Quality

By default WordPress generates images at 90% quality. This setting generally works well, but you can lower the file size by compressing these even further (80% for example). To adjust this, you can install this plugin (WP Resized Image Quality).

If you’re using the Photon module in JetPack, you can also alter the quality of images it delivers.

Use JetPack

If you activate the “Photon” module in JetPack, you can use WordPress.com’s servers to deliver you images.

One advantage of this is that large images will be automatically resized to the maximum width (as I mentioned earlier). But delivering your images through WordPress.com’s infrastructure may also lead to speed increases as well depending on your hosting environment.

One wish list for Photon would be the ability to define a maximum content width for mobile so that smaller screens get smaller images. There is a ticket for srcset/picture element– so maybe that will be here sooner than we think.

Use Other Image Services

WordPress.com (though JetPack) isn’t the only service offering to serve and optimize your images. Kracken.io also has some interesting APIs if you’re looking for other solutions and features.

Do You Really Need All Those Images?

All of this assumes you really need all those images. But do you?

Would a tiled background image work equally well as that large full screen photo you currently have?

Do those related post links need thumbnails? Or would text links work fine too?

Conclusion

As you can see, generating and delivering the proper size images can take a bit of effort. As standards for responsive images develop and WordPress continues to mature as a platform, hopefully we’ll get even more tools for delivering efficient images in the future.

Are there any good tips I left out? Let me know in the comments.