代码之家 › 专栏 › 技术社区 › Bram Vanroy

结合HiDPI监视器了解srcset和大小

srcset responsive-images image html

Bram Vanroy · 技术社区 · 6 年前

我已经进入CSS有一段时间了,但是 srcset 和 sizes 对于图像元素,我感到困惑。这里有一个我认为可行的例子。

<img alt="Background image flowers"
    srcset="img/flowers-480.jpg 480w,
            img/flowers-480@2x.jpg 480w 2x,
            img/flowers-768.jpg 768w,
            img/flowers-768@2x.jpg 768w 2x,
            img/flowers-960.jpg 960w,
            img/flowers-960@2x.jpg 960w 2x,
            img/flowers-1280.jpg 1280w,
            img/flowers-1280@2x.jpg 1280w 2x" 
    sizes="(max-width: 1279px) 100vw,
           (min-width: 1280) 1280px"
    src="img/flowers-960.jpg">

这样做的想法是,在视口宽度达到1280px或更宽之前,让图像完全覆盖视口,然后图像的大小将是固定的。然而,为了补偿较高的DPI设备,我认为建议添加DPI描述符(1.5x、2x等),如建议的那样 here 和 here .

我认为上面的代码应该做的是:

检查大小,查看图像的预期大小(如果给出了相对单位,如%或vw,则计算像素宽度)
在srcset width中查找最接近该宽度的图像
从这些图像中,筛选出DPI描述符最接近设备DPI的图像

然而,当我将其通过验证器时,我得到以下错误:

错误 :元素img上的属性srcset的值错误:图像的宽度 img/flowers-480@2x.jpg 与图像的宽度相同 img/flowers-480.jpg

很明显,我完全没有理解srcset和size是如何工作的。我做错了什么?

5 回复 | 直到 6 年前

Amit 6 年前

定义见 MDN 对于 <img srcset="..."> :

每个字符串由以下内容组成:

指向图像的URL,可选为空格,后跟一其中:

宽度描述符,或直接为正整数后跟' w '. 宽度描述符除以源大小在中给出 sizes 属性计算有效像素密度。

像素密度描述符,为正浮点数直接后跟' x '.

你试图两者兼用,这是违法的。

Ingo Steinke 2 年前

根据MDN,“在同一srcset属性中混合宽度描述符和像素密度描述符是不正确的。重复的描述符(例如,同一srcset中的两个源都用‘2x’描述)也是无效的。”

你有 2x 列出4次。那是无效的。

以下是MDN的一个示例:

示例4:使用 srcset 和 sizes 属性

这个 src 在支持 srcset 使用“w”描述符时。当 (max-width: 600px) 介质条件匹配时,图像将为200px宽,否则将为50vw宽(视口宽度的50%)。

<img src="clock-demo-thumb-200.png" 
    alt="Clock" 
    srcset="clock-demo-thumb-200.png 200w,
    clock-demo-thumb-400.png 400w"
    sizes="(max-width: 600px) 200px, 50vw">

vbarinov 3 年前

对于HPDI设置和图像响应大小的组合,您应该实际使用 <picture> 有几个 <source> 还有一个退路 <img> 元素。

详细信息为 in this article .

Ingo Steinke 2 年前

“艺术指导用例”,链接 @vbarinov's answer ,引自 developers.google.com ,显示了如何将宽度和像素密度结合起来作为加载和显示图像源的标准:

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

在至少800像素宽的视口中, head.jpg 应在单个密度显示器上显示 head-2x.jpg 应以双倍或更高密度显示在显示器上。

800像素以下的视口应显示单密度显示器,但宽度至少为450像素 head-small.jpg 虽然 head-small-2x.jpg 用于双倍或更大密度。

中的回退映像定义 <img> tag有另一个 srcset 定义了双密度版本( head-fb-2x.jpg )对于宽度小于450像素的视口。

不支持源集或图片元素的单密度设备和浏览器将退回显示 head-fb.jpg .

在更复杂的场景中,我们还可以添加其他图像格式,以利用 webp 压缩,同时提供 jpg 不带浏览器的版本 webp 支持

<picture>
  <source media="(min-width: 800px)" srcset="head.webp, head-2x.webp 2x" with="800" height="941">
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x" with="800" height="941">
  <source media="(min-width: 450px)" srcset="head-small.webp, head-small-2x.webp 2x" width="800" height="941">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x" width="800" height="941">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" width="400" height="471" alt="a head carved out of wood">
</picture>

这是一个 codepen 这是一个复杂的例子。

serraosays 2 年前

到2022年,我认为假设高DPI屏幕并利用 srcset :

<img alt="Background image flowers"
  srcset="img/flowers-480.jpg 480w,
          img/flowers-768.jpg 768w,
          img/flowers-960.jpg 960w,
          img/flowers-1280.jpg 1280w" 
   sizes="(max-width: 1279px) 100vw,
          (min-width: 1280) 1280px"
     src="img/flowers-960.jpg">