image-响应式设计和HTML的标签

• picture标签实现

通过媒体查询的方式，根据页面宽度（当然也可以添加其他参考项）加载不同图片，具体picture详情点击查看

<picture>  
    <source srcset="3.jpg" media="(min-width: 320px)">  
    <source srcset="2.jpg" media="(min-width: 480px)">  
    <img srcset="1.jpg">  
picture> 

响应式设计

      响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，本意是使原本PC上的网站兼容手机和平板。大部分响应式网页是通过媒体查询，加载不同样式的CSS文件实现。

      好处不用多说，但是也有缺陷。由于PC和手机访问的是同一个网站，PC不计较流量，但是手机很在乎啊。一般在手机上访问响应式网页里的图片时，只是把图片分辨率做了一个缩放，手机还是下载了那一张大图片，一般手机又没有Retina屏，很浪费带宽。而且现在手机网速也不是很快，打开一个这种网站要耗费很长时间。

      网上看到一篇文章《How a new HTML element will make the Web faster》，大意是：为了使手机能更好显示网站内容，刚开始的时候大部分解决方法是专门开发一个m.domain.com 的手机版网站。但是这个比较麻烦。Marcotte提出了响应式网站，但是存在网络带宽浪费问题。HTML的标签（浏览器还都不支持）可以解决这个问题。

标签效果

      标签用法和HTML5的

<picture>
    <source srcset="large.jpg" media="(min-width: 800px)">
    <source srcset="medium.jpg" media="(min-width: 600px)">
    <img srcset="small.jpg">
picture>

       通过媒体查询的方式，根据页面宽度（当然也可以添加其他参考项）加载不同图片。这样不仅节省带宽还能使得图片更加适配内容。有些在大屏里看着比较舒服的图片，在手机上看会觉得太小，里边的东西看不清；即使手机分辨率是1920×1080，PC和手机上的图片宽度都是1000，显示的效果也应该不一样，手机上的图片应当更加注重放大细节。

 

(A) 在电脑上显示的图片

(B) 在手机上显示的图片

      上边图(A)和图(B)的内容一样，只不过(B)放大了(A)的主体部分，但是画面效果看起来不一样。如果图(A)显示在PC显示屏上，看起来会比较合理，实际上大部分图片在设计时，都考虑的是PC上的显示效果；如果在手机页面里显示，会一下显得比较小，抓不住重点，明显没有没有显示图(B)的效果好。而且在PC上显示的长条图片，在手机里最好把宽高比在调整的小一点。

(A)在电脑上显示的图片

(B)在手机上显示的图片

      总之，在设计响应式页面的时候，针对不同设备加载不同图片不仅能节约带宽，而且能有更好的显示效果。虽然图片差别不大，但是追求体验的用户能感觉出来，细节决定成败啊，网页上大部分功能都很好实现，好网页和差网页最重要的差别还是体验和速度。不过这样做也增加了前台做图的工作量。

实现标签

      有一篇文章《HTML5 ELEMENT》介绍了标签，但是目前还不被浏览器支持，如果想使用，要么用配合媒体查询模拟这个效果，要么用javascript动态返回图片。

      不过现在已经有人写了这个功能：github上的picturefill项目，就是通过加载HTML时，异步加载picturefill.js解析标签，然后再获取标签中的图片。因为需要和解析HTML这个过程异步执行，所以在使用之前，应当在里引用picturefill.js。

<script>
// 通过HTML5 shiv方式让IE识别<picture>标签
document.createElement( "picture" );
script>
<script src="picturefill.js" async> //添加async属性
script>

        然后就可以想最初提到的和

<picture>

    <source srcset="large.jpg" media="(min-width: 800px)">
    <source srcset="medium.jpg" media="(min-width: 600px)">

    <img srcset="small.jpg" alt="响应式图片">
picture>

       这样就可以利用媒体查询加载不同图片了，详细内容可以参考Picturefill的网站。但是这个方法也引用了外部js文件，需要多请求一次资源，文件大小19KB左右，在使用时注意权衡。