Picturefill.WP – 根据屏幕尺寸加载合适的图片

Picturefill.WP插件利用picturefill.js脚本展示Responsive图片，即根据视口宽度选择尺寸合适的图片加载，节省带宽，提高网站载入速度。例如用户用手机访问站点，该插件会选择适合手机尺寸的图片（如缩略图）加载，不会加载完整尺寸图片。

 

使用方法

没有选项，无需任何设置，下载插件激活，网站文章中的所有图片就会变成Responsive图片，若是retina显示屏，则加载retina图片。

 

工作原理

该插件工作原理简单的说，就是充分利用WordPress为每张图片创建的副本图片：大尺寸、中等尺寸和缩略图，根据用户设备屏幕宽度，载入尺寸最接近的图片。

具体来说，插件首先在文章内容中查找图片标签

<img class="alignnone size-large wp-image-123"
alt="Accessible alternate text for the image"
title="A title that displays on hover"
src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg"
width="770" height="577" />

 

然后将这个图片替换成picturefill.js的语法

<span data-picture data-class="alignnone size-large wp-image-123" dat-alt="Accessible alternate text for the image" data-title="A title that displays on hover" data-width="770" data-height="577">
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-150x150.jpg" data-width="150" data-height="150" data-media="(min-width: 1px)" class="picturefill-wp-source thumbnail"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-300x300.jpg" data-width="150" data-height="150" data-media="(min-width: 1px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina thumbnail"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-400x300.jpg" data-width="400" data-height="300" data-media="(min-width: 420px)" class="picturefill-wp-source medium"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-800x600.jpg" data-width="400" data-height="300" data-media="(min-width: 420px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina medium"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg" data-width="770" data-height="577" data-media="(min-width: 790px)" class="picturefill-wp-source large"></span>
  <span data-src="http://sitename.com/wp-content/uploads/2013/4/image-1540x1155.jpg" data-width="770" data-height="577" data-media="(min-width: 790px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina large"></span>
  <noscript>
    <img class="alignnone size-large wp-image-123" alt="Accessible alternate text for the image" title="A title that displays on hover" src="http://sitename.com/wp-content/uploads/2013/4/image-770x577.jpg" width="770" height="577" />
  </noscript>
</span>

 

data-media指定了这些图片在什么情况下加载。

 

高级功能

一般用户只要激活插件即可。程序员还可以限制图片的最小尺寸，使用或禁用缓存功能，设定WordPress的媒体尺寸，让其最大限度的匹配主题breakpoint。

 

下载插件

Download From WordPress.org

 

 

原文：http://www.willpress.com/picturefill-wp/