設置`width`和`height`屬性 <picture> 或者它的 <img> 做任何事情？

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屬性的正確位置在哪里？ 是否只使用<img>元素中的height和width屬性，即使選擇了<source>圖像？

Answer 1

是的，使用<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已關閉。）