网站优化之图片最爱小虾

这里主要讲类似于bannner等大图优化加载问题；

-TinyPNG和JPEGmini这样的工具可以帮助压缩和优化图片。

-首先看html中主要用的是还是{background-image:url()};

如果是第一种：

我会选择用懒加载来处理图片；

如果是第二种：

我选择用ps里面存储图片的点选“连续”功能。

还有一种方法，也是最新才发现的，用到统一制作WAP的页面和web页面比较合适，img属性之setsrc;

扩展：背景图的响应：

属性srcset和sizes作用：为不同显示尺寸加载不同的图片源。

srcset属性允许开发者以一种紧凑的方式为不同分辨率或不同视口尺寸提供同一个图片的多种变体;

有一个很有趣的点，浏览器基于一些启发式算法或是用户设置，可以在页面访问的时候可以了解到最适合当前用户的，凭借这个去抓取合适分辨率的图像。

.demo>.image{margin-bottom:10px;max-width:100%;float:left;}.demo>.content{margin:0010px140px;min-height:96px;max-width:100%;padding:5px;background-color:#eee;vertical-align:top;box-sizing:border-box;}@mediascreenand(max-width:360px){//逻辑像素360*640.demo>.image{float:none;}.demo>.content{margin-left:0;}}HTML代码：当视图宽度不大于360像素的时候，左右布局变成上下布局，同时图片撑满屏幕显示。