WordPress自适应图片插件通过srcset进行图片自适应

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

web前台的性能优化原则之一就是根据需要提供尽可能多的图片，避免额外的带宽消耗。WordPress为我们提供了通过缩略图自动裁剪上传图片的功能，简单来说就是支持这个原理。但是对于适配的支持不够，因为我们在移动设备上往往不需要桌面设备那么大的图片。最理想的方式是在移动设备上提供较小尺寸的图片。

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

& ltimg src = " fallback . jpg " srcset = " small . jpg 640 w 1x，small.jpg 640w 1x，large.jpg 1x，large-hd.jpg 2x " alt = "…" & gt；从上面的代码中，我们可以看到srcset可以声明多组图片，并支持以下三个参数:

Image src，这是图像的路径。屏幕宽度，即屏幕的显示宽度，注意不是屏幕的分辨率宽度。像素放大，1x是指一个物理像素显示一个像素，也就是我们普通的电脑显示器，2x是指两个物理像素显示一个像素，手机上一般都是这样。明确了以上几点，我们只需要在输出图片的时候添加srcset就可以实现不同的设备在WordPress中加载不同的图片。

通过RICG Responsive Images插件在不同宽度的设备上加载不同大小的图片插件非常简单。只需安装并激活插件，然后在显示图片代码时使用_post_thumbnail即可。插件会自动为我们添加srcset属性。如果不出意外，最终输出的图片显示代码应该是这样的。

& lta href = " https://www . wpzhiku . com/WP-content/uploads/2015/01/image . jpg " & gt；& ltimg src = " https://www . wpzhiku . com/WP-content/uploads/2015/01/image . jpg " srcset = " https://www.wpzhiku.com/wp-content/uploads/2015/01/ image-150x150.jpg 150 w，https://www . wpzhiku . com/WP-content/uploads/2015/01/image-300 x300 . jpg 300 w，https://www . wpzhiku . com/WP-content/uploads/2015/01/image-1024 X100& lt/a & gt；需要注意的是，图片必须通过_post_thumbnail显示，插件才能工作。当然，也可以通过在后台添加媒体的方式在文章中插入图片。

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：WordPress自适应图片插件通过srcset进行图片自适应 https://zhujicankao.com/90569.html