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

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

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

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

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

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

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

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

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

圖片壓縮應(yīng)該是圖片優(yōu)化時(shí)最常用的方案，因?yàn)楹芎?jiǎn)單，只需要將圖片上傳到tinypng或者智圖這類的在線壓縮圖片平臺(tái)，對(duì)圖片進(jìn)行壓縮，就可以較小圖片質(zhì)量

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

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

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

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

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

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

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

圖片懶加載的目的就是為加快頁(yè)面加載速度而做的，為了不讓圖片一次全部加載出來(lái)，通過(guò)將圖片地址存放在一個(gè)img標(biāo)簽的屬性上，當(dāng)圖片被滾動(dòng)到頁(yè)面上時(shí)，在將src屬性替換成圖片地址來(lái)達(dá)到懶加載的效果

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

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

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

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

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"
  }
})

通過(guò)上面配置就能將asserts目錄下的所有png文件合成雪碧圖，并且輸出到對(duì)應(yīng)目錄，同時(shí)還可以生成對(duì)應(yīng)的樣式文件，樣式文件的語(yǔ)法會(huì)根據(jù)你配置的樣式文件的后綴動(dòng)態(tài)生成，比如這里我們配置的是sprite.css,生成的文件內(nèi)容就是css語(yǔ)法：

.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那么生成語(yǔ)法就是scss的語(yǔ)法：

@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ù)你項(xiàng)目中使用的樣式語(yǔ)言去生成所需要的語(yǔ)法，是不是很方便呢？

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