淺探前端圖片優化

性能優化是前端開發必不可少的一環，而圖片優化又是性能優化中必不可少的一環，但不知道有多少開發者在網頁的開發過程中會注意圖片的使用，圖片使用不當可能會導致網頁加載卡頓、網頁加載速度慢等問題，這篇文章將會將我以往對圖片的處理做個總結。

不同格式圖片優劣對比

有人可能會問說好的圖片優化呢？怎麼說到圖片格式了，其實在不同的場景選擇使用不同格式的圖片就是對圖片的一種優化，這是最直接最重要但是最容易被忽略的，現在網頁中常用的圖片格式有JPG.PNG.SVG.WebP等，接下來我們就來介紹它們有何優劣

JPG

JPG格式的圖片應該是使用場景最多的圖片的格式了，由於JPG格式採用了極其高效的壓縮算法，使其能在壓縮50%甚至60%的情況下依舊可以保持不錯的圖片質量，因此在網站設計中使用類似背景圖，輪播圖等大圖時都會考慮使用JPG格式的圖片，但是JPG始終是有損壓縮，在對線條感較強或者顏色比較豐富的圖片做人爲壓縮時，可能會出現失真的情況，同時它也不支持透明度處理

PNG

PNG格式的圖片特點大家都知道，就是高保真無損壓縮，當對圖片設計有較高要求時，首選PNG格式，顯示高清細膩，但是它也有明顯的問題就是體積過大

SVG

SVG格式圖片有個顯著特點就是它是可編程的，是基於xml語法的，同時作爲矢量圖，它可以無限放大而不變形，因此可以方便的對不同手機屏幕做自適應，相比於PNG和JPG它的體積更小，只有1kb甚至更小，但是它最大的缺陷就是渲染成本過高，因此我們在選擇一些小且色彩單一的圖標時可以考慮使用SVG格式的圖片，如圖

一般情況下，我們會將SVG格式的圖片上傳到iconfont上，這樣不僅方便管理而且方便使用，同時iconfont上還有許多其他設計師設計的優秀小圖標可以直接拿來使用，是不是很方便呢？

WebP與gif

這兩兄弟我們一般都是用來展示動圖的，但是WebP也可以用來展示靜態圖片，WebP最大的優點就是無損壓縮，體積小，但是瀏覽器支持太差，我們來看caniuse的數據：

從圖上可以看到WebP格式在蘋果設備和IE上基本不支持，因此瀏覽器的不支持是它的硬傷，因此在對動圖做展示的時候我們不得不選gif，即便它的體積很大，渲染開銷也大

圖片優化方案

圖片質量壓縮

圖片壓縮應該是圖片優化時最常用的方案，因爲很簡單，只需要將圖片上傳到tinypng或者智圖這類的在線壓縮圖片平臺，對圖片進行壓縮，就可以較小圖片質量

雪碧圖

雪碧圖經常用來將多個小圖標和成一張圖片，然後將合成的圖片當作背景圖片是使用，這樣可以減少圖片的網絡請求，使用之前可能需要請求10個網絡小圖標，而使用之後請求一個就可以搞定，我個人通常使用gopng這個網站在線生成，還可以自動生成對應的css代碼

base64

將一個圖片地址進行base64編碼後會得到一串字符串，將這個字符直接放到img的src屬性上，你會發現瀏覽器是可以識別這一串字符的，不需要發送網絡請求直接解析，這樣就可以達到減少網絡請求的目的，但是base64編碼後的圖片質量比原圖圖片質量要大，因此也只會在一些質量較小的圖標類圖片上面使用，否則得不償失，常見使用base64編碼的方案就是webpack的url-loader，舉個例子：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

上面的這個配置就是把8k一下的通過url-loader進行base64編碼，轉換成一串DataUrl

css替換簡單圖標

這個優化方案應該都懂，其實就是在寫代碼之前先考慮一下設計稿裏面的哪些內容是可以通過代碼來實現的，能通過代碼實現的儘量用代碼實現，同時實現的時候多考慮繪製性能，能使用css3做GPU硬件加速的就儘量使用css3屬性，這些都能減少圖片使用而且不影響渲染性能

響應式圖片加載

什麼是響應式圖片加載？其實就是在不同分辨率的設備上顯示不同尺寸的圖片，避免資源的浪費，常用的方法就是css3的媒體查詢(media query)，來看個例子：

@media screen and (max-width: 375px) {
  img {
    background-image: url('phone.png');
  }
}
@media screen and (max-width: 768px) {
  img {
    background-image: url('tablet.png');
  }
}

懶加載

圖片懶加載的目的就是爲加快頁面加載速度而做的，爲了不讓圖片一次全部加載出來，通過將圖片地址存放在一個img標籤的屬性上，當圖片被滾動到頁面上時，在將src屬性替換成圖片地址來達到懶加載的效果

webpack圖片優化

圖片壓縮

webpack也可以對圖片進行壓縮操作，通過image-webpack-loader可以對輸出的圖片進行指定質量的壓縮，來看具體例子：

{
test: /\.(png|jpg|gif|svg)$/,
use: [
  'file-loader',
  {
    loader: 'image-webpack-loader',
    options: {
      bypassOnDebug: true,
      mozjpeg: {
        progressive: true,
        quality: 65
      },
      optipng: {
        enabled: false,
      },
      pngquant: {
        quality: '65-90',
        speed: 4
      },
      gifsicle: {
        interlaced: false,
      },
      // the webp option will enable WEBP
      webp: {
        enabled: false,
      },
      limit: 1,
      name: '[name].[ext]?[hash]'
    }
  }]
}

上面的配置指定了各個格式的圖片的壓縮質量，並且通過hash編碼重新命名輸出

合成雪碧圖

webpack的webpack-spritesmith插件提供了自動合成雪碧圖的功能並且可以自動生成對應的央視文件，非常方便，來看一個具體的例子：

const SpritesmithPlugin = require('webpack-spritesmith')
new SpritesmithPlugin({
  src: {
    cwd: path.resolve(__dirname, 'src/asserts'),
    glob: '*.png'
  },
  target: {
    image: path.resolve(__dirname, 'src/spritesmith-generated/sprite.png'),
    css: path.resolve(__dirname, 'src/spritesmith-generated/sprite.css')
  },
  apiOptions: {
    cssImageRef: "src/sprite.png"
  }
})

通過上面配置就能將asserts目錄下的所有png文件合成雪碧圖，並且輸出到對應目錄，同時還可以生成對應的樣式文件，樣式文件的語法會根據你配置的樣式文件的後綴動態生成，比如這裏我們配置的是sprite.css,生成的文件內容就是css語法：

.icon-checkout {
  background-image: url(src/sprite.png);
  background-position: -96px -56px;
  width: 34px;
  height: 32px;
}
.icon-clock {
  background-image: url(src/sprite.png);
  background-position: -96px 0px;
  width: 56px;
  height: 56px;
}
.icon-close {
  background-image: url(src/sprite.png);
  background-position: 0px 0px;
  width: 96px;
  height: 96px;
}

如果將配置中的sprite.css改成sprite.scss那麼生成語法就是scss的語法：

@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}

這樣就可以根據你項目中使用的樣式語言去生成所需要的語法，是不是很方便呢？

總結

這篇文章簡單介紹網頁開發中的各個圖片格式的優缺和一些常用的圖片優化，希望這篇文章對大家以後在做圖片優化時能有所幫助。
如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊收藏