4

我想开始在我的网站上使用 WebP。我正在转换如下所示的代码：

<img src="example.jpg" width="100" height="100" alt="Example">

要编写如下所示的代码：

<picture>
  <source srcset="example.webp" type="image/webp">
  <img src="example.jpg" width="100" height="100" alt="Example">
</picture>

放置width和height属性的正确位置在哪里？即使选择了图像，仅在元素中使用heightandwidth属性是否有效？<img><source>

4

1 回答 1

4

是的，在元素（以及其他任何地方）中使用heightandwidth属性确实可以按预期工作。<img>您无需尝试在<picture>元素上设置任何属性。

运行此代码片段以供证明：

<p><code>&lt;img&gt;</code> without <code>height</code> and <code>width</code> attributes:</p>
<picture>
  <source srcset="https://a.webpurr.com/Ql62.webp" type="image/webp">
  <img src="https://i.stack.imgur.com/mraCN.jpg" alt="Example">
</picture>
<p><code>&lt;img&gt;</code> with <code>height</code> and <code>width</code> attributes:</p>
<picture>
  <source srcset="https://a.webpurr.com/Ql62.webp" type="image/webp">
  <img src="https://i.stack.imgur.com/mraCN.jpg" width="100" height="100" alt="Example">
</picture>

（如果您看到标有“JPEG”的图像，那么您使用的浏览器不支持 WebP。如果您没有看到图像，则可能是图像主机 webpurr.com 已关闭。）

于 2018-01-10T18:21:10.463 回答