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

Question

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

我的情况: 我几乎所有的图像都使用宽度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选择其中一个image-*.jpg文件的浏览器和所有其他浏览器显示image-1000.jpg.

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

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

您可以省略<picture>和<source>元素,并通过HTTPs Accept标头在服务器端执行类型切换.