我想在我的网站上开始使用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><img></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><img></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><img></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><img></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.)
更多推荐
height,width,WebP,example,电脑培训,计算机培训,IT培训"/> <meta name="des
发布评论