網頁圖片優化

今天逛掘金瀏覽到一片有關網頁圖片優化的文章
我先總結下方法：

     1. 降低图片的大小
     2. CSS Sprites（雪碧图）
     3. 字体图标
     4. 图片懒加载（lazyload.js）

接著，詳細解說下：

一、降低圖片的大小

這裡主推兩個小工具：  TinyPNG:網稱壓縮PNG的神站（支援png和jpg）; 智圖（支援png,jpg,webp），可大幅降低圖片的大小

注：webp是Google于2010年提出了一种新的图片压缩格式，14年又提出了动态WebP，目前只有谷歌内核可支持。

剛才有get到一個新的圖片自適應技術– SharpP，後面再補充。

二、CSS Sprites（雪碧圖/精靈圖）

#線上工具：CSS Sprites，超好用，不用麻煩UI去設計了，還可選擇圖片排列順序，重點是可以直接產生程式碼，不用再去手動測量了，很方便。

三、字體圖示

為Bootstrap而創造的圖示字體：font-awesome(具體操作不再囉嗦)
阿里巴巴向量圖示庫：iconfont
介紹下iconfont的使用，進入官網，直接搜尋要找的圖標，例如：短信，可以看下以下介面：

##可以加入庫、收藏或直接下載，選擇直接下載，可以看到這裡能夠選擇顏色和下載的格式：(看下圖)

#要下載多個的話，就先加入庫中，點擊右上角的購物車圖標，按照上面提示的步驟來，添加項目….(可創建多個項目，不同的項目使用不同的圖標，方便管理)，最後下載還可以生成在線鏈接

四、圖片懶載入(lazyload.js)

#前段時間做專案剛好用到這個，記錄下;

lazyload.js用於長頁面圖片的延遲加載，視口外的圖片會在視窗滾動到它的位置時再進行加載，這是與預加載相反的。可提高頁面載入速度、減少伺服器負載。

實作步驟：

 1. 首先下载lazyload.js，该插件依赖于jQuery，所以需要先加载jq；
 2. 将图片的真实路径写入src属性
 3. 给这些图片增加一个名为lazy的class
 4. 选择所有要lazyload的图片（img.lazy），执行lazyload();

注意：必須設定圖片的高度或寬度，否則外掛程式可能無法正常工作.

<script src="js/jquery-1.11.0.min.js"></script><script src="js/jquery.lazyload.min.js"></script><script type="text/javascript">
    /* 延时加载网页中除首屏图片之外的其它图片 */
    $("img.lazy").lazyload({
        effect: "fadeIn",   //载入方式
        skip_invisible: false,
        failurelimit: 2
    });</script>

以上是網頁圖片優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！