網站優化之圖片

圖片應作成響應式、(大尺寸圖片建議)使用漸進式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存儲連續；媒體查詢；