摘要：性能優(yōu)化是前端開發(fā)必不可少的一環(huán)，而圖片優(yōu)化又是性能優(yōu)化中必不可少的一環(huán)，但不知道有多少開發(fā)者在網(wǎng)頁的開發(fā)過程中會注意圖片的使用，圖片使用不當(dāng)可能會導(dǎo)致網(wǎng)頁加載卡頓網(wǎng)頁加載速度慢等問題，這篇文章將會將我以往對圖片的處理做個總結(jié)。

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

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

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

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

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

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

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

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

圖片壓縮應(yīng)該是圖片優(yōu)化時最常用的方案，因為很簡單，只需要將圖片上傳到tinypng或者智圖這類的在線壓縮圖片平臺，對圖片進(jìn)行壓縮，就可以較小圖片質(zhì)量

雪碧圖經(jīng)常用來將多個小圖標(biāo)和成一張圖片，然后將合成的圖片當(dāng)作背景圖片是使用，這樣可以減少圖片的網(wǎng)絡(luò)請求，使用之前可能需要請求10個網(wǎng)絡(luò)小圖標(biāo)，而使用之后請求一個就可以搞定，我個人通常使用gopng這個網(wǎng)站在線生成，還可以自動生成對應(yīng)的css代碼

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

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

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

這個優(yōu)化方案應(yīng)該都懂，其實就是在寫代碼之前先考慮一下設(shè)計稿里面的哪些內(nèi)容是可以通過代碼來實現(xiàn)的，能通過代碼實現(xiàn)的盡量用代碼實現(xiàn)，同時實現(xiàn)的時候多考慮繪制性能，能使用css3做GPU硬件加速的就盡量使用css3屬性，這些都能減少圖片使用而且不影響渲染性能

什么是響應(yīng)式圖片加載？其實就是在不同分辨率的設(shè)備上顯示不同尺寸的圖片，避免資源的浪費(fèi)，常用的方法就是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標(biāo)簽的屬性上，當(dāng)圖片被滾動到頁面上時，在將src屬性替換成圖片地址來達(dá)到懶加載的效果

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

{
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]"
    }
  }]
}

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

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

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文件合成雪碧圖，并且輸出到對應(yīng)目錄，同時還可以生成對應(yīng)的樣式文件，樣式文件的語法會根據(jù)你配置的樣式文件的后綴動態(tài)生成，比如這里我們配置的是sprite.css,生成的文件內(nèi)容就是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);
    }
  }
}

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

這篇文章簡單介紹網(wǎng)頁開發(fā)中的各個圖片格式的優(yōu)缺和一些常用的圖片優(yōu)化，希望這篇文章對大家以后在做圖片優(yōu)化時能有所幫助。
如果有錯誤或不嚴(yán)謹(jǐn)?shù)牡胤剑瑲g迎批評指正，如果喜歡，歡迎點贊收藏