[Resolved] Image elements do not have explicit width and height

[Charbel]

Hello @David,

Hope all is well.

Could you please help in solving the Home page images issue for WP Show Posts?

Image elements do not have explicit width and height

Google PageSpeed Insights is complaining about all the 11 images. I am already using WP Show Posts Version 1.2.0-alpha.3.

I am also using WP Rocket with Image Dimensions (Add missing image dimensions) enabled, but the issue still persists.

Your help is highly appreciated.

Homepage: https://charbelnemnom.com

Thank You!
-Charbel

[Elvin]

Hi there,

Can you share with us your image settings for the list wpsp-18404?

Did you have an image width and height value assigned to it prior to updating to 1.2.0-alpha.3? Let us know.

[Charbel]

Hello @Elvin,

Thank you for your kind support.

Yes, I remember that I have an image width and height prior to updating to 1.2.0-alpha.3 but it’s the same to below settings. In fact, Codeable did the migration of my site so I can’t confirm 100%.

Here are the image settings for the list wpsp-18404.

Image width (px) = 400
Image heights (px) = 225
Image alignment = Center
Image location = Above title

Could you please advise?

Thank You, Elvin!
-Charbel

[Elvin]

Yes, I remember that I have an image width and height prior to updating to 1.2.0-alpha.3 but it’s the same to below settings. In fact, Codeable did the migration of my site so I can’t confirm 100%.

Ah i see. Can you remove the image width and height values? That’s actually the one causing the issue. The older version of WPSP removes the attribute and directly applies the cropping/resizing on the image. You can actually see the img src if you inspect the page. The image paths have 400×225 suffix on them.

WPSP 1.2.0-alpha.3 changed how the image sizing is done because the old one causes this exact issue.
See changelog here- https://wpshowposts.com/wp-show-posts-1-2-0/

The preferred way on changing image size on the newest WPSP is by adding an image size and use it’s name on the “Image size” text field.

Example way of adding an image:

add_action( 'init', function() {
    add_image_size( 'wpsp-image', 400, 225, true );
} );

You then use wpsp-image on the Image size field.

Note: “Image size” field replaced image height and image width field on 1.2.0, but is still kept if your WPSP list had one on the previous version. Removing the Image Height and Image Width values and updating the list should replace the old field with the new Image size field.

[Charbel]

Thank you @Elvin, much appreciated!

I have removed the image width and height values from wpsp-18404, and the issue (Image elements do not have explicit width and height) is resolved on Google PageSpeed Insights.

However, now I am getting another recommendation about properly size images. Those are the same images displayed in WPSP.

I followed your guidance, by adding this code to my child theme functions.php

add_action( 'init', function() {
    add_image_size( 'wpsp-image', 400, 225, true );
} );

And then I updated my wpsp-18404 by adding wpsp-image on the Image size field.

I cleared the cache and still GPSI suggesting to properly size my images.

Could you please help?

Many Thanks!

[Elvin]

You need to regenerate the image after adding the image size. WordPress doesn’t automatically generate it for images uploaded prior to adding that image size. 🙂

You can do it with this plugin.
https://wordpress.org/plugins/regenerate-thumbnails/

[Charbel]

Thank you @Elvin for the tip!

Finally, this issue is resolved now. GPSI is happy 🙂

I have regenerated all my Thumbnails by using reGenerate Thumbnails Advanced by Short Pixel. I use their image optimizer plugin as well.

https://wordpress.org/plugins/regenerate-thumbnails-advanced/

Now, if I understood well. Every new image that I upload, it will be set by GeneratePress Theme based on the function that we set 400×225, right? so nothing to change afterward.

Thank You!

[Elvin]

Now, if I understood well. Every new image that I upload, it will be set by GeneratePress Theme based on the function that we set 400×225, right? so nothing to change afterward.

Not by the theme but by the PHP snippet you’ve used. It’s a WordPress core function. It’s theme independent. It will work regardless of what theme you’re using.

And yeah, after applying the snippet, all the images uploaded should generate a size for the one you’ve added.

[Charbel]

Thank You @Elvin, much appreciated!

[Elvin]

No problem. Glad to be of any help. 🙂

[Author]

Posts