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:
- 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.
- 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.
- Use online website optimization tools such as or PageSpeed Insights or GTmetrix.
- 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:
- Access your WordPress Admin Section.
- Click on Media > Library in the left sidebar.
- Find your image, then click on its thumbnail.
- Click on the Edit Image button in the upper right corner/below the image.
- Enter new dimensions under Scale Image, then click on Scale.
- Alternatively, use the Image Crop section to enter a crop aspect ratio or selection.
- 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.
- Optional. Tweak the Thumbnail Settings section if necessary.
- After you’re finished editing an image, click on the Save button below.
- 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
