How To Fix Image Elements Do Not Have Explicit Width And Height In WordPress

One common issue that can slow down your WordPress site and cause layout shifts is when image elements don’t have explicit width and height attributes set.

This guide will walk you through why it’s important to fix this issue and how you can easily resolve it to improve your website’s performance and user experience.

Why setting width and height attributes is important

Before diving directly into the solutions, let’s understand why setting explicit width and height attributes for your images is beneficial for your WordPress site:

1. Improves page load time: By specifying the size of images, the browser can allocate space for them even before they’re fully loaded. This prevents the page from rearranging its elements as images load, leading to a faster-perceived load time.
2. Enhances user experience: Explicit dimensions prevent layout shifts, a critical factor in providing a stable and enjoyable browsing experience for the users.
3. Boosts SEO: Search engines, like Google, use page speed and user experience as ranking factors. A stable layout and faster load times can contribute to better search engine rankings.

In the screenshot below, this recommendation frequently appears during performance evaluations conducted with PageSpeed Insights.

Fix the width and height of an image in HTML

A straightforward method involves using the width and height attributes within the img tag to establish the dimensions of an image in HTML in pixels.

For example:

<img src="your-image.jpg" width="300" height="200" alt="image description">

You can change the width and height values according to the preferred dimensions. However, it’s important to note that hardcoding these attributes without proper CSS can lead to issues with image responsiveness, because images need to adapt to various screen sizes and resolutions. Manually setting these attributes without responsive design considerations can cause images to appear distorted or improperly sized on mobile devices or different screen sizes.

Set the height and width using block settings

You can also adjust the width and height of an image by accessing the ‘Block Settings’ panel on the right-hand side and navigating to the ‘Settings’ section.

Once you click an image, you can see and adjust the dimensions by directly inputting specific pixel dimensions in the ‘Width’ and ‘Height’ boxes. Additionally, percentage adjustments are available below.

However, when set to “Auto,” the percentage adjustments allow the image to dynamically resize based on the available space and layout constraints of the webpage. This means that the image will scale proportionally to fit the container or screen width, ensuring optimal display across various devices such as desktops, tablets, and mobile phones.

Manually inputting specific pixel dimensions might not account for the varying screen sizes and resolutions of different devices, potentially leading to images that are too large or too small on certain screens. Leaving the percentage adjustments on “Auto” enables WordPress to handle the resizing automatically.

Easy way to add missing width and height attributes

If you encounter width and height issues across your WordPress website with many images, the easiest way to fix it is by implementing a website accelerator plugin like FastPixel, which offers the feature to address this concern and boost the core web vitals.

Once installed, you can simply navigate to the WordPress admin area > FastPixel > Settings > Images, and tick the “Image Sizes” checkbox to add the missing width and height to image elements.

Conclusion

Setting explicit width and height attributes for image elements in WordPress is a simple yet effective way to improve your website’s loading time, user experience, and SEO.

Whether you prefer manual adjustments, the convenience of a plugin such as FastPixel, ensuring your images are properly configured is essential for a professional and efficient website.