• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Thinker

The WordPress Playground

  • Snippets
  • Best
  • Guides
  • Reviews
Home / Guides

May 16, 2021 Milan

How to Serve Scaled Images in WordPress

Serve Scaled Images in WordPress

Uploading properly scaled images can significantly boost the loading speed of your posts and pages. This in turn improves user experience, SEO rating, and reduces bounce rate, making your website more successful. Plus, there really is no reason to upload images that are larger than needed. You’d be wasting precious resources, primarily your limited storage space on a web hosting plan. On the other hand, you shouldn’t skimp either. Smaller-than-required images will boost loading speed but can stretch images out, ruining your plans. With that said, here’s how to serve scaled images in WordPress.

How do I know which WordPress images need to be scaled?

Here are 4 common ways to check which images need scaling:

  1. Look through your theme CSS files after accessing your website via FTP. Use Ctrl (Control) +F on Windows and Command + F on Mac to search for image names. Take note of height=”X” and width=”X” dimensions.
  2. Open your website and right-click on the desired page. Select Inspect (Chrome) or Inspect Element (Firefox). Hover over the image and you’ll see displayed dimensions above.
  3. Use online website optimization tools such as or PageSpeed Insights or GTmetrix.
  4. Use a third-party WordPress plugin. We gave an example in method 4.

1. Use image editing software before uploading

This is the best-case scenario – you looked up dimensions before uploading, and only need to cut images down to size. Simply fire up your image editing software such as GIMP, Adobe Photoshop, Adobe Lightroom, or Corel PaintShop. You can also use the operating system’s built-in software such as Paint (Windows) or Preview (Mac) or GIMP/Gnome Paint (Linux/Ubuntu). Finally, there are cloud-based image resizer tools if the software isn’t your thing.

Tip. It’s strongly recommended that you compress images before uploading. Use software such as Caesium Image Compressor or online tools for image compressing such as www.compressjpeg.com.

2. Serve scaled images in WordPress from the Media Library

If you already compressed and uploaded an image but its size isn’t perfect, don’t fret. WordPress will make necessary updates after you make changes, entirely online. With that said, here’s how serving scaled images via the Media library works:

  1. Access your WordPress Admin Section.
  2. Click on Media > Library in the left sidebar.
  3. Find your image, then click on its thumbnail.
  4. Click on the Edit Image button in the upper right corner/below the image.
  5. Enter new dimensions under Scale Image, then click on Scale.
  6. Alternatively, use the Image Crop section to enter a crop aspect ratio or selection.
  7. Tip. Use these keyboard shortcuts to fine-tune cropping:
    • Arrow (Up/Down/Left/Right): Move selection by 10 pixels.
    • Shift + Arrow: Move selection by 1 pixel.
    • Control (Command on Mac) + Arrow: Resize by 10 pixels.
    • Ctrl (Command on Mac) + Shift + Arrow: Resize by 1 pixel.
    • Shift + Drag: Lock the current aspect ratio.
  8. Optional. Tweak the Thumbnail Settings section if necessary.
  9. After you’re finished editing an image, click on the Save button below.
  10. Tip. If you messed something up, you can click on the Restore Original Image button and try again.

3. Set maximum image dimensions in WordPress Media Settings

WordPress sets maximum image sizes for 3 types of images it generates automatically. And, when a visitor’s browser requests them, WordPress lets it choose the best-fitting one via the “srcset” attribute. By default, those are:

  • Thumbnail size: 150 x 150 pixels
  • Medium size: 300 x 300 pixels
  • Large size: 1024 x 1024 pixels

My images are over the maximum size limit in WordPress. What do I do?

Not an issue, you can change these values by going to Settings > Media in the main WordPress sidebar on the left. For thumbnails, you can avoid aspect ratio by putting a checkmark in front of Crop thumbnail to exact dimensions (normally thumbnails are proportional) before clicking on Save Changes. Old mages will be resized to fit new dimensions after you utilize the last method (using a plugin) in our guide for fixing blank thumbnails in Media Library.

4. Serve scaled images using a WordPress plugin

Now for the most resource-intensive method, yet most effective one. By this, we mean installing a WordPress plugin that will analyze dimensions, perform built-in performance tests, and perform automatic image resizing (with an optional backup). Such plugins can also compress old images in the Media Library, remove their metadata, and help you configure new maximum Media Settings based on the largest uploaded image. To improve your website speed further, these plugins usually come with “lazy loading”, so images only load as the user interacts with the website. Premium versions of those plugins usually provide CDN (Content Delivery Network) integration as well.

Which WordPress plugin works best for serving scaled images?

We’re not affiliated with any, so feel free to choose a favorite. According to WordPress’s plugin database, the 4 top choices are:

  • Smush by WPMUDEV
  • EWWW Image Optimizer by Exactly WWW
  • Imagify by WP Media
  • ShortPixel Image Optimizer by ShortPixel
Avatar for Milan

Milan

A WordPress lover and blogger. Have been writing about WordPress for the past few years and loves sharing his knowledge and findings to those who need help.

Primary Sidebar

Related Articles

Footer

WP Thinker is a website that publishes everything related to WordPress, Plugins, Themes, SEO, Blogging, etc.

  • Facebook
  • Twitter
  • Pinterest

Copyright © 2023 · WP Thinker

  • About Us
  • Advertise
  • Write for Us
  • Privacy Policy
  • Terms and Conditions
  • Contact Us
This website uses cookies to serve you better. By continuing to use this website, you agree to our cookie and Privacy Policy.