我们在使用响应布局的时候会考虑，手机上的图片没必要和电脑上的一样大。如果是从大到小的方法设计，那大屏幕的图片在小屏幕上会被缩小，增加了大量的空间。如果是从小到大的方法设计，那小屏幕的图片在大屏幕上会被拉伸到模糊。有什么方法可以兼顾小屏幕和大屏幕，这里引进了响应图片的概念。
响应式图片
我们知道响应式的核心就是根据屏幕的大小，选择不同的CSS样式，那么图片是不是也可以通过判断不同大小的屏幕，然后选择性的加载不同尺寸的图片，由FilamntGroup提出的响应式图片技术思想，有助于解决上面提到的问题。
不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。
这项技术支持多数的现代浏览器，包括IE8+、Safari、Chrom和Opra，以及这些浏览器的移动设备版本，在FiFox及一些旧浏览器中，则会优雅降级，我们仍可得到小图片的输出，但同时原始大图也会被下载。
Pictufill
Pictufill允许Wb开发人员根据不同的屏幕大小、视口大小、屏幕分辨率等情况提供不同的图片给用户。
使用方法
首先引入JS（需要在HTML文档头部引用）
scriptsrc="pictufill.js"/script
为了使你的网页能够有效的加载，建议增加一个异步属性的脚本标签。告诉浏览器可以异步加载pictufill，不需要等待它加载完成之后再去加载其余的内容。如果你添加这个属性，你需要在引人pictufill之间加入一行脚本，同时也是为了让老的浏览器在pictufill还没有完成加载时遇到pictufill可以识别pictu元素。
hadscript//PictulmntHTML5shivdocumnt.catElmnt("pictu");/scriptscriptsrc="pictufill.js"async/script/had
注意：如果你文档中已经包含了HTML5shiv（例如：Modrnizr），那么你就不需要包含这段JS脚本。当然许多高级的使用者可不需要这样，而是选择像Rqui.js一样动态的加载pictufill。（类似AMD和CommonJS的支持包括在脚本）。
一旦你已经包括pictufill.js，你就可以开始添加响应图像元素到您的网站，Pictufill增加了对响应图像解决方案，包括图像元素和新的img元素属性的整个套件的支持。
使用srcst属性
imgsrcst="xampls/imags/imag-8.jpg1x,xampls/imags/imag-.jpgx"
使用srcst和sizs属性
imgsizs="(min-width:0m)80vw,vw"srcst="xampls/imags/mdium.jpg75w,xampls/imags/larg.jpg80w,xampls/imags/xtralarg.jpgw"
其中sizs定义img显示的尺寸，srcst定义图片源以及图片的自然大小。浏览器会根据实际情况自主选择加载哪张图片。
使用pictu属性
pictusourcsrcst="xampls/imags/xtralarg.jpg"mdia="(min-width:0px)"sourcsrcst="xampls/imags/art-larg.jpg"mdia="(min-width:px)"imgsrcst="xampls/imags/art-mdium.jpg"/pictu
pictu中的typ属性
Pictufill支持SVG和的WbP作为其核心的一部分，但以下MIME类型可以通过typsupport插件一起使用：
imag/bmpimag/xbmpimag/jpimag/vnd.ms-photovido/vnd.mozilla.apng
pictusourcsrcst="xampls/imags/larg.wbp"typ="imag/wbp"imgsrcst="xampls/imags/larg.jpg"/pictu
CSS伪类
我们都知道可以用::bfo和::aftr伪元素和contnt属性来动态显示一些内容或者做其它很酷的事情，而且在CSS.1中即被支持。不过contnt属性在CSS.1中只能用于这两个伪元素中，而在CSS中，任何元素都可以使用contnt属性了，这个方法就是结合CSS的attr属性和HTML自定义属性的功能：
imgsrc="imag.jpg"data-src-px="imag-px.jpg"data-src-px="imag-px.jpg"alt=""
mdia(min-dvic-width:px){img[data-src-px]{contnt:attr(data-src-px,url);}}
mdia(min-dvic-width:px){img[data-src-px]{contnt:attr(data-src-px,url);}}当然这些方法也有不足之处，比如PC端宽屏幕需要加载两个图片文件，然后我们也要为此准备多张图片文件。