[Fix] Image Elements do not have explicit width and height in GeneratePress

In this tutorial, we are going to fix Image Elements do not have explicit width and height in GeneratePress WordPress Theme.

Basically, when you test a website in Google Page Speed Insights to meet the requirements for core web vitals, you may see the report to fix the image dimension.

The width and height is the common issue you get to see in every WordPress Theme and you may have seen this issue in GeneratePress Theme too.

As you know I often write GeneratePress Tutorials on my blog and here is another tutorial where we are going to optimize generatepress theme by fixing the height and width issue. This is the common issue that blogger face while testing their sites in various page speed testing tools.

Fix Image Elements do not have explicit width and height in GeneratePress

Also, learn to solve Links Do Not Have a Discernible Name in GeneratePress and other WordPress Themes.

Fix Image Elements do not have explicit width and height
Set Height and Width for GeneratePress Logo
Specify Width and Height in Sidebar widget
Set Image Width and Height in WP Show Posts
At the End

Fix Image Elements do not have explicit width and height

Here we are going to fix the image dimension that occurs over different parts of the generatepress theme like in the logo section, in related posts, while setting up widgets in the sidebar, etc.

Image elements do not have explicit width and height

If you are using JPG or PNG logo then you have to set width and height using CSS code in GeneratePress Theme.

Go to Appearance > Customize > Additional CSS and add the following code.

img.header-image.is-logo-image {
	height: 65px;
	width: 160px;
}

If you are using SVG Logo then you have to specify width and height using Code Snippets i.e. you need to add a code in functions.php.

You can use the Code Snippets plugin or you can directly paste the code into the child theme’s functions.php.

add_filter('generate_logo_attributes', function($output){
	$add_attr = array(
				'width' => '160px',
				'height'   => '65px',
			);
	$new_output = array_merge($output,$add_attr);
	return $new_output;
});

Don’t Miss: GeneratePress Review

Specify Width and Height in Sidebar widget

Let’s say you are using a sidebar widget to display banners like promotional banners to advertise the products or using different thumbnails.

Some of you may have faced the width and height issue and here we are going to fix it.

Let’s go step by step first go to Appearance > Widgets.

Here, I am going to use a text editor to add an image with a link to promote one of my affiliate programs (Cloudways) using one of the banners.

While using the image banner in the widget section, you have to specify width and height as shown below.

Set Image width and height in Text Widget

Set Image Width and Height in WP Show Posts

If you are using the WP Show Posts plugin to show related posts, featured posts, or recent posts in the sidebar or after content, etc. then you may show it with or without images.

Let’s say you are adding related posts in GeneratePress with a thumbnail after your content in a single post.

Then to set image width and height, go to WP Shows Posts > Edit Post Lists > Images > Specify width and height as shown in the image below.

WP Show Posts Images Sections

At the End

If you are having issues with width and height in your WordPress website then I suggest you try a caching plugin that allows you to set explicit width and height.

Here, I would suggest you try the WP Rocket plugin which offers inbuilt features to set Image Dimension with many more awesome features to improve core web vitals.

Get WP Rocket

WP Rocket plugin helps to add missing width and height attributes to images, prevent layout shifts, and get a good score in Google Page Speed Insights.

After installing go to WP Rocket > Media > Image Dimensions > Add missing image dimensions.

Add missing width and height attributes to images using WP Rocket

I hope after reading this tutorial, you are going to fix the Image Elements do not have explicit width and height issues in GeneratePress Theme. The WP Rocket solution works for other WordPress themes too, so give it a try.

Happy Optimizing!!!

Share:
Recommended Reading...

How to Add Meta Description as Excerpt in GeneratePress?

How to Add ALT Text to Gravatar Images in GeneratePress?

How to Add Phone Number and Email in GeneratePress Header?

[Fix] Links Do Not Have a Discernible Name in WordPress

How to Switch your WordPress Theme to GeneratePress?

How to Make Entire Block Clickable in GeneratePress?

How to Add GenerateBlocks Pattern Library in GeneratePress?

How to Migrate WP Show Posts Plugin to GenerateBlocks?

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, and Blogging. I mostly publish tutorials on GeneratePress, Astra, Kadence, and GenerateBlocks.

21 thoughts on “[Fix] Image Elements do not have explicit width and height in GeneratePress”

  1. Aapki website par jo email subscription box hai please uska tutorial lekar aao. We are waiting for a long time.

    Reply

  2. Hello.

    Thank you very much. Very usefull post. I also use a plugin that add dimensions to all the images.

    By the way, do you know how to fix “Preload Largest Contentful Paint image” problem ? Generate Press is the first WordPress theme that have this problem. Never seen it before with other themes.

    Reply

  3. Thank You, Dear!! Can you tell me about something “How to Reduce CLS issues, as show in the Page Speed Insights”

    Reply

  4. Thank you for such an informative article. I am in Astra Free (Child) and Elementor Pro facing the exact issue. WP-Rocket excludes rectifying missing width and height attributes to SVG images. And, I really don’t want to use a plugin. Will the same filter you suggested to add to functions.php work for Astra Theme?

    Reply

  5. img.header-image.is-logo-image {
    height: 65px;
    width: 160px;
    }

    Is this CSS code applicable for other themes like Asona?
    If I try it once to check whether it’s working or not, will it break the theme?

    Reply

    • Hi Subodh,
      It may not work since the CSS classes is/may be different, Use Inspect Elements feature available in your browser and fix it.
      Thanks

      Reply

  6. Hi,
    even after adding your code for my svg logo, lighthouse (mobile) is still saying there is no W & H. any idea? thanks
    surf-atlantic.com

    Reply

    • Hi Manish,
      I think you are using wrong code or settings in the code may be different than desired one.
      Please check it and try again.
      Thanks

      Reply

  8. hello dear, I can’t fixed the image size of featured image archive page/home page in generatepress theme.

    which image size are you useing? can you share the size, I’m useing generatepress marketer tamplate. I want to show home page image size like wplogout computer and mobile. thanks

    Reply

  9. i am using generatepress and using wp rocket also but still i get the following error

    “Set an explicit width and height on image elements to reduce layout shifts and improve CLS”

    my site url is sublimationtools.com

    what should i do to fix this issue ?

    Reply

Leave a Comment