image - 是否有向移动设备和 HIDPI/视网膜设备提供图像的好做法？

Question

我打算创建一个博客，我正在考虑如何以最佳质量提供图像，而不会过多地影响移动设备的加载时间。

我的内容栏大约是。 768 个显示点宽，我使用 Retina Macbook 发布屏幕截图，因此图像宽度至少为 1500 像素。其他 Retina/HIDPI 用户应该看到最适合他们的版本。

这种情况有推荐的最佳实践吗？我只谈论内容图像( <img /> )；没有 CSS 背景。一个真正的 WordPress 解决方案，根据上传的招聘图像提供图像会很棒。

我用过 adaptive images过去但它不区分 HIDPI 和普通客户端。 Other solutions适用于视网膜，但不适用于不同的屏幕尺寸。

Answer 1

不，没有这样做的好方法。这不是 WordPress 的错，而是整个网络状态的错。网络上的 HiDPI 目前基本上是一个大黑客，网络还没有适本地适应它。

基本上，没有好的方法可以在 HTML 中以浏览器可以用来确定要显示的正确图像的方式指定多个分辨率的图像。 CSS 有效，但前提是您使用图像作为背景。如果您正在处理 IMG，那么您必须依靠 Javascript 来完成这项工作，并且根据您的方法，这具有各种缺点。

将来，当浏览器开始采用指定多分辨率图像的方法时，这将不是什么大问题。

编辑:这值得更多解释。

使用 JS 做到这一点的基本问题是它依赖于图像替换技术。 JS 代码通过它拥有的任何逻辑找到页面上的 IMG，然后将它们替换为来自其他文件的更高分辨率版本。无论使用什么方法来做到这一点，它都有两个主要的缺点:

首先，初始图像以低分辨率加载，然后在替换图像时再次以高分辨率加载。这意味着额外的带宽使用，考虑到大多数 HiDPI 设备目前都是移动设备，在这些设备上浪费这种带宽没有多大意义。

其次，图像一般先以低分辨率显示，然后用高分辨率图像替换。这意味着在 HiDPI 屏幕上显示模糊图像一两秒钟，然后在替换发生时“弹出”成为焦点。这是一个非常糟糕的效果。

存在其他方法，您可以通过这些方法首先简单地提供适当的图像，但它们也有缺点。

User-Agent 的服务器端浏览器检测首先是一种非常糟糕的处理方式，最好避免，因为在野外有太多不同的代理，维护它们的列表几乎是不可能的。但是，如果你想经历它的痛苦，这种方法是可行的。

或者，可以让浏览器中的 Javascript 检测浏览器的设备像素比并将其设置在 Cookie 中以返回给服务器。然后服务器可以使用这个 cookie 来提供正确分辨率的图像。这有效，但不可靠，因为许多移动用户代理无法正确设置和返回 cookie，即使在那些设置和返回 cookie 的情况下，高分辨率图像也只会在第二次访问页面时显示。第一印象是低分辨率的，一般来说并不好。

正如您所看到的:这只是一路向下的黑客攻击。直到浏览器能够被告知特定 IMG 存在多个版本及其参数，然后被允许为自己选择，然后这些是唯一的方法。但是，如果实现了建议的 HTML5“srcset”或 PICTURE 标签之类的东西，那么我们将有更好的选择。