image - 带有 srcset 的响应式图像、图片与 img、后备问题

Question

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

我的案例:我几乎所有的图像都使用 100% 的宽度和自动的高度，并且图像容器具有动态大小，例如 30vw 或 40% 等(不确定在这种情况下我是否仍然需要在img 标签)

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

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

也不知道为什么我们需要为最小的图像选择简单的 img src 后备，在这种情况下，如果有人使用 IE 和大屏幕输入，那么图像将始终被像素化。在这些情况下，我宁愿让一些用户等待更长的时间，而不是为他们提供低分辨率的图像。
另外.. 具有后备选项的低分辨率图像，不确定对单个图像 seo 排名有何影响。

Answer 1

您的描述看起来像是响应式图像的常见用例。例如，如果您的图像在大屏幕上以 50% 的宽度显示，而在小于 900 像素的视口(viewport)上以 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>

这种方式支持 <picture>的浏览器和 webp图片选择 image-*.webp 之一支持 srcset 的文件、浏览器和 sizes选择 image-*.jpg 之一文件和所有其他浏览器显示 image-1000.jpg .

这种技术最重要的部分是指定 sizes属性正确，因此浏览器可以做出正确的决定加载哪个图像。您可以在这里找到更多信息: https://ericportis.com/posts/2014/srcset-sizes/

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

您可以省略 <picture>和 <source>元素并通过 HTTPs 在服务器端进行类型切换 Accept标题作为替代。