4 Ways to Fix Image Elements Do Not Have Explicit Width and Height

Image elements play a crucial role in improving the user experience. Along with user experience, it also improves the core SEO factors.

Modern browsers like Chrome can calculate the image size before loading, preventing sudden layout shifts.

If you use lazy loading for images, specifying their size is crucial to prevent layout disruptions after loading. Preventing layout shifts avoids unnecessary clicks and keeps anchor links from scrolling out of position.

Google’s Core Web Vitals (LCP, FID, CLS) impact search rankings. CLS measuring layout shifts during page loading. Specifying image sizes reduces CLS and can positively affect SEO rankings since Core Web Vitals became a ranking factor.

So, considering all these factors, fixing image elements that do not have explicit width and height is a must. There are various methods to fix this issue manually and by plugins. 

In this article, we’ve discussed 4 methods that effectively work on  image elements do not have explicit width and height 

Fixing Method 1: Manually

If you’ve constructed your website using code, you have the option to manually fix this issue. Follow these steps to do so effectively:

1. Begin by accessing the specific webpage or section of your website where the image with missing values is located.
2. Once you’ve identified the image in question, make sure to specify its width and height attributes within your HTML code.
3. Your HTML code for the image should resemble the following:

<img src="your_image_source_here" alt="description_of_your_image" width="desired_width" height="desired_height">

       Ensure you replace “your_image_source_here” with the actual image source URL

·       “description_of_your_image” with an appropriate description

·       “desired_width” with the desired width in pixels

·       and “desired_height” with the desired height in pixels

This way, you’ll accurately define the image’s dimensions within your website’s code.

Fixing method 2: With plugin (WP Rocket)

To save time and prevent errors when dealing with image issues use the WP Rocket optimization plugin. Here are the steps to follow for fixing image dimensions and properties:

1. Install and activate WP Rocket.
2. Go to Settings > WP Rocket.
3. Click on the Media tab.
4. Check the box for “Add missing image dimensions.”
5. Save Changes.
6. WP Rocket will automatically add dimensions to your images. As a bonus, it’ll also improve your site’s performance.

Note: At the end of this process don’t forget to click on Save Changes. WP Rocket performs an analysis of your website’s HTML code to identify images.

Note: At the end of this process don’t forget to click on Save Changes. WP Rocket performs an analysis of your website’s HTML code to identify images.

Along with specified width and height attributes by utilizing the PHP function getimagesize to retrieve the actual dimensions of these images. After that, it applies the dimensions as attributes in the HTML markup.

????Want to fix your javascript problem and total blocking time issue that making your site slower using WP Rocket
✅ I have resource for you ~ 1. Remove Unused javascript from WordPress
✅2. How to Reduce Total Blocking Time in WordPress?

Fixing Method 3: With Image Attributes Pro (Alternative)

Image Attributes Pro scans every image on your WordPress website. After that, it automatically updates all missing image attributes required for SEO.

Add the following snippet to the functions.php of your active theme.

/**
 * Add missing image dimensions to image markup
 *
 * @param $match (string) The image HTML markup after the bulk updater has added the necessary attributes.
 *
 * @return $match (string) image HTML markup with dimensions added to it.
 *
 * @author Arun Basil Lal
 * @link https://imageattributespro.com/codex/iaffpro_html_image_markup_post_update/
 */
function prefix_iap_add_image_dimensions( $match ) {
 
          	// Return if the image markup already has image dimensions.
          	if ( ( strpos( $match, "width=" ) !== false ) || strpos( $match, "height=" ) !== false ) {
                         	return $match;
          	}
 
          	// Extract the src from the match.
          	preg_match( '/<img[^>]+src="([^">]+)"/', $match, $src );
 
          	// Get the image dimensions.
          	$dimensions = wp_getimagesize( $src[1] );
 
          	// Add the image dimensions into the image markup.
          	$match = str_replace( '<img', '<img ' . $dimensions[3], $match );
 
          	return $match;
}
add_filter( 'iaffpro_html_image_markup_post_update', 'prefix_iap_add_image_dimensions' );
 

This filter is triggered only when the bulk updater updates the images within the post or product HTML. 

·       Be sure to select Post HTML in the Bulk Updater Settings tab.

·       In the image title settings section make sure, “Post HTML” and “Media Library” are marked

·       Next in the image Alt Text Settings, make sure, “Post HTML” and “Media Library” is marked there as well.

Take a full database backup and then run the Bulk Updater.

Note:  If the image code already has one of these attributes, don’t change it. For instance, if the image code already includes the height, don’t add the width.

Fixing Method 4: CSS Tweaks

Modern web browsers automatically determine an image’s default aspect ratio based on its width and height attributes.

To prevent unexpected layout shifts, developers should set these attributes appropriately. Simply provide the width and height values as usual.

Thanks to the CSS Working Group. Browsers’ user-agent stylesheets will then establish the default aspect ratio based on these attributes.

img {
 aspect-ratio: attr(width) / attr(height);
 }

Before the image has loaded, this calculates an aspect ratio based on the width and height attributes. It offers this information right at the start of the layout computation. When the width of an image is specified (for example, width: 100%), the aspect ratio is utilized to determine the height.

The image aspect ratio modifications have already been implemented in Firefox and Chromium. If your image is within a container, you may use CSS to adjust it to fit the container’s width. To avoid the picture height being a fixed number, we specify height: auto (for example 360px).

img {
 height: auto;
 width: 100%;
 }

This technique is also known as padding. Here’s the fundamental hack about it: padding-top and padding-bottom are based on the parent element’s width.

So, if you had an element that is 1000px wide and a padding-top of 100%, the padding-top would be 1000px.

Isn’t that a perfect square, 1000px × 1000px?

Yes, it is! An aspect ratio!

If we force the height of the element to zero (height: 0;) and don’t have any borders. Then padding will be the only part of the box model affecting the height. At this point, we’ll have our square.

Now imagine instead of 100% top padding, we used 56.25%. That happens to be a perfect 16:9 ratio! (9 / 16 = 0.5625).

Now we have a friendly aspect ratio box that works well in fluid-width environments. If the width changes, so does the height, and the element keeps that aspect ratio.

Does adding explicit width and height to image elements matter?

When you don’t specify the width and height of images on your website, it can lead to some problems:

1. Annoying Layout Shifts

Not having set image dimensions can mess up the way your web page looks and behaves.

Have you ever been on a webpage where you clicked on something, and suddenly, everything moved around? It’s frustrating, right?

This issue, known as Cumulative Layout Shift (CLS), can be especially bothersome on mobile devices, where the screen space is limited.

2. Making Things Smoother

By setting the width and height of your images, you’re helping the web browser reserve the right amount of space.

This means your web page won’t have those annoying layout shifts, and it won’t look “janky” to your users. It also reduces the amount of work the browser has to do, making the whole experience smoother.

3. Avoiding Extra Work

If your images have an “auto” height, the browser doesn’t know the exact size until it downloads the image. This causes extra steps and layout shifts.

To avoid this, make sure to use the “srcset” attribute when your images have different shapes, so they display properly on various devices.

Points to note when specifying width and height

When setting the width and height attributes for an image make sure you follow these notes:

1. Choose the Correct Size

You must specify the dimensions that match the actual size of the image you intend to display. Using values larger than the image’s actual size can lead to a distorted image.

 2. Optimize Image Size

If your picture is too big, shrinking it can make it load faster. Just use image editing software to adjust its size.

3. Maintain Aspect Ratio

To prevent image distortion, maintain the original aspect ratio. In other words, keep the ratio of the width to the height the same as the original image.

FAQ About  Image Elements Do Not Have Explicit Width and Height

Final Thoughts

Fixing images without specified width and height can be tough. Especially on websites with lots of pictures. If you follow speed testing tools’ advice and have some patience, you can handle it yourself. 

This article’s solution works well for small websites and always works for individual pages. If you need to fix lots of images at once, you can try WP Rocket or other image tools mentioned throughout this article.

About Author

Hi, I’m Abdullah – a WordPress performance, core web vitals expert dedicated to making sites fast. After 3 years of optimizing 150+ sites, I’ve cut page load times 50%+ and scored 90+ on PageSpeed.My passion is optimizing your WordPress site for lightning speed and an excellent user experience. With proven expertise in making sites blazing fast, I share tips to boost your site’s performance. Ask me anything! I’m here to help the WordPress community succeed online.

• Facebook
• Twitter
• LinkedIn
• GitHub
• Medium
• Tumblr