Nrc Nrc - 1 year ago 126
CSS Question

using CSS Responsive Image width and height with Google Structured Data recommendations

Google says that it is better to put the width and height of an img in the html: "A web browser can begin to render a page even before images are downloaded"

See Here

<img src="some-address.jpg" width="20px" height="20px">

But, what if the img is in a responsive page?

I did not give any value and the img works well and adapts to any size. But, then the Google testing tool for structured data gives an error: "A value for the width field is required"

I tried to give that values:

<img src=""
width="100%" height="auto">

Here is the example: JSFiddle

It is responsive and it has the values. The error goes away. But I have read that Google requires numeric values.

How to put the width and height of an img in a responsive page?

I suppose that the use of structured data is always recommended. So, I must take into account what the Google testing tool says. Am I right?

Nrc Nrc
Answer Source

As Unor says here link to a another question’s height/width properties are not for stating in which dimension the image should be displayed, but which dimension the image file has.

So I can put the responsive css as ususal in the css file:

img {
  width: 100%;
  height: auto;

In the html, with structured data I have to give the width and height in px. The real pixels, as I can see in Photoshop:

 <div itemprop="image" itemscope itemtype="">
    <img src="some-address.jpg"/>
    <meta itemprop="url" content="some-address.jpg">
    <meta itemprop="width" content="20">
    <meta itemprop="height" content="20">
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download