Question

我想在我的网站上开始使用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属性的正确位置在哪里？仅使用height元素中的width和<img>属性，即使选择了<source>图像，也能正常工作吗？

Answer 1

是的，使用height元素中的width和<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已关闭。）

在<picture>或其<img/>中设置`width`和`height`属性可以做什么吗？

1 个答案: