html - 在 或其 中设置 `width` 和 `height` 属性有什么作用吗？

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="/image/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="/image/mraCN.jpg" width="100" height="100" alt="Example">
</picture>

(如果您看到标有“JPEG”的图片，则说明您使用的浏览器不支持 WebP。如果您看不到图片，可能图片托管网站 webpurr.com 已关闭。)