Html 响应性设计，强调视网膜显示和桌面。精灵与JS：牺牲什么？

我会尽可能地总结这一点。我正在开发一个web应用程序，它需要：

• 反应灵敏，在台式机和iPhone（视网膜显示器）中重点突出
• 支持所有现代浏览器以及ie8和ie9
• 服务器效率高，这意味着：尽可能少的JS和尽可能多的精灵图标

目标设备宽度/高度与目标像素比率：

对于有条件的CSS，我选择以像素比率为目标，而不是为特定平台和设备创建不同的布局，或者使用safari用户代理。所以我使用

@媒体（-webkit最小设备像素比：2）

加上我所有的响应风格

现在我正试图决定如何处理图像

每个背景有两张图像，而背景大小为一张图像

因为我希望尽可能减少服务器请求，所以我使用sprite（4或5“模具”）而不是单独的png（SVG讨论是另一回事！）。但是我的大部分用户IE8都不支持

背景大小

，因此它需要类似JS的后备功能

因此：

从性能和良好实践的角度来看，精灵、条件背景大小和IE8的JS回退组合是最佳选择吗？

---

我没有发现关于这个特定（但现在相当普遍）场景的其他问题。这不是一个讨论的问题，我更感兴趣的是知道是否有一个关于如何处理这种情况的实际协议：视网膜显示，精灵，IE和JS

有条件的

背景大小

将不是首选选项。如果选择使用该属性为具有“正常”像素比的客户端使用高分辨率精灵，则最终的图像质量将低于预渲染图像的质量，客户端缩放图形和传输比需要大约4倍的精灵所需的额外计算开销。依靠

背景大小

也会人为地限制站点与传统浏览器的兼容性，而IE8 JS回退也可能引入内容闪烁（无论在您的场景中是否可以接受）

我会选择预渲染版本的每像素比率（因此，最终得到的图像文件实际上是图像文件的两倍）。您将能够为用户提供比

背景大小

更高质量的图形。如果您手动构建sprite（而不是生成sprite并使用自动化工具附带css），这将引入维护开销，但总体而言，解决方案更可取

制作css文件的高dpi版本，例如main-highdpi.css，并有条件地将其包含在适当的媒体查询中，这与

创建所依赖的精灵的高分辨率版本，并更新css精灵引用。我认为首选命名约定尚未达成一致（使用

@2x

对资源名称进行后期修复似乎很流行，例如main.png&main@2x.png)

利润

我主张采用这种方法，因为光栅图像的渲染质量更高（而不是使用

背景大小

进行缩放），缺乏兼容性问题和更快的客户端渲染。缺点是传输更大的图像文件，这是在客户端设备上获得高分辨率图像的一个可接受的价格（而且精灵将被缓存）。至少你不会最终要求两份副本

---

只需记住个别设备的限制（图像大小和尺寸等）

我的网站主要是内容和一些非常基本的脚本，因此我选择将所有javascript嵌入页面，避免使用外部脚本（jquery等），因为它们对页面加载时间有很大影响

我还选择了高分辨率图像作为默认图像，如果默认图像是错误的，一些图像将被下载两次。带宽在移动设备上是最关键的，因此高分辨率应该是默认值，而低分辨率将在稍后激活

在所有情况下，我也倾向于简单而不是选择最好的图像，因为坦率地说，大多数访问者甚至不会注意到其中的差异。错误的人出现并不是一场灾难

最后，我希望它使用新的

srcset

标准草案，这似乎是这个问题的长期解决方案，尽管它还没有实现

因此，我使用了一个图像标签，高分辨率时使用

src

，低分辨率时使用

srcset

：

<img src="foo.png" srcset="foo-low.png 1x" width="42" height="42">

---

它简单但有效，我期待任何人都能做出改进。

我没有想到背景大小会在主浏览器中呈现得很糟糕。是这样吗？@yisela:除非我误解了你的问题，否则你打算对背景大小的高分辨率图像进行降采样？e、 g.将高分辨率600x200徽标嵌入300x100的真实渲染空间。这完全取决于客户端算法，但在我看来，可以安全地假设质量将低于预渲染图像的质量，此外，这会增加客户端调整图像大小的计算开销。你也会转移比你需要的大4倍的精灵谢谢你的回答，你是对的。唯一的缺点是必须准备两次图像（以及任何最终的编辑），但这没什么大不了的。你是否仍然认为这是一个网站的最佳实践，比如说，超过50或100张图片？实际上不重要的IMO（所以，仍然是“100”的图像+），但是你可能需要投入一些时间来建立适当的自动化。根据源图形的存储方式，您可以使用PhotoshopJavaScript创建同一精灵的不同版本等。

    <script type="text/javascript">
      function swapRetinaImagesOut() {
        // skip anything with a "retina" screen
        if (window.devicePixelRatio > 1)
          return;

        // check if the browser appears to support the "srcset" attribute
        if (typeof(document.createElement('img').srcset) != "undefined")
          return;

        // find all images with an "srcset" property, and swap them
        var imageEls = document.getElementsByTagName('img');
        for (var i = 0; i < imageEls.length; i++) {
          var imageEl = imageEls[i];
          var srcset = imageEl.getAttribute('srcset');
          if (!srcset)
            continue;

          imageEl.src = srcset.match(/^[^ ]+/)[0];
        }
      }

      swapRetinaImagesOut();
    </script>
  </body>
</html>