JavaScript不得不知的圖片Base64編碼小知識(shí)

圖片處理在前端工作中可謂占據(jù)了很重要的一壁江山。而圖片的 base64 編碼可能相對(duì)一些人而言比較陌生，本文不是從純技術(shù)的角度去討論圖片的 base64 編碼。標(biāo)題略大，不過只是希望通過一些淺顯的論述，讓你知道什么是圖片的 base64 編碼，為什么我們要用它，我們?nèi)绾问褂貌⑶曳奖愕氖褂盟⒆屇愣萌绾稳ピ谇岸说膶?shí)際工作中運(yùn)用它。

什么是 base64 編碼?

我不是來講概念的，直接切入正題，圖片的 base64 編碼就是可以將一副圖片數(shù)據(jù)編碼成一串字符串，使用該字符串代替圖像地址。

這樣做有什么意義呢?我們知道，我們所看到的網(wǎng)頁(yè)上的每一個(gè)圖片，都是需要消耗一個(gè) http 請(qǐng)求下載而來的(所有才有了 csssprites 技術(shù)的應(yīng)運(yùn)而生，但是 csssprites 有自身的局限性，下文會(huì)提到)。

沒錯(cuò)，不管如何，圖片的下載始終都要向服務(wù)器發(fā)出請(qǐng)求，要是圖片的下載不用向服務(wù)器發(fā)出請(qǐng)求，而可以隨著 HTML 的下載同時(shí)下載到本地那就太好了，而 base64 正好能解決這個(gè)問題。

那么圖片的 base64 編碼長(zhǎng)什么樣子呢?舉個(gè)栗子。www.google.com 的首頁(yè)搜索框右側(cè)的搜索小圖標(biāo)使用的就是base64編碼。我們可以看到：

上面分別是圖片的 base64 編碼在 css 里面的寫法和在 html 標(biāo)簽里的寫法。base64 編碼長(zhǎng)得就是這個(gè)樣子，當(dāng)然 base64 編碼不僅僅運(yùn)用在圖片編碼，還可以：

thunder://QUFodHRwOi8vZG93bi5zYW5kYWkubmV0L3RodW5kZXI3L1RodW5kZXI3LjEuNS4yMTUyLmV4ZVpa(不要復(fù)制我我真的不是種子)

嘿嘿?zèng)]錯(cuò)，迅雷的“專用地址”也是用 Base64 加密的，有興趣自行 google，不做贅述。

為什么要使用 Base64 編碼?

那么為什么要使用 base64 傳輸圖片文件?上文也有提及，因?yàn)檫@樣可以節(jié)省一個(gè) http 請(qǐng)求。圖片的 base64 編碼可以算是前端優(yōu)化的一環(huán)。效益雖小，但卻缺能積少成多。

說到這里，不得不提的是 CssSprites 技術(shù)，后者也是為了減少 http 請(qǐng)求，而將頁(yè)面中許多細(xì)小的圖片合并為一張大圖。那么圖片的 base64 編碼和 CssSprites 有什么異同，又該如何取舍呢?

所以，在這里要明確使用 base64 的一個(gè)前提，那就是被 base64 編碼的圖片足夠尺寸小。以博客園的 logo 為例：

如圖所示，博客園的 Logo 只有 3.27KB，已經(jīng)很小了，但是如果將其制作轉(zhuǎn)化成 base64 編碼，生成的 base64 字符串編碼足足有 4406 個(gè),也就是說，圖片被編碼之后，生成的字符串編碼大小一般而言都會(huì)比原文件稍大一些。即便 base64 編碼能夠被 gzip 壓縮，壓縮率能達(dá)到 50% 以上，想象一下，一個(gè)元素的 css 樣式編寫居然超過了 2000個(gè) 字符，那對(duì) css 整體的可讀性將會(huì)造成十分大的影響，代碼的冗余使得在此使用 base64 編碼將得不償失。

那么，是不是表示 base64 編碼無用武之地呢?不然。當(dāng)頁(yè)面中的圖片滿足以下要求，base64 就能大顯生手。

如果圖片足夠小且因?yàn)橛锰幍奶厥庑詿o法被制作成雪碧圖(CssSprites)，在整個(gè)網(wǎng)站的復(fù)用性很高且基本不會(huì)被更新。

那么此時(shí)使用 base64 編碼傳輸圖片就可謂好鋼用在刀刃上，思前想后，符合這個(gè)規(guī)則的，有一個(gè)是我們經(jīng)常會(huì)遇到的，就是頁(yè)面的背景圖 background-image 。在很多地方，我們會(huì)制作一個(gè)很小的圖片大概是幾px*幾px，然后平鋪它頁(yè)面當(dāng)背景圖。因?yàn)槭潜尘皥D的緣故，所以無法將它放入雪碧圖，而它卻存在網(wǎng)站的很多頁(yè)面，這種圖片往往只有幾十字節(jié)，卻需要一個(gè) http 請(qǐng)求，十分不值得。那么此時(shí)將它轉(zhuǎn)化為 base64 編碼，何樂而不為?

下面是一個(gè)只有 50 字節(jié)的2*2的的背景圖。將其轉(zhuǎn)化成 base64 編碼，只有 100 多個(gè)字符，相比一個(gè) http 請(qǐng)求，這種轉(zhuǎn)換無疑更值得推崇。

CssSprites與Base64編碼

簡(jiǎn)單陳述一下我對(duì)何時(shí)這使用這兩種優(yōu)化方法的看法。

使用CssSprites合并為一張大圖：

• 頁(yè)面具有多種風(fēng)格，需要換膚功能，可使用CssSprites
• 網(wǎng)站已經(jīng)趨于好，不會(huì)再三天兩頭的改動(dòng)(例如button大小、顏色等)
• 使用時(shí)無需重復(fù)圖形內(nèi)容
• 沒有 Base64 編碼成本，降低圖片更新的維護(hù)難度。(但注意 Sprites 同時(shí)修改 css 和圖片某些時(shí)候可能造成負(fù)擔(dān))
• 不會(huì)增加 CSS 文件體積

使用base64直接把圖片編碼成字符串寫入CSS文件：

• 無額外請(qǐng)求
• 對(duì)于極小或者極簡(jiǎn)單圖片
• 可像單獨(dú)圖片一樣使用，比如背景圖片重復(fù)使用等
• 沒有跨域問題，無需考慮緩存、文件頭或者cookies問題

更便捷的將圖片轉(zhuǎn)化為Base64編碼

將圖片轉(zhuǎn)化為 base64 編碼有許多工具，例如本文中我所使用的 http://www.pjhome.net/web/html5/encodeDataUrl.htm ，但是很多這些網(wǎng)站是國(guó)外網(wǎng)站，經(jīng)常被墻登陸不了。這里介紹一個(gè)更為快捷的方法，就是利用 Chrome 瀏覽器(我想 FEer 都應(yīng)該有Chrome 瀏覽器吧=。=)。

在 chrome 下新建一個(gè)窗口，然后把要轉(zhuǎn)化的圖片直接拖入瀏覽器，打開控制臺(tái)，點(diǎn) Source，如下圖所示，點(diǎn)擊圖片，右側(cè)就會(huì)顯示該圖片的 base64 編碼，是不是很方便。

一些誤區(qū)

Base64 雖有優(yōu)點(diǎn)，但是缺點(diǎn)也很明顯，在使用上存在一些明顯的缺陷。

1. 使用 Base64 不代表性能優(yōu)化

是的，使用 Base64 的好處是能夠減少一個(gè)圖片的 HTTP 請(qǐng)求，然而，與之同時(shí)付出的代價(jià)則是 CSS 文件體積的增大。

而 CSS 文件體積的增大意味著什么呢?意味著 CRP 的阻塞。

CRP(Critical Rendering Path，關(guān)鍵渲染路徑)：當(dāng)瀏覽器從服務(wù)器接收到一個(gè)HTML頁(yè)面的請(qǐng)求時(shí)，到屏幕上渲染出來要經(jīng)過很多個(gè)步驟。瀏覽器完成這一系列的運(yùn)行，或者說渲染出來我們常常稱之為“關(guān)鍵渲染路徑”。

通俗而言，就是圖片不會(huì)導(dǎo)致關(guān)鍵渲染路徑的阻塞，而轉(zhuǎn)化為 Base64 的圖片大大增加了 CSS 文件的體積，CSS 文件的體積直接影響渲染，導(dǎo)致用戶會(huì)長(zhǎng)時(shí)間注視空白屏幕。HTML 和 CSS 會(huì)阻塞渲染，而圖片不會(huì)。

2. 頁(yè)面解析 CSS 生成的 CSSOM 時(shí)間增加

Base64 跟 CSS 混在一起，大大增加了瀏覽器需要解析CSS樹的耗時(shí)。其實(shí)解析CSS樹的過程是很快的，一般在幾十微妙到幾毫秒之間。

CSS 對(duì)象模型 (CSSOM)：CSSOM是一個(gè)建立在web頁(yè)面上的 CSS 樣式的映射，它和DOM類似，但是只針對(duì)CSS而不是HTML。

CSSOM 生成過程：

CSSOM 生成過程大致是，解析 HTML ，在文檔的 head 部分遇到了一個(gè) link 標(biāo)記，該標(biāo)記引用一個(gè)外部 CSS 樣式表，下載該樣式表后根據(jù)上述過程生成 CSSOM 樹。 這里我們要知道的是，CSSOM 阻止任何東西渲染，(意味著在CSS沒處理好之前所有東西都不會(huì)展示)，而如果CSS文件中混入了Base64，那么(因?yàn)槲募w積的大幅增長(zhǎng))解析時(shí)間會(huì)增長(zhǎng)到十倍以上。

而且，最重要的是，增加的解析時(shí)間全部都在關(guān)鍵渲染路徑上。

所以，當(dāng)我們需要使用到 Base64 技術(shù)的時(shí)，一定要意識(shí)到上述的問題，有取舍的進(jìn)行使用(大家在開發(fā)vue的時(shí)候，配合webpack打包，應(yīng)該會(huì)發(fā)現(xiàn)有一些圖片會(huì)被webpack打包成base64格式，一般是1024個(gè)字節(jié)以內(nèi)的)。

當(dāng)前標(biāo)題：JavaScript不得不知的圖片Base64編碼小知識(shí)
標(biāo)題路徑：http://muchs.cn/news/103782.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)站制作、靜態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)