如何實現響應式圖片？

• 如何挑選第三方組件，輪播carousel插件，owl-carousel2

• 響應式圖片

• 圖片壓縮，與webp

如何挑選第三方組件

不重複造輪子，就要選擇一個好輪子：
1.使用人數
2.是否開源
3.文檔是否齊全
4.活躍性
5.輕量級
隨便選一個，輪播的插件仍是不少的owl-carousel2，符合上述條件，使用看官方文檔仍是比較簡單上手的。

響應式圖片

加載與用戶設備相匹配的圖片，既快速又不會影響用戶體驗！

1.js或者服務器

$(document).ready(function () {
    function makeImageResponsive() {
        var width = $(window).width();
        if(width < 400){使用A圖片}else {使用B圖片}
    }
    $(window).on('resize load',makeImageResponsive);
})

直接看代碼，就是讀取瀏覽器width選擇相對應的圖片，此外還能夠設置cookie配置不一樣圖片。

2.srcset和sizes
看大神的解釋
響應式圖片srcset全新釋義sizes屬性w描述符，列子以下

<img src="a.png" alt=""
                srcset="a480.png 480w,b800.png 800w,c1600.png 1600w"
                sizes="100vw">

3.<picture>標籤效果,與兼容

<picture>
                    <source srcset="img/ad001-l.png" media="(min-width:50em)">
                    <source srcset="img/ad001-m.png" media="(min-width:30em)">
                    <img src="img/ad001.png" alt="2015年度報告">
                </picture>

經過媒體查詢的方式，根據頁面寬度（固然也能夠添加其餘參考項如是否橫屏）加載不一樣圖片。這樣不只節省帶寬還能使得圖片更加適配內容。可是好事都沒有這麼順利，如今不少瀏覽器不支持picture標籤。
這裏就須要引入另外一個概念--Polyfill
舉個例子，html5的storage(session,local), 不一樣瀏覽器，不一樣版本，有些支持，有些不支持。

咱們又想使用這個特性，怎麼辦？

有些人就寫對應的Polyfill（Polyfill有不少），幫你把這些差別化抹平，不支持的變得支持了（簡單來說，寫些代碼判斷當前瀏覽器有沒有這個功能，沒有的話，就寫一些支持的補丁代碼）。

你只須要把須要的Polyfill引入到你的程序裏，就能夠了。因此picture標籤也有它本身的polyfill--picturefill.js，引入JS則低版本瀏覽器能夠兼容picture標籤。

4.svg
svg矢量圖解決響應式問題，不作描述，svg也是解決方式之一。

圖片壓縮和webp

圖片壓縮能夠給用戶帶來極大致驗度提高，UI給出的png圖經過壓縮後通常能夠縮小1/3，且像素效果差很少。
推薦網站webp是谷歌開發的圖片格式，同質量下比jpg小1/3。