在或中设置`width`和`height`属性可以做什么吗？(Does setting `width` and `height` attributes in or its do anything?

在或中设置`width`和`height`属性可以做什么吗？(Does setting `width` and `height` attributes in or its do anything?)

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

I want to start using WebP on my site. I'm converting code that looks like this:

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

To code that looks like this:

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

Where is the correct place to put the width and the height attributes? Does simply using the height and width attributes in the <img> element work, even when a <source> image is selected?

最满意答案

是的，使用<img>元素中的height和width属性（以及其他任何地方）确实可以正常工作。 您无需尝试在<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已关闭。） 
Yes, using the height and width attributes in the <img> element (and nowhere else) does work as intended. You don't need to try to set any attributes on the <picture> element.
 
Run this code snippet for proof:
 
 
 
  
  
<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> 
  
 
 
(If you see the images marked "JPEG", then you're using a browser that doesn't support WebP. If you don't see images, maybe the image host webpurr.com is down.)