WordPress 使用特色图像进行响应式网页设计的最佳方式是什么？

问题描述

我有一个辉煌的想法，由于 WordPress 已经处理了一些工作，我只需要找到一个很好的方法来使这项工作。

我正在处理一个需要响应所有设备的项目，无论是台式 PC 还是移动小工具。因此，我想要的图像也是响应，这意味着移动设备不应该加载 50KB +图像。

对于每个页面或帖子，我可以使用 Post Thumbnails 添加一个精选图像，在 full-size 中，图像大约为 950×250 〜 60KB 。如果我在 iPhone /Android 上加载网站，我不希望加载约 60KB 的图片，而是希望将小缩略图加载到其中。

响应图像的默认方法是使图像的宽度为父容器的 100％，因此如果父容器也被调整大小，它将自动调整大小。不是更大图像的最佳方法。

我想过尝试 Filament Group’s responsive image script，但我尝试了，它没有正常工作。一个方法可以通过 user-agent 检测来实现，但是我不想这样做，因为 user-agents 可以被欺骗。

Here’s another method for resizing images on the fly，但这似乎是 WordPress 已经做的重复。

如果有一种方法可以使用 WordPress 默认的 Media Gallery 图像，所有已调整大小的缩略图已经被创建，那将是更可取的。

最佳解决方案

步骤 1：

定义两个自定义图像大小，例如：

<?php
add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size
?>

第 2 步：

实施您选择的手段来确定客户。有几种方法，您使用哪种方法不在此问题的范围之内。但是，假设您有一个适用于您的方法，将结果输出到某个变量，如 $mobile_device = true;

步骤 3：

在您的模板文件中，根据客户端有条件地输出图像。

<?php
if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );
}
?>

注意：您可以重复 if/else(或做一个 switch) 的多种形式因素 (即屏幕尺寸) 。只需添加多个自定义图像大小，并有条件地测试您想要支持的每个屏幕尺寸。

参考文献

• What’s the best way to use the Featured Image for responsive web design?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。