高像素密度显示屏正在迅速成为常态。内容创作者需要适应这一事实。这是一份简短的指南，介绍了如何在不使用 polyfill、JavaScript、CSS 黑客行为以及尚未完全实现的浏览器功能的情况下，在网络上提供高质量的图片。简而言之：无需对工作流程进行重大更改。
如今，响应式图片提案有很多，其中很多都涉及 Web 开发者的重大更改。标准跟踪的 srcset
<img> 属性难以实现，尤其是在 srcset 额外基于视口进行选择时较为复杂：
banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x
尽管 image-set CSS 属性仅使用 devicePixelRatio 来决定加载哪张图片，但它仍会迫使开发者为每张图片编写大量额外的标记。
其他方案（例如 <picture> 元素）则更加冗长。此外，它们不是标准轨道，因此它们的普遍可用性甚至远远超过 srcset 属性。JavaScript 和服务器端解决方案是唯一的其他替代方案，但这些方法各有缺点，如其他文章中所述。
本文将介绍网络上常见图片的几种用途，并提出适用于高像素密度屏幕以及普通屏幕的简单解决方案。出于本讨论的目的，任何报告 window.devicePixelRatio 大于 1 的设备都可以被视为高 DPI，因为这意味着 CSS 像素与设备像素不同，并且图片被放大。
以下是一些摘要：
- 如果可能，请使用 CSS/SVG 而不是光栅图像。
- 默认使用针对高密度显示屏优化的图片。
- 对于简单的绘图和像素风图片（例如徽标），请使用 PNG。
- 对色彩丰富的图片（例如照片）使用压缩 JPEG。
- 请务必为所有图片元素设置明确的尺寸（使用 CSS 或 HTML）。
简单的绘图和像素艺术
通常，使用 CSS 功能或 SVG 可以完全避免上传小图片。无需为圆角使用图片，因为 border-radius CSS 属性受到广泛支持。同样，自定义字体也受到广泛支持，因此不建议使用“图片”文本。
不过，在某些情况下（例如徽标），图片可能是唯一的解决方案。例如，此 Chrome 徽标的自然尺寸为 256x256。在 Retina 显示屏上，您会看到对角线和曲线处的线条锯齿化，看起来很粗糙，尤其是与清晰呈现的文字相比：
自然尺寸：256x256px，素材资源大小：31 kB，格式：PNG
已确信？很好。现在，我们使用高密度图片。您可能会想将徽标存储为 JPEG 以节省空间，但这可能不是一个好主意，因为以有损格式保存徽标和其他图形往往会产生伪影。在此示例中，我使用非常高的压缩来夸大了问题，但注意到了渐变上的条带、白色背景上的斑点以及混乱的线条：
自然尺寸：512x512px，素材资源大小：13 kB，格式：JPEG
对于相对较小的图片，要使用 2x PNG。请注意，1x 和 2x PNG 之间的大小差异通常很大（在本例中为 52 KB）。但是，如果是徽标，则表示它是您网站的外观，也是访问者最先看到的内容。以过多的质量换取尺寸，这也将成为访问者最后看到的内容！
下面是 Chrome 徽标的完整图案，在 2x 显示屏上，其尺寸缩小为自然尺寸的一半：
自然尺寸：512x512px，素材资源尺寸：83 kB，格式：PNG
用于实现上述呈现的标记如下所示：
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
请注意，我已指定图片的宽度和高度。这是必要的，因为图片的自然大小为 512 像素。这对性能也很有好处，因为渲染引擎可以很好地掌握元素的大小，不需要太费力地计算它。
一种可行的优化措施是将 24 位 PNG 减少为调色板的 8 位 PNG。这适用于颜色较少的图片（包括 Chrome 徽标）。要进行此优化，您可以使用 http://pngquant.org/ 等工具。您可以看到此处有点带状纹理，但此文件只有 13 KB，与原始 512x512 PNG 相比，其大小缩减了 6 倍。
自然尺寸：512x512px，素材资源尺寸：13 kB，格式：PNG,
8-bit palette
颜色丰富的图片
我撰写了一篇 HTML5Rocks 文章，介绍了多种不同的响应式图片技术，并围绕压缩 1x 和 2x JPEG 进行了一些研究，比较了压缩后的大小和视觉质量。下面是上文中的一个此类功能块：
我为图片添加了标签，其中包括压缩级别（由 JPEG 质量表示）、大小（以字节为单位），以及我对其视觉保真度（按数字排名）的主观看法。有趣的是，高度压缩的 2 倍图片（标记为 3）比未压缩的 1 倍图片（标记为 4）尺寸更小，并且看起来更好。换言之，在图片 4 和 3 之间，我们已通过将每个维度加倍并显著提高压缩率来提高图片质量，同时将大小减小 2 kB。
压缩、尺寸和视觉质量
我想更深入地了解压缩级别、图片尺寸、视觉质量和图片大小之间的权衡。我基于上述研究进行了一项研究，并做出以下假设：
假设
压缩到足够程度后，2x 图像在某种其他（较低）压缩率下看起来将与 1x 大小的同一张图像一样。不过，在本例中，高度压缩的 2x 图片的大小将小于 1x 图片。
流程
- 给定 2x 图片，生成 1x 图片。
- 以不同级别压缩这两张图片。
- 创建一个并排显示这两组图片的测试页。
- 在两个图片集中找到图片等同的位置。
- 请注意等效的图片大小和压缩级别。
- 请在 1x 和 2x 显示屏上都试用一下。
我构建了一个类似于 Lightroom 的“比较”视图的并排图片比较应用。其目的是并排显示 1 倍和 2 倍的图片，但也允许您放大图片的任何部分以获取更多详细信息。您还可以选择 JPEG 或 WebP 格式并更改压缩质量，以查看文件大小和图片质量比较情况。具体方法是，针对多张图片调整设置，找出您能接受的压缩质量、放大和格式与图片质量之间的权衡，然后将该设置应用于所有图片。
该工具本身可供您体验。您可以通过选择要放大的子区域来放大图片。
分析
我先说一下，图片质量是主观的。此外，在视觉保真度与文件大小的范围内，您的优先级可能取决于具体用例。此外，不同类型的图片特征对缩放和压缩质量的反应也不同，因此万能解决方案在这里不一定适用。该工具旨在帮助您直观地了解图片质量压缩、缩放和格式。
在使用图片缩放工具时，我很快发现了一些问题。首先，我更喜欢 quality=30 dpr=2x 图片，因为它能提供更多细节。这些图片的文件大小也相当（在飞机场景中，压缩后的 2x 图片为 76 KB，而未压缩的 1x 图片为 80 KB）。
此规则的例外情况是具有梯度的高度压缩 (quality<30) 图像。这类图片往往会出现色带，无论图片尺寸如何，这种情况都很糟糕。该工具中提供的鸟类和汽车示例就是这方面的例子。
WebP 图片看起来比 JPEG 更清晰，尤其是在低压缩级别下。这种色条似乎没有什么问题。最后，WebP 图片的体积要小得多。
注意事项
让图片在高密度显示屏上呈现良好的显示效果只是屏幕差异导致图片相关问题的一半。在某些情况下，您可能需要根据视口尺寸提供完全不同的图片。例如，奥巴马的头像可能适合手机大小的屏幕，但他的头前和身后的旗帜可能更适合用于笔记本电脑显示屏。
我故意避开了这个“艺术指导”主题，以便专注于高 DPI 图片。此问题可以通过许多不同的方法解决：使用媒体查询和背景图片、通过 JavaScript、通过 image-set 等一些新功能，或者在服务器上。适用于可变像素密度的高 DPI 图片中介绍了此主题。
最后，我会回答几个待解决的问题：
- 高压缩率对性能的影响。解码高度压缩的图片会有什么后果？
- 在 1x 显示屏上加载 2x 图片时，必须缩小图片大小会对性能造成什么影响？
总而言之，请选择使用 CSS 和 SVG，而不是光栅图片。如果必须使用光栅图片，请为颜色较少且包含许多纯色的图片使用 PNG，并为包含许多颜色和渐变的图片使用 JPEG。这种方法的一大优势在于，您的标记几乎保持不变。Web 开发者只需生成 2x 素材资源，并在 DOM 中正确调整图片大小即可。
如需进一步了解，请参阅 Scott Jehl 关于类似主题的文章。祝您的图片清晰锐利，移动流量用量低！