开发自适应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
That's all.
通过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
显示图片,插件才可以起作用。当然通过后台添加媒体插入文章中的图片一样也是可以的。
2 thoughts on “WordPress自适应图片插件-通过srcset实现图片自适应”
感觉多说的方法比较靠谱
多说用的什么方法?没有研究过。