网站优化之图片

图片应作成响应式、(大尺寸图片建议)使用渐进式JPEG、使用mozJPEG，tinyPNG等工具对图片进行压缩;

压缩工具：

http://c7sky.com/kraken-io-image-optimizer.html

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

压缩工具：

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

　　http://www.tuhaokuai.com

 

-首先看html中主要用的是<img src="">仍是{background-image:url()};

若是是第一种：

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

<script type="text/javascript" src="js/lazy_min.js"></script>
<script>
    $(function(){
        //懒加载
        $("img.lazy").lazyload({
            effect : "fadeIn",
            skip_invisible : false,// Lazy Load 默认忽略了隐藏图片. 若是你想要加载隐藏图片, 请将 skip_invisible 设为 false
            threshold : 200,// 设置 threshold 为 200 令图片在距离屏幕 200 像素时提早加载
            failure_limit : 10//当插件找到 10 个不在可见区域的图片时才中止搜索. 若是你有一个猥琐的布局, 请把这个参数设高一点
        });
    });
</script>

若是是第二种：

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

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

　　在此网站查看兼容性的图表，http://caniuse.com/#search=srcset；

 

扩展：背景图的响应：

background-image:-webkit-image-set(
url(qqlogo_1x.png) 1x,
url(qqlogo_2x.png) 2x
);

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

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

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

CSS代码：

.demo > .image { margin-bottom: 10px; max-width: 100%; float: left; } .demo > .content { margin: 0 0 10px 140px; min-height: 96px; max-width: 100%; padding: 5px; background-color: #eee; vertical-align: top; box-sizing: border-box; } @media screen and (max-width: 360px) {//逻辑像素360*640 .demo > .image { float: none;} .demo > .content { margin-left: 0; } }

HTML代码：

<img class="image" src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 128w, mm-width-256px.jpg 256w, mm-width-512px.jpg 512w" sizes="(max-width: 360px) 340px, 128px"> <div class="content">当视图宽度不大于360像素的时候，左右布局变成上下布局，同时图片撑满屏幕显示。</div>

表示当视区宽度不大于360像素时候，图片宽度为整个视区宽度减去20像素的大小。

srcset=".../gt-scavenger_1-300x507.jpg 300w, .../gt-scavenger_1-768x1298.jpg 768w, .../gt-scavenger_1-606x1024.jpg 606w, .../gt-scavenger_1-624x1055.jpg 624w, .../gt-scavenger_1.jpg 1407w"

sizes="(max-width: 1407px) 100vw, 1407px"

格式为srcset=”[图片URL] [图片宽度], [图片URL] [图片宽度]…”，按最新的标准，单位“w”表示当前显示宽度的像素值。

能够有效避免资源的过分加载，在移动端经过按需加载，减小图片的加载量，加快网页打开速度。

再补充一种近乎于疯狂的方法：

<picture> <!-- 16:9 crop --> <source media="(min-width: 36em)" srcset="quilt_2/detail/large.jpg 1920w, quilt_2/detail/medium.jpg 960w, quilt_2/detail/small.jpg 480w" /> <!-- square crop --> <source srcset="quilt_2/square/large.jpg 822w, quilt_2/square/medium.jpg 640w, quilt_2/square/small.jpg 320w" /> <img src="quilt_2/detail/medium.jpg" alt="Detail of the above quilt, highlighting the embroidery and exotic stitchwork." /> </picture>

浏览器遍历 picture 的 source，直到找到一个属性知足当前环境的 media。它将匹配的 source 的 srcset 传给 img，即那个仍然是咱们在页面上“看见”的元素。

好吧，暂时不打算用这种。

 总结：首先须要压缩优化图片，其次，

<img>标签：jq懒加载；h5新属性srcset和sizes；picture;

background-image：ps存储连续；媒体查询；