响应式图片，图片与带有 srcset 的 img，回退问题

Question

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

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

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

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

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

Answer 1

您的描述看起来像是响应式图片的常见用例。例如，如果您的图像在大屏幕上以 50% 宽度显示，在小于 900 像素的视口上以 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 图片 select image-*.webp 文件之一，支持 srcset 和 [=15= 的浏览器] select image-*.jpg 文件之一，所有其他浏览器显示 image-1000.jpg.

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

您想要在“旧”浏览器上显示的图像可以通过 src 属性自由 select 编辑。或者你通过 JavaScript 使用 Picturefill or respimage.

之类的工具“polyfill”功能

您可以省略 <picture> 和 <source> 元素，并通过 HTTPs Accept header 在服务器端进行类型切换。

响应式图片，图片与带有 srcset 的 img，回退问题

Responsive image, picture vs img with srcset, fallback issue

fallback

image

srcset

responsive