响应式图片断点生成器

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

我承认自己犯过错误,使用响应式图片时,会随机地将高分辨率图像缩小几次,并将这些图像用作 srcset 图片。基本上,这与我对断点的“桌面”、“平板电脑”、“移动设备”思维方式一样。

那么,实现响应式图片的完美方法是什么?理想情况下,我们会发送任何设备所需的精确图像。如果设备/浏览器/设计组合需要图像宽度为 457px,那么在一个完美的世界里,我们会向它发送一个宽度为 457px 的图像。但从许多角度来看(创建、存储、缓存),创建“每个可能的像素宽度都对应一个图像”是不切实际的。

这里有一个折衷方案。响应式图片断点生成器指出:

即使是最现代的响应式网站,也常常难以选择最匹配各种用户设备的图像分辨率。它们要么在图像尺寸上妥协,要么在图像数量上妥协。现在是时候解决这些问题,并开始更数学化地计算图像断点,而不是随意地进行。

它需要诸如断点、分辨率需求、版本之间合理的的文件大小变化以及图像本身等信息来创建所有图像(以及响应式图像标记),以达到这种折衷方案。

直达链接 →