3

我会尽量总结这一点。我正在开发一个 Web 应用程序，它需要：

  • 响应式，重点是桌面和 iPhone（视网膜显示屏）
  • 支持所有现代浏览器以及 ie8 和 ie9
  • 服务器高效，意思是：一个 sprite 中尽可能少的 JS 和尽可能多的图标

定位设备宽度/高度与定位像素比率：

对于有条件的CSS，我选择了以像素比率为目标，而不是为特定平台和设备创建不同的布局或使用 safari 用户代理。所以我正在使用我@media (-webkit-min-device-pixel-ratio: 2)所有的响应式样式。

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

每个背景两张图片 vs 一张背景调整大小的图片

因为我想尽可能减少服务器请求，所以我使用精灵（4 或 5 个“模板”）而不是单独的 png（SVG 讨论是另一回事！）。但是Background-size我的大部分用户不支持 IE8，所以它需要像jquery.backgroundSize.js这样的 JS 后备。

所以：

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

我没有找到与这个特定（但现在很常见）场景有关的其他问题。这不是一个讨论问题，我更想知道是否有关于如何处理这种情况的实际协议：Retina 显示、精灵、IE 和 JS。

4

2 回答 2

1

有条件background-size的不是首选选项。如果您选择使用该属性为具有“正常”像素比率的客户端使用高分辨率精灵，那么您最终会得到比预渲染图像更低的图像质量，客户端缩放图形的额外计算开销并传输比需要大约 4 倍的精灵。依赖您最终还会人为地限制您的网站与旧版浏览器的兼容性，而background-sizeIE8 JS 后备也可能会引入内容闪烁（无论您的场景是否可接受）。

我会使用每个像素比率的预渲染版本（这样你最终会得到两倍的图像文件）。您将能够为用户提供比background-size以往更好的图形质量。如果您手动构建 sprite（而不是使用自动化工具生成它们并附带 css），这将引入维护开销，但该解决方案总体上更可取。

  1. 制作您的 css 文件的高 dpi 版本，例如main-highdpi.css和有条件的将其包含在适当的媒体查询中<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="main-highdpi.css" />

  2. 创建您依赖的精灵的高分辨率版本并更新 css 精灵引用。我不相信首选的命名约定尚未达成一致（将资源名称后缀@2x似乎很流行，例如main.png 和 main@2x.png）

  3. 利润！

我会提倡这种方法，因为光栅图像的渲染质量更高（而不是缩放background-size），缺乏兼容性问题和更快的客户端渲染。缺点是传输更大的图像文件，这是在客户端设备上获取高分辨率图像的可接受价格（并且无论如何都会缓存精灵）。至少您最终不会像本文建议的那样要求两份副本！

请务必牢记各个设备的限制（图像大小和尺寸等）。

于 2012-08-06T00:38:06.777 回答
0

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

我也选择了喜欢高分辨率图像作为默认，如果默认是错误的图像，有些会被下载两次。带宽在移动设备上是最关键的，所以高分辨率应该是默认设置，而低分辨率稍后会被激活。

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

最后，我希望它使用srcset似乎是解决这个问题的长期解决方案的新草案标准，即使它尚未实施。

因此，我使用图像标签，src用于高分辨率和srcset低分辨率：

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

然后使用 javascript 处理所有图像标签。我之前选择了内联 JavaScript，</body>而不是domready提高页面加载速度的事件——我们希望浏览器尽快知道正确的图像 URL，在这种情况下，每一毫秒都很重要。

    <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>

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

于 2013-09-30T15:34:24.200 回答