[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 in my blog and here is another tutorial where we are going to optimize generatepress theme by fixing the height and width issue.

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

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 widget 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 in 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 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 image below.

WP Show Posts Images Sections

At the End

If you are having issue with width and height in your WordPress website then I suggest you to try caching plugin that offers 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.

WP Rocket plugin helps to add missing width and height attributes to images, prevent the 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 issue in GeneratePress Theme. The WP Rocket solution works for others WordPress Theme too, so give it a try.

Happy Optimizing!!!

Share:

GET 100+ FREE SEO TOOLS

Quickly access over 100+ popular SEO/Marketing tools to Boost your website traffic.

Thank you for subscribing. Check your Email(Didn't receive? check Spam Folder)

Something went wrong.

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

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

Leave a Comment