使用 CSS 响应式图像宽度和高度以及 Google 结构化数据建议

Question

Google说的是把一个img的宽高放在html里比较好："A web browser can begin to render a page even before images are downloaded"

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

但是，如果 img 在响应式页面中怎么办？
我没有给出任何值，并且 img 运行良好并适应任何尺寸。但是，Google结构化数据测试工具报错："A value for the width field is required"
https://search.google.com/structured-data/testing-tool

我试着给那个值：

<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg"
width="100%" height="auto">

示例如下：JSFiddle

它响应迅速并且具有价值。错误消失了。但是我读到 Google 需要数值。

如何在响应式页面中设置 img 的宽度和高度？
我想始终建议使用结构化数据。因此，我必须考虑 Google 测试工具所说的内容。我说得对吗？

Answer 1

只需使用 css 而不是属性：

img {
  width: 100%;
  height: auto;
}

<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg">

您参考的文章说：

Specify a width and height for all images. A web browser can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. Specifying these dimensions can speed up page loading and improve the user experience. For more information about optimizing your images, see Optimizing Web Graphics on the site Let's Make the Web Faster.

所以以像素为单位指定尺寸的原因是浏览器在加载图像本身之前会知道图像尺寸。如果每个图像都是唯一的并且占据了它需要的所有位置，那么在 css 中指定它们是没有意义的。现在您将一个值设置为 auto。使用 auto 浏览器必须获取图像，然后才能计算其尺寸比并使用它。没有任何理由使用属性。

Answer 2

最好通过 css 样式 sheet 完成，因为图像的宽度和高度标签通常被认为是不好的做法。

.imageclass{
  width: 100%;
  max-width: 150px; /* whatever size is the biggest that you want */
  height:auto;
}

<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" class="imageclass" />

Answer 3

正如 Unor 所说 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.

所以我可以像往常一样将响应 css 放在 css 文件中：

img {
  width: 100%;
  height: auto;
}

在 html 中，对于结构化数据，我必须以像素为单位给出宽度和高度。真实像素，正如我在 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>

使用 CSS 响应式图像宽度和高度以及 Google 结构化数据建议

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

html

css

structured-data