响应图像，图片vs img与srcset，后备问题

Question

在阅读了一整天关于一种或另一种方法后，我仍然不确定什么对我来说是最好的，所有的网站都解释了同样的事情，但是当我想知道真正让我担心的事情时，没有人谈论这个。

我的情况：我几乎所有的图像都使用宽度100%和高度自动，图像容器具有动态大小，例如30vw或40%，等等（不确定在这种情况下，我是否仍然需要在img标记中设置高度和宽度值）

如果我想为我的图像和webp格式提供不同的尺寸，并让浏览器决定选择什么，我需要使用什么？

我可以提供没有图片和源标签的webp图像吗？我可以使用图片方法，仍然让浏览器选择显示什么图像吗？

也不确定为什么我们需要为最小的图像选择带有简单img src的回退，在这种情况下，如果有人使用IE和大屏幕进入，那么图像将始终是像素化的。在这种情况下，我宁愿让一些用户等待更长的时间，也不愿为他们提供低分辨率的图像。而且有一个低分辨率的图像与回退选项，不知道如何影响个人图像搜索引擎优化排名。

Answer 1

您的描述看起来像是响应图像的常见用例。例如，如果您的图像在大屏幕上以50%的宽度显示，在小于900px的视口中以100%的宽度显示，您的HTML可能如下所示：

<picture>
    <source
        type="image/webp"
        sizes="(min-width: 900px) 50vw, 100vw"
        srcset="image-500.webp 500w, image-1000.webp 1000w, image-1500.webp 1500w"
    >
    <img
        sizes="(min-width: 900px) 50vw, 100vw"
        srcset="image-500.jpg 500w, image-1000.jpg 1000w, image-1500.jpg 1500w"
        src="image-1000.jpg"
    >
</picture>

这样，支持

此技术最重要的部分是正确指定size属性，以便浏览器能够正确决定加载哪个图像。您可以在此处找到有关它的更多信息：https://ericportis.com/posts/2014/srcset-sizes/

要在“旧”浏览器上显示的图像可以通过src属性自由选择。或者，您可以使用Picturefill或respimage等工具通过JavaScript“聚合”该功能。

您可以省略