我正计划创建一个博客，并且正在考虑如何在不过多影响移动设备加载时间的情况下以尽可能最佳的质量提供图像。
我的内容栏大约是。 768 个显示点宽，我使用视网膜 Macbook 发布屏幕截图，因此图像的宽度至少为 1500 像素。其他 Retina/HIDPI 用户应该看到最适合他们的版本。
对于这种情况，是否有推荐的最佳做法？我说的只是内容图片（<img />）；没有 CSS 背景。一个真正的 WordPress 解决方案，可以根据上传的员工图像提供图像。
我过去使用过adaptive images，但它不区分 HIDPI 和普通客户端。 Other solutions 为 Retina 服务，但不适用于不同的屏幕尺寸。
【问题讨论】：
标签： image wordpress retina-display image-size
不，没有好的方法可以做到这一点。这不是 WordPress 的错，而是整个网络的状态。基本上，网络上的 HiDPI 目前是一个大黑客，网络尚未正确适应它。
基本上，没有什么好的方法可以在 HTML 中指定多个分辨率的图像，以便浏览器可以用来确定要显示的正确图像。 CSS 有效，但前提是您使用图像作为背景。如果您正在处理 IMG，那么您必须依靠 Javascript 来完成这项工作，并且根据您的方法有各种缺点。
将来，当浏览器开始采用指定多分辨率图像的方法时，这将不是什么大问题。
编辑：这值得更多解释。
使用 JS 执行此操作的基本问题是它依赖于图像替换技术。 JS 代码通过它拥有的任何逻辑在页面上找到 IMG，然后将它们替换为来自其他文件的更高分辨率版本。无论使用什么方法来做到这一点，它都有两个主要缺点：
首先，初始图像以低分辨率加载，然后在替换图像时再次以高分辨率加载。这意味着额外的带宽使用，并且考虑到目前大多数 HiDPI 设备都是移动设备，在这些设备上浪费这种带宽没有多大意义。
其次，图像一般先以低分辨率显示，然后换成高分辨率图像。这意味着在 HiDPI 屏幕上显示模糊图像有一两秒钟，然后在替换发生时它“弹出”成为焦点。这是一个非常糟糕的效果。
存在其他方法，您可以首先简单地提供正确的图像，但它们也有缺点。
通过 User-Agent 检测服务器端浏览器首先是一种非常糟糕的处理方式，最好避免这样做，因为在野外有很多不同的代理，维护它们的列表是几乎不可能。但是，如果你想经历它的痛苦，这种方法是可行的。
或者，可以让浏览器中的 Javascript 检测浏览器的设备像素比并将其设置在 Cookie 中以返回到服务器。然后，服务器可以使用此 cookie 来提供正确分辨率的图像。这可行，但不可靠，因为许多移动用户代理未能正确设置和返回 cookie，即使在那些设置和返回 cookie 的情况下，高分辨率图像也只会在第二次访问页面时显示。第一印象是低分辨率的，一般来说不是很好。
如您所见：它只是一路黑下来。直到浏览器能够被告知特定 IMG 存在多个版本及其参数，然后允许自己选择，那么这些是唯一的方法。但是，如果实现了建议的 HTML5“srcset”或 PICTURE 标签之类的东西，那么我们会有更好的选择。
【讨论】：
在考虑了一段时间之后，我必须提供两种方法来解决（部分）这个问题（部分）。仍然：仔细阅读@Otto的答案。它有很多深入的细节是有原因的。
我为附件写了一个关于»How to add default images« 的答案。您可以更改过滤器回调以始终添加简单的 png/gif（仅具有背景颜色）而不是普通图像或缩略图。这将帮助您提供一个极小的图像（可能低于 1kB - smushIt 用于救援），用户代理/浏览器将在第一次加载时缓存该图像，然后简单地插入彼此调用的图像。
然后，简单地用…显示像素密度
var dpr = 1;
if ( window.devicePixelRatio !== undefined )
dpr = window.devicePixelRatio;
if ( dpr > 1 ) {
// High pixel density pixel displays
}
…在 DOM 完全加载后交换图像。
为不同像素密度的显示器添加样式表并不难：
// 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 答案）。
【讨论】：