高像素密度显示屏正迅速成为常态。内容创作者需要适应这一事实。本指南是一份简短的指南，旨在介绍如何在不使用 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 进行上传。请注意，1 倍大小的 PNG 与 2 倍 PNG 之间的大小差异通常很大（在本例中为 52 kB）。不过，就徽标而言，它是您网站的面孔，也是访问者最先看到的内容。如果过度在质量上浪费内容来换取尺寸，它也会成为访问者最后看到的内容！
以下是 Chrome 徽标的所有亮点，其尺寸可缩小至自然尺寸的一半（适用于 2 倍显示屏）：
自然尺寸：512x512px，素材资源尺寸：83 kB，格式：PNG
用于渲染上述内容的标记如下所示：
<img src="chrome2x.png" style="width: 256px; height: 256px;"/>
请注意，我已为图片指定了宽度和高度。这是必要的，因为图片的自然尺寸为 512 像素。这样做也有助于改进性能，因为渲染引擎能够很好地掌握元素的大小，而且无需花费过多精力来计算大小。
一种可能有效的优化是将 24 位 PNG 减少为调色板的 8 位图像。这适用于颜色较少（包含 Chrome 徽标）的图片。您可以使用 http://pngquant.org/ 等工具进行此优化。您可以在这里看到一些条带，但此文件只有 13 kB，与原始的 512x512 PNG 相比，大小节省了高达 6 倍。
自然尺寸：512x512px，素材资源尺寸：13 kB，格式：PNG,
8-bit palette
有多种颜色的图片
我撰写了一篇 HTML5Rocks 文章调查许多不同的自适应图片技术，并围绕压缩 1x 和 2x JPEG 文件以及比较生成的尺寸和视觉质量进行了一些研究。以下是上述文章中的一个此类功能块：
我已按压缩级别（以 JPEG 质量表示）、大小（以字节为单位）标记了图片，以及我对其比较视觉保真度（按数字排名）的主观意见。有趣的是，高度压缩的 2x 图像（标签 3）比未压缩的 1x 图像（标签 4）更小，看起来更美观。换言之，对于第 4 张图片和第 3 张，我们通过将每个维度加倍并显著提高压缩率，成功提高了图片质量，同时将图片大小缩减了 2 kB。
压缩、尺寸和视觉质量
我想更深入地了解压缩级别、图片尺寸、视觉质量和图片大小之间的权衡。我基于上述研究开展了一项研究，该假设如下：
假设
经过足够的压缩后，采用其他（更低）压缩时，2 倍大小的图片看起来就相当于 1 倍大小的图片。但是，在这种情况下，高度压缩的 2x 图片要比 1x 图片小。
流程
- 假设有一个 2x 的图像，生成 1x1。
- 在不同级别压缩两张图片。
- 创建一个并排显示这两张图片的测试页。
- 在两个集合中找到图片等效的位置。
- 请注意等效的图片大小和压缩级别。
- 在 1x 和 2x 显示屏上都尝试一下。
我构建了一款并排图片比较应用，类似于 Lightroom 的比较视图。这样做的目的是并排显示 1 倍图像和 2 倍图像，但您也可以放大图像的任何部分以获取更多详细信息。您还可以在 JPEG 和 WebP 格式之间进行选择，并更改压缩质量，以查看文件大小和图片质量比较结果。其思路是针对多张图片调整设置，找出您能接受的压缩质量、缩放和格式与图片质量权衡因素，然后对所有图片使用该设置。
该工具本身可供您试用。您可以通过选择要放大的子区域来放大图片。
按需
我要说的是，图片质量是一个主观因素。此外，您的特定用例可能会决定您的优先级在视觉保真度与文件大小范围内所处的位置。此外，不同类型的图片特征对缩放和压缩质量的反应有所不同，因此通用解决方案不一定适用于此类型。该工具的作用是帮助您建立对图片质量压缩、缩放和格式的直观理解。
从使用图片缩放器开始，我很快就能看出几个方面。首先，相较于 quality=90
dpr=1x 图片，我更倾向于使用 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 开发者只需生成 2 倍的素材资源，并在 DOM 中正确调整图片大小即可。
如需了解更多信息，请参阅 Scott Jehl 有关类似主题的文章。希望图片看起来清晰，并减少移动数据流量消耗！