不同分辨率的不同CSS精灵可行吗？答案

【问题标题】：Different CSS sprites for different resolutions practicable?不同分辨率的不同CSS精灵可行吗？
【发布时间】：2012-09-07 19:04:39
【问题描述】：

我正在开发一个流畅的网站。为了获得最大的图像质量和最小的图像加载时间，我为不同的分辨率使用了不同的精灵（例如 1680+、1440+、1280+、1024+、800+、1680@2x（对于视网膜）、1440@2x、..）通过@media 查询。

我最终有 10 个不同的精灵。简单地通过 CSS（背景大小或最大宽度）缩小高分辨率图像会导致质量下降（尤其是图标）和不需要的图像文件大小开销。

使用 Photoshop 将图像缩小 10 倍并对其进行微调并不是一个好习惯（Imagemagick 在这里不适合我）。怎么做才对？

【问题讨论】：

【解决方案1】：

如果你需要对每一张缩小的图像进行微调，你需要对每一张都进行微调。如果没有，我建议两种尺寸，一种用于“高分辨率”，一种用于“低分辨率”。

【讨论】：