开发自适应WordPress站点的时候，我们需要实现图片的自适应，最简单的方法就是给图片设置一个max-width:100%的属性，图片会在手机或平板等小屏幕上自动缩放为屏幕显示宽度的100%。

在web前段性能优化原则中，有一条是需要多大的图片，就提供多大的图片，以避免额外的带宽消耗。WordPress通过缩略图为我们提供了自动裁剪上传的图片的功能，很简单的支持了这个原则。然后却没有对自适应提供足够的支持，因为我们在移动设备上往往不需要像桌面设备那么大尺寸的图片，最理想的办法是，在移动设备上提供移动设备需要的较小尺寸的图片。

通过srcset属性实现不同宽度的设备加载不同尺寸的图片

为了实现这个功能，现代浏览器为我们提供了srcset属性，用来声明不同尺寸的设备需要加载的图片，具体用法是这样子的。

<img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…">

从上面的代码中，我们可以看出，srcset里面可以声明多组图片，支持以下三个参数：

• 图片src，也就是图片的路径。
• 屏幕宽度，也就是屏幕的显示宽度，注意，不是屏幕的分辨率宽度。
• 像素放大倍数，1x就是一个物理像素显示一个像素，也就是我们普通的电脑显示器，2x就是两个物理像素显示一个像素，一般在手机上才会有这种情况。

明确了以上几点，想在WordPress中实现不同设备加载不同图片，我们只需要在输出图片的时候加上srcset就可以了。

通过RICG Responsive Images插件实现实现不同宽度的设备加载不同尺寸的图片

插件使用起来非常简单，只需要把插件安装激活，然后在显示图片代码的时候使用the_post_thumbnail，插件会自动为我们加上srcset属性，如果没有意外，最终输出的图片显示代码应该是这样的。

<a href="https://c.wpzhiku.com/uploads/2015/01/image.jpg">
<img
    src="https://c.wpzhiku.com/uploads/2015/01/image.jpg"
    srcset="
       https://c.wpzhiku.com/uploads/2015/01/image-150x150.jpg 150w,
       https://c.wpzhiku.com/uploads/2015/01/image-300x300.jpg 300w,
       https://c.wpzhiku.com/uploads/2015/01/image-1024x1024.jpg 1024w,
        https://c.wpzhiku.com/uploads/2015/01/image.jpg 1800w
    ">
</a>

需要注意的是，一定要通过the_post_thumbnail显示图片，插件才可以起作用。当然通过后台添加媒体插入文章中的图片一样也是可以的。