First, I’m not a web developer or a technical guy who knows much about CSS, HTML, JS, and everything else.
So, do not expect to read all the technical jargon concerning CSS, image attributes, width, height, aspect ratio, etc., in this post.
I’m just a blogger who accidentally finds a lazy man’s way to add explicit width and height to image elements’ error warnings in Google Pagespeed Insights.
Trust me, I have read countless posts and Google documents on how to add explicit width and height to image elements, yet it is not working for me. Most posts are for advanced web users who can play with codes.
And as per WordPress plugins, most plugins I have tried fixing the issue do not work.
But surprisingly, the method I show you here is so simple that you’d wonder why you never thought of it because you already have the tool to fix the image elements’ height and widths in your WordPress Gutenberg editor.
Yes, that’s true.
WordPress gave you the tool to fix it without needing plugins or adding CSS attributes.
Without delay, let’s go straight to it.
Fixing Image Elements do Not Have Explicit Width and Height
Note that this method only adds image elements’ explicit height and width on individual posts. It does not work automatically, fixing all affected images on your WordPress site on the fly or in the background.
Before you attempt to specify the height and width of the image elements, run a Page Speed Insight test to pinpoint affected images on an individual post.
Note their image alt and the exact post you want to fix.
Here is an example of the error message checking with one of my website posts.
As you can see in the image above, many images are missing explicit width and height elements.
How do we fix this?
Now, open the post in your WordPress Gutenberg editor. Click the image you want to add explicit width and height dimensions, and make sure you’re on the block tab in the right-side panel.
Pay attention to the details in the image above.
In the image dimension section, set the image elements’ height and width to 75%. The option is already there, so you do not need to enter any settings.
Repeat this step for all the images on that particular post with the image elements error notice.
After specifying the image width and height to 75 percent, update the post to allow the changes to take effect.
Return to the Pagespeed Insights testing tool and rerun the test.
After the test, scroll the page to check if the error resurfaces. The warning should now go away if you follow the steps correctly.
That’s it. I told you the process is so simple you would wonder if it will work. It worked for me, so I believe it should work for you, too.
If you see any image with the warnings notice, review the post to see that you’ve set the height and width to 75%. And repeat the process to fix it.
Who Should Use This Method?
This method can be suitable if you have a small site with a few hundred pages.
I say this because running the page speed and performance test for each post is less time-consuming and challenging than when you have thousands of pages.
If you have a WordPress blog with less than 300 or 400 pages, you can quickly check through each post for image elements missing height and width attributes.
Besides, doing this on large websites with thousands of pages will be challenging. On such sites, you need a system that automatically adds native heights and widths in pixels for images as attributes.
This method described in this post does not set it and forgets it. You have to find pages on your website with image height manually and width attribute errors.
Some WordPress Plugins to Try
If you’re looking for an automated way to fix the image elements’ width and height attributes warning in PSI, here are some plugins I came across during my search.
Specify Missing Image Dimension
I didn’t try this plugin because it was last updated over a year ago. But from a reliable source, I read the plugin was reliable when it was maintained.
The plugin scans the HTML of the web page, looking for images with missing width and height attributes. After finding images with missing dimensions, it uses the
getimagesize() function to determine the image dimension.
Then, it adds the width and height attributes to the images.
If you have no problem using a plugin’s last updates over 12 months, you should try this plugin. From a few user reviews and its description on wordpress.org, the plugin seems worth the try.
WP Rocket is another good plugin to automate the fixes for missing image dimensions. In their recent update, they’ve included this feature in the Media Tab.
Go to the WP Rocket Media Tab setting, scroll down the page, locate the feature, and check the box.
That’s all you need to fix Image elements do not have explicit width and height in GTmetrix, PSI, or any other testing tool.
After checking the box and saving the setting, WP Rocket will scan your website HTML for images with
src attributes but missing width and height.
Then, using the PHP function
getimagesize, the plugin will add the missing height and width dimensions using the data.
However, you need to read this feature’s documentation or help article. This function has limitations, as there are instances where it does not work on specific images.
First, the images must be hosted on your site for the function to work. Though you can get it to work on externally hosted images using the helper plugin, it will increase the time to generate the cache.
Another concern is that the feature won’t work on images with the width and height set to “auto” values. Also, it will not act on images with query strings in their URL and dynamically inject them into a page load.
Read this post to learn more about WP Rocket, add missing image dimension feature limitations and benefits, and learn how it helps with cumulative layout shifts.
FAQ – Add Explicit Width and Height to Image Elements
Sure, I know you have more questions on your mind. So, I’d prepare a few questions and answers you might want to check out.
If your question remains unanswered, please comment below, and I will try my best to provide the answer.
What Are the Plugins for Image Resizing in WordPress?
Smush compresses and optimizes images to improve loading time without sacrificing image quality.
EWWW Image Optimizer automatically optimizes images to improve site performance while offering conversion to next-gen formats like WebP.
ShortPixel is another WordPress plugin that optimizes and resizes images, reducing their file size to improve website speed and overall performance.
However, the best plugin that suits your needs depends on your website requirements.
How do I fix the width and height of an image in CSS?
Use the CSS code below:
width: 600px; /* Set the desired width to 600 pixels */
height: 300px; /* Set the desired height to 300 pixels */
You should adjust the image values (e.g., 600px and 300px) to your preferred dimensions. Also, remember that fixed image dimensions may cause the image to lose its aspect ratio if they don’t match the original proportions, causing more page layout shift errors in page speed testing tools.
How do I fix the width and height of an image in HTML?
The simplest way is to use the “width” and “height” attributes in the “img” tag to fix the width and height of an image in HTML.
<img src="your_image_url.jpg" width="300" height="200" alt="Image description">
Replace “your_image_url.jpg” with your image’s actual URL or file path. Adjust the width and height values to your desired dimensions. Again, fixed image dimensions can cause layout shifts if the image’s aspect ratio doesn’t match the original settings.
Fixing image elements that do not have explicit width and height can be challenging to resolve, especially on image-heavy sites. But with patience and special attention to the page speed testing tools recommendations, you can fix the affected images yourself.
The solution in this article is suitable for small sites and will work 100% of the time for individual pages.
I hope this article helps you resolve your performance issue and improve your website Cumulative Layout Shift (CLS) error.