混合 srcset 和图片以获取响应式图像答案

【问题标题】：Mixing srcset and picture for responsive images混合 srcset 和图片以获取响应式图像
【发布时间】：2015-01-23 07:53:28
【问题描述】：

在我的工作中，我们有自己的框架，并且我们正在尝试寻找实现响应式图像的最佳方式。图片是从后端代码生成的，我们希望有一个单一控件来解决所有用例。

由于 srcset 似乎是响应式图像的最佳解决方案，而 Picture 似乎可以解决另外两种情况（艺术指导和 WebP 和 Jpeg XR 等现代图像格式），我们想看看我们是否可以将它们结合起来。强>

由于图片元素主要与内部带有媒体查询的元素一起使用，因此它是指示浏览器在满足某些条件时使用它。

Srcset 然而让浏览器选择图片基于一些计算。

是否有可能在图片元素中将选择保留给浏览器？

例如这样的。

<picture>
    <source sizes="(min-width: 800px) 50vw, 100vw" srcset="small.webp 100w, medium.webp 200w, large.webp 300w">
    <source sizes="(min-width: 800px) 50vw, 100vw srcset="small.JPG 100w, medium.JPG 200w, large.JPG 300w">

    <img src="small.jpg" alt="Some image" />
</picture>

希望有任何帮助:)

【问题讨论】：

简短回答：是的。使用 type="image/webp"
这里有一个例子：github.com/aFarkas/respimage/tree/stable/plugins/typesupport

标签： html image responsive-design picturefill srcset

【解决方案1】：

你是对的。第一个sn-p是对的：

   <source sizes="(min-width: 800px) 50vw, 100vw" srcset="small.webp 100w, medium.webp 200w, large.webp 300w">

第二个不是：

<source sizes="(min-width: 800px) 50vw, 100vw srcset="small.JPG 100w, medium.JPG 200w, large.JPG 300w">

您还可以使用源元素中的 type 属性来找出浏览器对该图像类型的支持。像这样的：

<picture>

<source media = "(max-width: 30em)" type="image/vnd.ms-photo" srcset="images/small/space-needle.jxr 1x, images/small/space-needle-2x.jxr 2x, images/small/space-needle-hd.jxr 3x >
<source media = "(max-width: 30em)" type="image/jpg" srcset="images/small/space-needle.jpg 1x, images/small/space-needle-2x.jpg 2x, images/small/space-needle-hd.jpg 3x >
<img src="space-needle.jpg" alt="Space Needle">

</picture>

更多详情请见here。

【讨论】：