css - 为网络导出图像的最佳实践 - DPI/PPI

Question

我应该如何为网络准备图像？

每个设备似乎都有不同的分辨率。我一直以 72PPI 导出图像。这几天甚至是正确的数字吗？有人用96PPI吗？对于非“视网膜”图像，哪个更好？

我遇到的大多数教程都建议您对样式表中的 UI 图形采用这种方法。

http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/

基本上，将两张图像中的一张正好放大另一张的 2 倍。然后……

background-size: 50% auto; 

...在@2x 图像上。请注意，本文从未指定将图像导出为什么 PPI。

是否可以导出一张 72PPI 的图像和一张 144PPI 的图像？这样一来，您甚至不需要在媒体查询中调整更高分辨率的背景大小。

我应该以什么为目标？为网络导出图像的实际最佳做法是什么？

另外，有没有人有关于更高 dpi 显示和处理媒体查询的更好的文章？

Answer 1

PPI 设置与您在网络上使用的图像完全无关。浏览器根本不关心 PPI 设置是什么，它只使用图像的像素尺寸。