Image elements do not have explicit width and height

 | SubscribeFavorite

Viewing 2 reply threads
  • Author
    Posts
    • #6117REPLY
      [email protected]

      Participant

      I have been trying to find the place where I could define the width and height of images that are added on the template itself, not in WordPress editor. How can I define the width and height of images that are added in the wpo template. the code I see online to put is:
      img src=”example.png” width=”xxx” height=”xxx”
      but I cannot find the place where I can insert the image size. I would like to know how to do that so I can reduce even more the time to load. I looked online but I get all kinds of “complicated” answers, can you help please (no rush, I know you are busy right now). Thank you.

    • #6118REPLY
      [email protected]

      Participant

      oups! looks like the html example actually made a huge blank space in my message… ok I fixed that by removing the <> on the example but I still need to know where is the image source, thank you.

      • #6122REPLY
        Chris F

        Keymaster

        There are 2 ways to implement images to a WPO template. The basic version is to use the “Add Image” module, which allows you to add an image directly from the Media Library, which will be automatically responsive. Height/width attributes are not added when using this method.

        IMPORTANT: There are pros and cons to adding height/width attributes to images, as they are usually responsive, so there is no one single size to note.

        If you do want to add attributes to images, then you should use the Custom HTML module instead. This way you have full control over the image, but have to add it manually from the Media Library, something like:

        <img src="https://domain.com/wp-content/uploads/image.jpg" width="400" height="300" alt="Image">

        You can also make these images responsive by adding an extra class (img-fluid), which would look something like:

        <img src="https://domain.com/wp-content/uploads/image.jpg" width="400" height="300" alt="Image" class="img-fluid">

        Please also be aware that image height/width attributes are a “suggestion” and not a direct part of Google’s performance factors.

        In general, only metrics contribute to your Performance score, not the results of Opportunities or Diagnostics. That said, improving the opportunities and diagnostics likely improve the metric values, so there is an indirect relationship.

        You may also find this helpful:
        https://wordpress.org/support/article/inserting-images-into-posts-and-pages/#image-size