How to Easily Serve Scaled Images in WordPress (Step by Step)

Many beginners upload images without considering their dimensions, leading to slower load times and poor user experience. Serving scaled images is a quick way to boost performance without losing image quality.

We try to optimize images before uploading them, but there have been times when we needed to serve scaled images to fit the required dimensions.

In this tutorial, we’ll walk you through the steps to easily serve scaled images in WordPress, helping your site load faster and run more efficiently.

Why Serve Scaled Images in WordPress?

On your WordPress website, you’ll likely use images for blog posts, thumbnails, page headers, cover images, and more. Each image serves a purpose, helping create a visual experience for your visitors.

Depending on your theme, these images are displayed at specific pixel dimensions. For example, your featured image may display at 680×382 pixels, while a thumbnail might be 100×100 pixels.

It’s important to save images at the exact dimensions needed for your site. For instance, if your featured image space is 680×382 pixels, the image file should match those dimensions.

Not resizing images can lead to slower loading times or a lower-quality user experience. Here are a few reasons why:

• Larger-than-necessary files slow down load times as visitors have to download extra data.
• Using images with fewer pixels than needed can make them appear blurry or pixelated at larger display sizes.
• Your website must resize images on the fly, requiring more processing time before the content appears to users.

All of this can lead to a less satisfying experience for your visitors and may even hurt your image SEO.

That’s why when you test your website’s performance with tools like GTMetrix, you’ll often see recommendations to serve scaled images for better speed.

Now, let’s walk through how to serve scaled images in WordPress. We’ll cover two easy methods for optimizing your images for performance.

Method 1: Serving Scaled Images With a Plugin

The simplest way to serve images scaled is to use a plugin that automatically displays your website images at the correct size.

We recommend this method to most beginners. It is easier but doesn’t allow as much flexibility as the second method.

The free Optimole plugin is one of the best WordPress image compression plugins. It will automatically scale your images. However, if you get over 5,000 visitors per month, you’ll need the premium version.

First, you need to install and activate the Optimole plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you will be automatically taken to the Media » Optimole page and asked to sign up for an API key or enter your existing API key. This is very easy.

Simply make sure that your email address is correct, then click the ‘Create & Connect Your Account’ button. The connection to Optimole will then happen automatically. You won’t even need to visit another website or manually paste the key.

Optimole will now start optimizing your images in the background. It will automatically choose the correct image size for each visitor’s device and browser and serve the images from the fast Optimole Cloud Service CDN.

When you click on the ‘Settings’ tab, you will see that the images in your posts and pages will be automatically replaced with those optimized and scaled by Optimole.

This isn’t done on the fly because it’s through a CDN, meaning your site will not take a performance hit.

Also, the plugin has enabled lazy load, which means that images on the page that are not currently visible won’t be loaded until they are needed. This is another effective way to reduce page load time and improve website performance.

These settings will work well for most websites. However, you can customize Optimole further using the settings on the ‘Advanced’ menu to see what works best for your website.

If you make any changes to the settings, then don’t forget to click the ‘Save changes’ button at the bottom of the page.

Method 2: Serving Scaled Images Manually

You can also scale images without a plugin. There are three ways to do this: you can use the image editing software, the image editing feature in the WordPress Media Library, or by changing the values in the WordPress Media Settings.

Scaling Images With Image Editing Software

This is the method we use on all our websites. Using photo editing software on your computer, such as Adobe Photoshop or Affinity Photo, you can scale your images to the correct dimensions before you upload them to your website.

The software allows you to choose the correct number of pixels for your image and save it with a small file size and the file format you prefer.

For example, here’s a screenshot demonstrating Affinity Photo’s crop tool.

Besides getting the image size right from the beginning, there are other things you can do before you upload your images to make sure they don’t slow down your website.

For more information, see our guide on how to optimize images for web performance.

Scaling Images in the WordPress Media Library

Did you know that you can do basic image editing in WordPress? The WordPress’ edit image’ feature allows you to crop, rotate, flip, and scale images.

When editing a post or page, you need to click on the image you wish to edit. Next, you should click the ‘Replace’ button and then select ‘Open Media Library’ from the menu.

This will open the WordPress Media Library with the image selected.

On the right is an area where you can add alt text, a title, a caption, and a description for your image. You will also find an ‘Edit Image’ link.

Just click that link to visit the ‘Edit image’ page.

Here, you’ll find a preview of the image, editing buttons, and several other options that are useful when scaling or cropping the image.

To scale the image, simply change one of the ‘New dimensions’ values under Scale Image on the right.

For example, this image has a very large resolution of 2560×1637 pixels. By typing in the first ‘Scale Image’ field, we can reduce it to a width of 1200 pixels.

All you have to change is the Width, and the image’s height value will change automatically to keep the image in proportion.

After that, just click the ‘Scale’ button to change the image’s resolution.

Note that you can only scale an image down in WordPress. You cannot make images larger by increasing the image dimensions.

For detailed instructions, see our guides on basic image editing in WordPress and cropping and editing WordPress post thumbnails.

Adjusting Image Sizes in Media Settings

When you upload images to your website, WordPress automatically creates several copies in different sizes. You can customize these sizes by visiting the Settings » Media page in the WordPress admin area.

Here, you can easily change the dimensions for thumbnail, medium, and large image sizes.

You can also create additional image sizes in WordPress if you need more than these three sizes.

If you change the default image sizes or create additional ones, only new images will be affected. You need to regenerate the image sizes for existing images.

When you add an image to a post or page, you can select an image size in the block settings on the left of the page.

Bonus Resources

Media and images make a WordPress website engaging. The following are some additional resources that will help you fully utilize WordPress’ media capabilities.

• How to Add a Hero Image in WordPress
• Cover Image vs. Featured Image in WordPress Block Editor (Beginner’s Guide)
• Why You Should Never Upload a Video to WordPress
• How to Create an Image Gallery in WordPress (Step by Step)
• How to Add Your Social Media Feeds to WordPress (Step by Step)

We hope this tutorial helped you learn how to serve scaled images in WordPress. You may also want to see our guide on optimizing WordPress image SEO or our article on using AI to generate images for blog posts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.