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"
<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"
https://search.google.com/structured-data/testing-tool
I tried to give that values:
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg"
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?
As Unor says here link to a another question
Schema.org’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="https://schema.org/ImageObject">
<img src="some-address.jpg"/>
<meta itemprop="url" content="some-address.jpg">
<meta itemprop="width" content="20">
<meta itemprop="height" content="20">
</div>