使用“特色图片”进行响应式网页设计的最佳方法是什么？

我有一个绝妙的主意，由于WordPress已经完成了一些工作，所以我只需要找到一种很好的方法来完成这项工作。

我正在从事一个项目，该项目需要响应所有设备，无论是台式PC还是移动设备。因此，我希望图像也能响应，这意味着移动设备不应加载50KB +的图像。

对于每个页面或每个帖子，我都可以使用“缩略图”添加“精选图片”，该图片在全尺寸下约为950x250（约60KB）。如果我在iPhone / Android上加载网站，则不希望加载〜60KB的图片，而是希望在其位置加载小缩略图。

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

我考虑过尝试Filament Group的响应式图像脚本，但是我尝试了一下，但效果不佳。可以通过用户代理检测来实现此目的的一种方法，但是我也不愿意使用这种方法，因为可以欺骗用户代理。

这是即时调整图像大小的另一种方法，但这似乎是在重复WordPress已经完成的工作。

如果有一种方法可以对媒体库图像执行此操作，而WordPress已被默认设置为已创建所有调整大小的缩略图，那将是更好的选择。

步骤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;

第三步：

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

<?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）。只需添加多个自定义图像尺寸，然后有条件地测试您要支持的每个屏幕尺寸。

最好的方法是使用流体网格构建WordPress主题，并通过比例缩放功能删除特征图像的宽度和高度值。一个关于制作WordPress的图像响应教程：

方法1：CSS

将以下代码添加到您的CSS文件中。这将使图像根据屏幕大小可缩放。

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

删除WordPress <img>标签中的自动高度和宽度

现在，拖动窗口以查看图像缩放比例。您会注意到WordPress博客中的图像缩放比例很奇怪。他们水平缩放很好，但是WordPress图像中的垂直缩放都是错误的。

为了在WordPress中按比例调整图像大小，我们必须删除WordPress为< img >标签添加的自动宽度和高度值 。

例如，我们必须更改此设置：

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

为此：

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

对于帖子或静态页面/模板页面中的图像，您所要做的就是将上述CSS添加到style.css文件中，然后从WordPress编辑器中的标签中删除‘width’和‘height’属性< img >。而已！

但是对于WordPress动态显示的图像（例如帖子缩略图），需要使用函数动态删除宽度和高度。

在functions.php文件中添加以下功能。

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );
}

然后，当您在template.php页面中调用这些发布缩略图时，请替换为：

the_post_thumbnail();

有了这个：

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

而已。拖动并调整浏览器的大小，以查看您的响应式WordPress图像的实际效果！

---

方法2：

以上内容不适用于某些主题。

如果您是少数无法使用的工具之一，仍然可以使用以下功能解决图像问题。

在functions.php文件中添加以下功能。

这将从使用检索的图像中删除行内宽度和高度属性the_post_thumbnail()，并防止将这些属性添加到添加到编辑器的新图像中。

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
}

可以通过用户代理检测来实现此目的的一种方法，但是我也不愿意使用这种方法，因为可以欺骗用户代理。

这不是一个坏方法，实际上是行业标准，一个好的WURFL具有很高的准确度，我使用和测试的WURFL总是返回可靠的结果，而独立测试（超出我的工作范围）似乎可以得到这些结果。 98％+范围。谁在乎是否有一些脚的bot欺骗了用户代理，但是无论如何他们都不在场。

对于第2步，我认为使用PHP支持的WURFL或CSS媒体查询的方法实际上都可以更快。

首先，您必须定义“最佳”。我的定义是：在任何设备或屏幕上渲染具有设计者预期效果的图像渲染与原始图像质量相同的图像消耗系统和人力资源（即带宽，CPU，设计者/程序员时间）的绝对最小量

这是我到目前为止所看到的方法：

1. 加载完整尺寸的图像，然后让浏览器将其缩小以适合布局。将图片的最大宽度定义为100％，并按其容器的宽度缩小比例。

优点：无需任何努力即可实现，与旧版浏览器兼容并支持旧版浏览器。

缺点：通常下载的数据超出要求，然后在客户端上花费CPU周期将其缩减（速度较慢）。根据浏览器的缩放算法，您最终可能会得到质量很差的图像。没有艺术指导的可能性，并且无法将图像用于视网膜型显示器。

2. 使用媒体查询来读取客户端的属性，并为设计中的不同断点获取几张定制的图像之一。（提议中的HTML 响应式图像扩展和srcset属性标记正在将这种方法烘焙到HTML规范中）。

优点：在移动设备上下载速度更快。可以处理视网膜型显示器。由于希望使用某种高质量的方法处理图像，因此提高了图像质量。艺术指导成为可能。

缺点：有人必须花时间处理，裁剪和管理同一图像的多个版本。更多编码：您现在必须以某种方式拼出图像的每个版本，并为所有所需的布局创建媒体查询。对您提供的每个图像重复以上操作。仅适用于支持CSS3媒体查询或新标签的浏览器。

3. 使后端使用单个源图像即时优化任何屏幕或布局的图像。在我看来，这等效于将响应式图像视为内容协商任务，就像HTTP。

优点：Designer无需花费任何时间来处理图像和管理多个版本。每次都会发送最佳尺寸的图像。可以处理视网膜类型的显示并可以动态调整艺术方向（尽管需要付出一些额外的努力–必须知道在哪里聚焦）。不需要特殊或额外的标记（下面的注释）。跨浏览器兼容，将适用于较旧的浏览器。

缺点：必须捕获并传输有关客户端的浏览器和屏幕属性的信息。第一次加载图像可能比任何其他方法都慢，因为必须处理图像（通常将其缓存以供以后的请求使用）。