How To Add Explicit Width + Height To Image Elements (Specifying Dimensions)

Use explicit image width and height wordpress

Need to specify image dimensions in WordPress?

To fix specify image dimension errors in WordPress, locate the image that has this GTmetrix error and view it’s HTML. Add a width + height to the image’s HTML (provided by GTmetrix):

<img src="example.png" width="680" height="680" />

This just means you need to add a width + 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.

Specify image dimensions wordpress

 

1. Find Specify Image Dimension Errors In GTmetrix

GTmetrix only shows errors for the single page you test.

Run any page through GTmetrix and see which images have specify image dimension errors.

Specify image dimensions gtmetrix

 

2. Copy The Image’s Width + Height From GTmetrix

Next, copy the image’s width and height (provided by GTmetrix).

Gtmetrix image dimensions

 

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.

Locate wordpress widget image

Specify image dimensions widget

 

4. Add The Width + Height To The Image’s HTML

Once you locate 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″

Specify image dimensions in wordpress

<img src="example.png" />
<img src="example.png" 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.

Specify image dimensions wordpress

 

6. Specify Image Dimensions In WP Rocket

If you’re using WP Rocket, they recently added a specify image dimension option in the Media settings called “add missing image dimensions.”

WP Rocket will scan HTML for src attributes missing a width + height, then add it.

 

7. Fix Specify Image Dimension Errors On Multiple Pages

Want to bulk fix images that appear on multiple pages?

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.”

Better search replace images

Step 4: The plugin will run and 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.

 

Frequently Asked Questions

How do you specify an image's dimensions?

Find the error in GTmetrix and copy the image's width and height (provided by GTmetrix). Locate the image in WordPress and view it's HTML. Add the width and height to the image's HTML. Example: width=”680″ height=”340″

Can I use a plugin to specify image dimensions?

Most specify image dimension plugins don't work, but you can try Better Search Replace to bulk fix images that appear across your site.

How do you Optimize Images in GTmetrix?

This means you need to losslessly compress images using a plugin like ShortPixel or Imagify. I use ShortPixel.

How do you serve scaled images?

If you have serve scaled image errors in GTmetrix, it means you are uploading images that are too large and they need to be resized to the correct dimensions. Your sliders, portfolio images, widget images, full width blog images, and other sections of your website call for specific dimensions. You need to resize images before uploading them so they fit those.

Drop me a comment if you still have questions.

Cheers,
Tom

You Might Also Like:

Leave a Comment