Hey blog fam! Working on your website speed performance, and Gtmetrix or Google PageSpeed Insights is giving you the “serve scaled images” This is one that stopped me in my tracks.
I thought I had done all I needed to do for my images and finally it hit me. My understanding of image optimization was incomplete.
I was basically relying on a plugin to do all the work without knowing what the plugin was actually doing.
Do I need a plugin to do this task? After doing my research here I was able to get a better understanding on the error.
I learned whats causing the error, and how to fix it with or without a plugin!
Related Reading: What Are WordPress Plugins
WordPress is an awesome CMS filled with tons of resources. You can find the best tools to make your website run at the most optimal levels.
In this post I will share a couple of methods you can use to fix the “serve scaled images” error and provide a pleasant experience to your website visitors.
First things first-Lets run a website performance test using a free online tool.
Head over to Gtmetrix.com-enter your URL as https://yourdomainname dotcom and click analyze.
The tool will begin a website performance check and when it’s complete you will be given a full report.
Let me help you out with this report. What you want to focus on is 1.your website load time 2. Page size 3. Requests
Your report will include 2 letter grades ranging from A-F. Obviously you want to score an A in both positions but lets keep our focus on load time, page size, and requests.
To improve each of those metrics we need to learn whats causing our website to lag in performance.
What Does Serve Scaled Images Actually Mean
Focusing on the “serve scaled image” error (if this is indeed an area you scored poorly in) we need to understand what this telling us.
So whats happening is an image (or images) on your website is not properly sized.
Your WordPress theme will have specific dimensions for all of your images and if you are using an image that is smaller or larger than whats recommended you will see the error.
Example would be if your theme has uses a dimension of 400 X 400 and you use an image that’s 150 X 150 Your browser will try to compensate for the dimension difference so it will scale it up.
The image will be to small and appear blurry or pixelated.
If you use an image that is 500 X 500 (larger than recommended) like I would do all the time, your image will look nice but it’s to big and might cause your website to load slower.
How Do I Fix Scaled Images in WordPress
We will take a look at the first method which is using a plugin to correct the serve scaled images issue.
There are probably many different plugins you will come across that can fix the issue, however my research has led me to use SMUSH and ShortPixel.
These two plugins are dependable and designed with optimization in mind.
The thing about plugins is that you want to make sure your using plugins that are well coded and updated on a regular basis.
Not all plugins are created equally so it’s worth doing some research before installing a new plugin.
Related Reading: Best Plugins For New Bloggers
I have been using SMUSH for a couple of years now and I highly recommend it for any WordPress website.
It has a very user friendly interface and a great setup wizard that helps you automate all functions.
There is a free version and a paid version of the plugin, and for most websites you will do just fine with the free version.
The big difference in the free VS paid option would be the ability to process more images at one time. So on the free version you can optimize 50 images at a time.
If you have 500 images you will be optimizing them in batches of 50 until you hit your 500.
The paid version would do them all in one swoop. It is more time consuming to do batches of 50 but you can determine what works for your situation.
Besides that SMUSH will be able to size your images to meet your themes recommendations.
Find SMUSH Here
ShortPixel is a great plugin to use for images optimization as well. This plugin has compression options.
You can add more or less compression to an image which is a great choice because some high detail images will need less compression to preserve their original look.
Other images may not have much detail therefore can be compressed more. The plugin has a very limited free option and a paid option as well.
You get 100 images per month for free and at that point you have maxed out.
For most users I would recommend going with their basic plan at $4.99 you get 5,000 images. That sounds like a lot but keep in mind Each image in WordPress is used multiple times.
WordPress automatically generates 3 copies of each uploaded image.
Find ShortPixel Here
Serve Scaled Images In WordPress Without A Plugin
You can edit your images manually from within WordPress or using an image editing software such as Photoshop or Canva.
There are also really handy websites that offer non software online editing tools.
Using WordPress to Edit Your Images If you are using WordPress to edit images you can do this two ways.
1. Media library> click the image you want to edit>click edit image> enter your new dimensions and click scale.
2. WordPress dashboard left pane find settings> media> you will be able to enter 3 sets of dimensions here.
WordPress uses 3 sets of dimensions because it will choose the best image size to display to your website visitor depending on their browser.
This is a feature that is native to WordPress which helps with optimization.
You are able to make changes to each section and set your height and width dimensions accordingly.
Using a software like Photoshop to edit images you would simply select your image. Under the image tab select image size.
You will get a screen that displays your current image dimensions and be able to edit them as needed.
Using an Online Photo Editing Tool To Serve Scaled Images
Using an online editing tool to edit your images can be an efficient way to do your editing if you don’t have Photoshop or any other editing software.
One of my favorite websites is img2go. This website has an online virtual suite of tools you can use for editing purposes.
To change image dimensions simply click the resize image tab> upload your image to the website> choose your dimensions and after it loads click start.
Once finished you will see an option to download your image to your computer. You can then upload the image to your WordPress media library.
Congratulations! You stuck around to the end and are now ready to eliminate the dreaded “serve scaled images” error for good.
In addition to properly optimizing your images use a lazy load option for all your images.
This is another speed enhancer for your website load times.
Now over to you
I’m curious? What’s your go to method for optimizing images on your WordPress website? Join the conversation and leave comments below. We love to hear from our readers!
If you do not have a WordPress website and you are interested in setting one up. Enroll in our FREE go at your own pace course.
In this course we walk you step by step and take you from a basic idea to your very own stunning website.
This was really helpful! Thank you so much!