2

我正计划创建一个博客，我正在考虑如何在不过多影响移动设备加载时间的情况下以最佳质量提供图像。

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

对于这种情况，是否有推荐的最佳实践？我说的只是内容图像（<img />）；没有 CSS 背景。一个真正的 WordPress 解决方案，它根据上传的员工图像提供图像会很棒。

我过去使用过自适应图像，但它不区分 HIDPI 和普通客户端。其他解决方案适用于视网膜，但不适用于不同的屏幕尺寸。

4

2 回答 2

2

不，没有好的方法可以做到这一点。这不是 WordPress 的错，而是整个网络的状态。基本上，网络上的 HiDPI 目前是一个大黑客，网络尚未正确适应它。

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

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

编辑：这值得更多解释。

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

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

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

存在其他方法，您可以首先简单地提供正确的图像，但它们也有缺点。

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

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

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

于 2012-09-12T15:02:26.093 回答
1

在考虑了一段时间之后，我必须提供两种方法来解决（部分）这个问题（部分）。仍然：仔细阅读@Otto的答案。它有很多深入的细节是有原因的。

Javascript检测

我写了一个关于“如何为附件添加默认图像”的答案。您可以更改过滤器回调以始终添加简单的 png/gif（仅具有背景颜色）而不是普通图像或缩略图。这将帮助您提供一个极小的图像（可能低于 1kB - smushIt 用于救援），用户代理/浏览器将在第一次加载时缓存该图像，然后简单地插入彼此调用图像。

然后，简单地显示像素密度......

var dpr = 1;
if ( window.devicePixelRatio !== undefined )
    dpr = window.devicePixelRatio;

if ( dpr > 1 ) {
    // High pixel density pixel displays
}

…当 DOM 完全加载时交换图像。

CSS 路由

为不同的像素密度显示添加样式表并不难：

// For default/low density pixel displays only: 
wp_enqueue_style(
     'low_density_styles'
    ,trailingslashit( get_stylesheet_directory_uri() ).'low_density.css'
    ,array()
    ,filemtime( locate_template( 'low_density.css' ) )
    ,'screen'
);

// For high density pixel displays only: 
$media  = 'only screen and (min--moz-device-pixel-ratio: 2), ';
$media .= 'only screen and (-o-min-device-pixel-ratio: 2/1), ';
$media .= 'only screen and (-webkit-min-device-pixel-ratio: 2), ';
$media .= 'only screen and (min-device-pixel-ratio: 2)';
wp_enqueue_style(
     'high_density_styles'
    ,trailingslashit( get_stylesheet_directory_uri() ).'high_density.css'
    ,array()
    ,filemtime( locate_template( 'high_density.css' ) )
    ,$media
);

现在您可以简单地在高/低密度图像之间切换 - 用于您的默认图像（标题、徽标等）。这不适用于帖子类型的附件（再次：请参阅@Otto 答案）。

于 2012-09-12T17:47:53.387 回答