Question

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

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

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

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

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

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>

这种支持<picture>和webp图片的浏览器会选择image-*.webp个文件中的一个，支持srcset的浏览器和sizes选择其中一个{ {1}}个文件和所有其他浏览器显示image-*.jpg。

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

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

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

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

1 个答案: