如果您确定图像是正确选项，则应仔细选择适合作业的图像类型。
图像的分类
- 矢量图形使用线、点和多边形来表示图像。
- 光栅图形通过对矩形网格内每个像素的单个值进行编码来表示图像。
每种格式都有自己的优缺点。矢量格式非常适合由简单几何形状（如徽标、文本或图标）组成的图像。它们在每个分辨率和缩放设置下都能提供清晰的结果，这使它们成为需要以不同尺寸显示的高分辨率屏幕和资产的理想格式。
然而，当场景很复杂（例如，一张照片）时，矢量格式就不够用了：描述所有形状的 SVG 标记数量可能非常高，而且输出可能看起来仍然不“逼真”。在这种情况下，您应该使用光栅图像格式，例如 PNG、JPEG 或 WebP。
光栅图像不具有分辨率或缩放无关的良好属性——当您放大光栅图像时，您会看到锯齿状和模糊的图形。因此，您可能需要以各种分辨率保存光栅图像的多个版本，以便为您的用户提供最佳体验。
高分辨率屏幕的影响
有两种不同类型的像素：CSS 像素和设备像素。单个 CSS 像素可能直接对应于单个设备像素，也可能由多个设备像素支持。重点是什么？嗯，设备像素越多，屏幕上显示内容的细节就越精细。
CSS 像素和设备像素之间的区别。
高 DPI (HiDPI) 屏幕会产生漂亮的效果，但有一个明显的权衡：图像资源需要更多细节才能利用更高的设备像素数。好消息是，矢量图像非常适合这项任务，因为它们可以以任何分辨率渲染并获得清晰的结果——渲染更精细的细节可能会产生更高的处理成本，但基础资源是相同的，并且与分辨率无关.
另一方面，光栅图像带来了更大的挑战，因为它们以每个像素为基础对图像数据进行编码。因此，像素数越大，光栅图像的文件大小就越大。例如，让我们考虑以 100x100 (CSS) 像素显示的照片资产之间的差异：
屏幕分辨率 | 总像素 | 未压缩的文件大小（每像素 4 个字节） |
1x | 100 x 100 = 10,000 | 40,000 字节 |
2x | 100 x 100 x 4 = 40,000 | 160,000 字节 |
3倍 | 100 x 100 x 9 = 90,000 | 360,000 字节 |
当我们将物理屏幕的分辨率提高一倍时，像素总数增加了四倍：水平像素数增加一倍，垂直像素数增加一倍。因此，“2x”屏幕不仅增加了一倍，而且使所需像素数量增加了四倍！
那么，这在实践中意味着什么？高分辨率屏幕使您能够提供精美的图像，这可能是一项出色的产品功能。但是，高分辨率屏幕也需要高分辨率图像，因此：
- 尽可能选择矢量图像，因为它们与分辨率无关并且始终提供清晰的结果。
- 如果需要光栅图像，请提供响应式图像。
不同光栅图像格式的特点
除了不同的有损和无损压缩算法外，不同的图像格式还支持不同的功能，例如动画和透明 (alpha) 通道。因此，为特定图像选择“正确格式”是所需视觉效果和功能要求的结合。
格式 | 透明度 | 动画片 | 浏览器 |
PNG | 是的 | 不 | 全部 |
JPEG格式 | 不 | 不 | 全部 |
网页版 | 是的 | 是的 | 所有现代浏览器 |
有两种普遍支持的光栅图像格式：PNG 和 JPEG。除了这些格式之外，现代浏览器还支持更新的 WebP 格式，它提供更好的整体压缩和更多功能。那么，您应该使用哪种格式？
WebP 格式通常比旧格式提供更好的压缩，应尽可能使用。您可以将 WebP 与另一种图像格式一起用作后备。
对于较旧的图像格式，请考虑以下事项：
- 你需要动画吗？使用元素。
- GIF呢？GIF 将调色板限制为最多 256 种颜色，并创建比元素大得多的文件大小。
- 您是否需要以最高分辨率保留精细细节？使用 PNG。
- 除了选择调色板的大小之外，PNG 不应用任何有损压缩算法。因此，它将产生最高质量的图像，但其文件大小比其他格式高得多。谨慎使用。
- 如果图像资产包含由几何形状组成的图像，请考虑将其转换为矢量 (SVG) 格式！
- 如果图像资产包含文本，请停止并重新考虑。图像中的文本不可选择、不可搜索或“可缩放”。如果您需要传达自定义外观（出于品牌或其他原因），请改用网络字体。
- 您是否正在优化照片、屏幕截图或类似的图像资产？使用JPEG。
- JPEG 结合使用有损和无损优化来减小图像资产的文件大小。尝试多个 JPEG 质量级别，为您的资产找到最佳质量与文件大小的权衡。
最后，请注意，如果您在特定于平台的应用程序中使用 WebView 来呈现内容，那么您可以完全控制客户端并且可以专门使用 WebP！Facebook 和许多其他公司使用 WebP 在他们的应用程序中提供他们的所有图像——节省的成本绝对是值得的。
