Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

If you’ve run a speed test on your WordPress site, you’ve probably seen a warning about “serving scaled images.” Tools like Google PageSpeed and GTmetrix flag it often, but they don’t explain it clearly.

All it means is your images are bigger than the space they appear in. That can slow down your pages, hurt SEO, and frustrate mobile users.

We’ve helped WordPress users fix this without editing every image by hand or digging through code. With the right approach, you can solve it quickly and prevent it from happening again.

In this guide, we’ll show you how to serve scaled images in WordPress step-by-step, no tech skills needed.

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

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.

GMetrix Recommends Serving Scaled Images

Boost Your WordPress Speed with Expert Optimization!

Are slow-loading images dragging your site down? Our WordPress Speed Optimization service can instantly transform your website’s performance.

Let our WordPress experts handle all the technical details, from scaling images to advanced speed tweaks, to ensure lightning-fast load times and a better user experience.

Optimize Your WordPress Speed Now! 🚀

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 (Easier)

The easiest way to serve scaled images in WordPress is by using a plugin that automatically resizes and delivers images at the right dimensions for each visitor’s device.

We recommend this method for most beginners because it takes care of everything behind the scenes. It’s quick to set up and works well for typical websites.

The free Optimole plugin is one of the best WordPress image compression plugins we’ve tested. It automatically scales images for you. Just note that if your site gets over 5,000 visitors per month, you’ll need the premium version.

To get started, install and activate the Optimole plugin. You can follow our guide on how to install a WordPress plugin if you need help.

Once activated, head to Media » Optimole. You’ll be prompted to sign up for an API key or enter your existing one. The process is simple.

You Need an Optimole API Key

Just confirm your email and click the ‘Create & Connect Your Account’ button. Optimole will connect your site automatically, without needing to paste any keys or leave the dashboard.

Optimole will now start optimizing your images in the background. It picks the right size based on each visitor’s screen and serves images through its global CDN, so your site stays fast.

Optimole Starts to Optimize Your Images Automatically

In the ‘Settings’ tab, you’ll see that your images are now being replaced with optimized and scaled versions. This happens automatically and doesn’t slow down your server, thanks to the CDN.

Optimole also enables lazy loading by default. That means images that aren’t visible on screen won’t load until they’re needed — which helps reduce page load time and improve performance.

The Default Settings Work for Most Websites

The default settings work well for most sites, but you can fine-tune things under the ‘Advanced’ menu. Just make sure to click the ‘Save changes’ button if you make any updates.

This method is ideal if you want a set-it-and-forget-it solution. It’s fast, beginner-friendly, and doesn’t require editing each image manually.

That said, it’s not the most flexible option. If you need full control over image dimensions or want to handle optimization yourself, then serving scaled images manually — might be a better fit.

Method 2: Serving Scaled Images Manually

Manual image scaling gives you full control over how your images look and perform. It takes a bit more effort, but the results can be more precise and consistent across your site.

Here’s why this approach offers more flexibility:

  • You can choose exact dimensions and image formats before uploading.
  • You can reduce file sizes without relying on third-party tools.
  • You avoid plugin limitations or monthly visitor caps.
  • You get more consistent results across themes and layouts.

That’s why this method is ideal for designers, photographers, and anyone who wants fine-tuned control. There are three ways to do it:

  1. By using a image editing software (Recommended)
  2. The WordPress Media Library
  3. In your WordPress Media Settings.

Let’s start with the image editing software approach.

1. Scaling Images With Image Editing Software

This is the method we use across our websites. With tools like Adobe Photoshop or Affinity Photo, you can resize your images before uploading them.

You can select the right pixel dimensions, choose the format you need, and save the file with a smaller size — all in one step.

Here’s an example of Affinity Photo’s crop tool in action:

Cropping an Image With Affinity Paint

Along with choosing the right dimensions, there are other ways to keep images lightweight and fast-loading before upload.

For more tips, check our guide on how to optimize images for web performance.

2. Scaling Images in the WordPress Media Library

You can also resize images right inside WordPress. The built-in image editor lets you crop, rotate, flip, and scale uploaded images.

To do this, open the post or page where the image appears. Click the image, then click the ‘Replace’ button and choose ‘Open Media Library’.

Replace the Image from the Media Library

This will open the Media Library with your image selected.

On the right, you’ll see fields for alt text, title, caption, and description. Below that, click the ‘Edit Image’ link.

That will take you to the image editor screen.

Editing an image in WordPress media library

From here, you can preview the image and use basic editing tools. To resize the image, look for the ‘Scale Image’ option on the right side.

Enter your desired width, and the height will update automatically to keep the aspect ratio.

Scaling an image in WordPress media library

For example, an image with a size of 2560×1637 can be scaled down to 1200 pixels wide with just one click.

After entering the new width, click the ‘Scale’ button to save the change.

Keep in mind, you can only scale images down in WordPress, not up. Increasing the size may reduce quality or fail entirely.

Need help with image editing in WordPress? See our tutorials on basic image editing and cropping thumbnails.

Adjusting Image Sizes in Media Settings

By default, WordPress creates several versions of each image in different sizes. You can change these default sizes by going to Settings » Media in your dashboard.

The Media Settings Page

Here, you can adjust the dimensions for thumbnail, medium, and large sizes. This affects how images are scaled and displayed throughout your site.

If you need more image sizes, you can create additional ones using a few lines of code or a plugin.

After changing your image sizes, you’ll need to regenerate thumbnails for existing images so they use the new settings.

When inserting an image into a post or page, you can also choose which size to display in the block settings panel.

Select size and resolution under image block settings

Frequently Asked Questions About Scaling Images in WordPress

Below are some common questions users have about image scaling and handling in WordPress.

Why does WordPress scale images?

WordPress automatically generates multiple image sizes to ensure your website loads quickly and displays images correctly on different devices. This improves performance by preventing unnecessarily large images from slowing down your site.

How do I add an image slider in WordPress?

This article doesn’t cover image sliders. However, you can add one using a WordPress plugin like Soliloquy or Smart Slider 3. These tools let you create responsive sliders with a drag-and-drop interface.

How do I stop WordPress from resizing images?

You can stop WordPress from generating extra image sizes by adding this code to your theme’s functions.php file:

update_option( 'medium_size_w', 0 );
update_option( 'medium_size_h', 0 );
update_option( 'large_size_w', 0 );
update_option( 'large_size_h', 0 );

This disables the default medium and large image sizes.

How do I add an image effect in WordPress?

To add effects like hover animations, filters, or transitions, you can use a plugin such as Image Hover Effects or apply custom CSS in your theme. We have a tutorial on that which you can follow for more details, how to add image hover effects in WordPress.

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.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

6 CommentsLeave a Reply

  1. You have mentioned that WordPress automatically create multiple resized versions of each image uploaded.
    So that means these extra generated images takes up more disk space, right?
    Is there a way to prevent WordPress from making these extra copies if I don’t need certain sizes?

  2. When I change an image using WordPress, does it create a new scaled-down copy, or does WordPress just scale the image to a different size but keep the original image? My concern is whether the size of the loaded image will also change at the same time or not.

      • I understand and thank you for your reply. I am primarily interested in the second option, in order to create a smaller copy of the image and thus reduce the demands on transmitted data. Thank you for the clarification.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.