[Resolved] Image elements don’t have explicit width and height

Home Forums Support [Resolved] Image elements don’t have explicit width and height

Home Forums Support Image elements don’t have explicit width and height

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1678260
    Vera

    Hi,
    the page speed test is warning me that my logo and images within WP Show Posts don’t have explicit width and height set. I saw somewhere else on the forum that you suggested removing the retina logo (I don’t have the retina logo enabled), and for WP Show Posts to add height and width (and I did, but the warning is still there). Can you please help me solve this issue? Thanks!

    #1679089
    David
    Staff
    Customer Support
    #1679755
    Vera

    Hi David, thanks for your reply. However, I am not sure it solves my problem. I don’t have a problem with resizing the images. I have a problem with WP Show Posts images and my header logo not passing Page Speed Insight Test, because the warning they return is “image elements don’t have explicit width and height”. I found another thread with similar problem here: https://generatepress.com/forums/topic/use-explicit-width-and-height-on-image-elements-issue-in-gtmetrix/ . However, the solutions offered there don’t seem to fix the problem for me. I don’t have the retina logo enabled, and I tried adding height and width within WP Show Posts settings, but the warning is still there.
    Thanks again!

    #1679770
    Elvin
    Staff
    Customer Support

    Hi there,

    Let’s break things down a bit to properly address the issue/s.

    While the images are flagged under one issue on Google PSI, There’s actually 2 separate things here.

    One is the theme’s logo.

    Your specific site has 2 logo versions, one for mobile and one for desktop.

    For mobile, you can add the image height and width by filtering it using the generate_mobile_header_logo_output filter.

    See David’s code here:
    https://generatepress.com/forums/topic/how-to-set-height-and-width-for-the-logo-image/#post-1563234

    For the desktop version of the logo, you can add in the height and width attribute by using my snippet here:
    https://generatepress.com/forums/topic/los-elementos-de-imagen-no-tienen-width-y-height-explicitos/#post-1679528

    Now, as for the WP Show Posts images:
    There’s an alpha version in development that reworked how the images are added and resized.
    See changelog here: https://wpshowposts.com/wp-show-posts-1-2-0/

    The beta version you can use on live sites will be released next week.

    As for the current official release (1.1.3):

    The way to go is to NOT use the image width and height fields. As I’ve explained on David’s link, usage of image width and height fields removes the width and height attributes of the image and instead, generates a new image file with a size based on the specified width and height on the image width and image height text field on the WPSP list.

    This causes the “Image elements don’t have explicit width and height” on WPSP. And is actually reworked on the alpha version to prevent this from happening.

    If you wish to resize the image, use CSS rather than the WPSP image height and image width text fields to avoid this issue.

    #1681492
    Vera

    Thanks Elvin! Snippets worked for the logo, and for WPSP I will wait the release of an updated version next week. Thanks again!
    vera

    #1682526
    Elvin
    Staff
    Customer Support

    No problem.

    You can check WPSP’s changelog page from time to time to check if the outdate is up.

    https://wpshowposts.com/category/development/

    #1952590
    dobiart

    Hi,

    I use Niche.
    I’m testing my site at https://developers.google.com/speed/pagespeed/insights/

    In the MOBILE section I receive the same message:

    Image elements do not have explicit width and height
    Set an explicit width and height on image elements to reduce layout shifts and improve CLS.

    You can see it here where I test the page https://gpsites.co/niche/product/patient-ninja/:

    https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgpsites.co%2Fniche%2Fproduct%2Fpatient-ninja%2F&tab=mobile

    How do I fix this problem?

    Thanks!

    #1952751
    Elvin
    Staff
    Customer Support

    Hi dobiart,

    That particular one is an issue with WooCommerce’s single product page gallery on mobile. This can actually be tested by changing to another theme. You’ll find that the same issue persists after changing the theme.

    This is a third-party issue outside of our control, unfortunately. You may have to ask WooCommerce for a workaround for this. 😀

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.