不同的CSS精灵可用于不同的分辨率？

Question

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

我最终得到了10个不同的精灵。简单地通过CSS缩小高分辨率图像（背景大小或最大宽度）会导致质量损失（特别是图标）和图像文件大小不需要的开销。

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

Answer 1

如果您需要微调每个缩小尺寸的图像，您需要为每个缩小图像进行微调....如果不是，我建议使用两种尺寸，一种用于＆＃34;高分辨率＆＃34;和＃34;低分辨率＆＃34;。