淺探前端圖片優化

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

不一樣格式圖片優劣對比

有人可能會問說好的圖片優化呢？怎麼說到圖片格式了，其實在不一樣的場景選擇使用不一樣格式的圖片就是對圖片的一種優化，這是最直接最重要可是最容易被忽略的，如今網頁中經常使用的圖片格式有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);
    }
  }
}

這樣就能夠根據你項目中使用的樣式語言去生成所須要的語法，是否是很方便呢？

總結

這篇文章簡單介紹網頁開發中的各個圖片格式的優缺和一些經常使用的圖片優化，但願這篇文章對你們之後在作圖片優化時能有所幫助。若是有錯誤或不嚴謹的地方，歡迎批評指正，若是喜歡，歡迎點贊收藏