Need to specify image dimensions in WordPress?
This means you need to add a width and height to the image’s HTML or CSS. If an image does not have specified image dimensions, it will appear as an error in your GTmetrix report, and GTmetrix will even tell you the correct width and height that should be added to that image.
All you have to do is locate the image on your WordPress site, view it’s HTML, then add a width and height, like this:
<img src=”image.jpg” />
<img src=”image.jpg” width=”680″ height=”680″ />
1. Find Specify Image Dimension Errors In GTmetrix
GTmetrix only shows errors for the single page you test.
Run any page through GTmetrix and seewhich images have specify image dimension errors.
2 Copy The Image’s Width + Height From GTmetrix
Next, copy the image’s width + height (provided by GTmetrix).
3. Locate The Image On Your Website
Now we need to locate the image on your WordPress site.
The WordPress visual editor automatically specifies image dimensions for you, so there’s usually no errors for images here. However, some areas of your website might not specify image dimensions automatically (possibly page builders, sliders, widgets, and hand-coded HTML or CSS). You need to learn which area of your WordPress site is giving you the errors.
4. Add The Width + Height To The Image’s HTML
Once you have located the image, view it’s HTML and you’ll notice there isn’t a specified width + height. All you have to do is insert these into the HTML like this: width=”135″ height=”135″
5. Retest The Page In GTmetrix
Save changes and rerun the page through GTmetrix. The image that had errors should be fixed.
6. Use The Specify Image Dimensions Plugin
The Specify Image Dimensions plugin scans your site for all <img> tags that are missing a width + height and adds them automatically. However, I didn’t have success with this plugin.
7. Fix Specify Image Dimension Errors On Multiple Pages
Does the same image appear on multiple pages/posts and has specify image dimension errors?
You can use the Better Search Replace plugin to fix your logo, widget images, and other images that appear on multiple pages without having to go through them individually. It can save time.
Step 1: Install the Better Search Replace plugin.
Step 2: In the “Search for” field, add the image’s HTML without the specified width + height. In the “Replace with” field, add the new version of the image that does include the width + height.
Step 3: Select the table(s) you want the plugin to scan and replace images on. You can do a dry run if you want to test it out, otherwise uncheck that option and click “Run Search/Replace.”
Step 4: The plugin will run the search/replace the image on all tables you chose. Once finished, Better Search Replace tells you how many tables it scanned and how many images it replaced.
Other Images Optimizations
I wrote a full tutorial on optimizing images in WordPress which includes:
- Compressing images
- Serving images through a CDN
- Resizing GIFS
- Removing EXIF data
- Lazy loading images + videos
- Cloudflare Mirage, Polish, Hotlink Protection
Looking For More WordPress Speed Tutorials?
Here are other tutorials I wrote:
- How To Setup WP Rocket (the cache plugin I recommend)
- Cloudways vs. SiteGround (the two top hosts I recommend)
- How I Got 100% GTmetrix Scores (WordPress Speed Guide)
I also have an awesome video on WordPress speed optimization:
I hope this tutorial helped you and you don’t have specify image dimension errors anymore!
Drop me a comment if you still have questions.