“能用表情包解決的問題，絕不多說一個(gè)字。”

“當(dāng)不知道回復(fù)什么的時(shí)候，甩過去一個(gè)表情包就好了。”

放眼望去，誰的 QQ/微信 收藏中沒有幾頁代表性的表情包，那真的是 out 了。在當(dāng)代網(wǎng)絡(luò)社交生活中，當(dāng)出現(xiàn)“只可意會(huì)不可言傳”的情緒和內(nèi)涵時(shí)，表情包大概是最合適的載體。

常見的表情包有靜態(tài)圖片和動(dòng)態(tài)圖片兩種。

靜態(tài)圖片最常見的格式是 jpg/png，動(dòng)態(tài)圖片則是 gif。在平常工作生活中，不僅僅表情包，圖片在網(wǎng)頁設(shè)計(jì)中也是重中之重。

常見的三種圖片格式

圖片格式種類繁多，我們?nèi)粘Ｊ褂米疃嗟膱D片文件格式是 jpg、png 和 gif。這些格式由于與目前瀏覽器的兼容性，客戶端的網(wǎng)絡(luò)速度以及用戶的普遍需求而成為最受歡迎的格式。

在了解這三種格式的圖片之前，我們需要先了解一個(gè)概念，就是圖片壓縮。

有損 vs 無損

圖片文件格式有可能會(huì)對圖片的文件大小進(jìn)行不同程度的壓縮，圖片的壓縮分為有損壓縮和無損壓縮兩種。

• 有損壓縮：指在壓縮文件大小的過程中，損失了一部分圖片的信息，也即降低了圖片的質(zhì)量，并且這種損失是不可逆的，我們不可能從有一個(gè)有損壓縮過的圖片中恢復(fù)出原來的圖片。

• 無損壓縮：只在壓縮文件大小的過程中，圖片的質(zhì)量沒有任何損耗。我們?nèi)魏螘r(shí)候都可以從無損壓縮過的圖片中恢復(fù)出原來的信息。

在了解這個(gè)簡單的情況后，我們詳細(xì)來看看這三種圖片格式的區(qū)別和特點(diǎn)。

JPEG 格式

JPEG（Joint Photographic Experts Group）即聯(lián)合圖像專家組，是用于連續(xù)色調(diào)靜態(tài)圖像壓縮的一種標(biāo)準(zhǔn)，文件后綴名為 .jpg 或 .jpeg，是最常用的圖像文件格式。

JPEG 圖片格式的設(shè)計(jì)目標(biāo)，**是在不影響人類可分辨的圖片質(zhì)量的前提下，盡可能的壓縮文件大小。**這意味著 JPEG 去掉了一部分圖片的原始信息，也就是進(jìn)行了有損壓縮。JPEG 的圖片的優(yōu)點(diǎn)，是采用了直接色，得益于更豐富的色彩，JPEG 非常適合用來存儲(chǔ)照片，用來表達(dá)更生動(dòng)的圖像效果，比如顏色漸變。

然而，JPEG 不適合用來存儲(chǔ)企業(yè) Logo、線框類的圖。因?yàn)橛袚p壓縮會(huì)導(dǎo)致圖片模糊，而直接色的選用，又會(huì)導(dǎo)致圖片文件體積更大。

PNG 格式

PNG（Portable Network Graphics）即便攜式網(wǎng)絡(luò)圖形，是一種采用無損壓縮算法的位圖格式，文件后綴名為 .png。PNG 使用從 LZ77 派生的無損數(shù)據(jù)壓縮算法，一般應(yīng)用于 JAVA 程序、網(wǎng)頁中，它的壓縮比高，生成文件體積小。

PNG 格式是我們在數(shù)字設(shè)計(jì)項(xiàng)目中最常使用的格式。PNG 通常具有比其他格式更大的文件大小，但是它保留了硬性邊緣效果，且可以處理大量顏色。另外 PNG 有個(gè)比較有趣的特性，那就是支持透明背景，這也是大多數(shù)網(wǎng)站將 Logo 創(chuàng)建為 PNG 格式的主要原因。

GIF 格式

GIF（Graphics Interchange Format）即圖像互換格式，是在 1987 年由 Compu Serve 公司為了填補(bǔ)跨平臺圖像格式的空白而發(fā)展起來的。眾所周知，它最大的特點(diǎn)就是“能動(dòng)”。因此，GIF 通常用于從圖像文件創(chuàng)建動(dòng)畫。通過在壓縮中合并無損質(zhì)量，可以無損傳輸和存儲(chǔ)這些文件，并且對圖像庫的存儲(chǔ)影響較小。

GIF 是無損的，采用 GIF 格式保存圖片不會(huì)降低圖片質(zhì)量。得益于數(shù)據(jù)的壓縮，文件體積小，也是 GIF 格式的優(yōu)點(diǎn)。此外，它還具有支持動(dòng)畫以及透明背景。

GIF 格式適用于對色彩要求不高同時(shí)需要文件體積較小的場景，比如企業(yè) Logo、線框類的圖等。因其體積小的特點(diǎn)，現(xiàn)在 GIF 也已經(jīng)被廣泛的應(yīng)用在各類網(wǎng)站中。

從左到右，這些文件依次是：24 位 JPG 壓縮文件，8 位 GIF，8 位 PNG，全質(zhì)量 24 位 JPG 和 24 位 PNG

新興的圖片格式 —— WebP

無論是 PC 端還是移動(dòng)端，評價(jià)網(wǎng)站性能的一個(gè)主要指標(biāo)就是頁面加載時(shí)間，而圖片占到了頁面大小的 60%-70%。那么如何保證圖片質(zhì)量的前提下，縮小圖片體積，提升網(wǎng)頁加載速度，成為了一件有價(jià)值的事情。

如今，JPEG、PNG 以及 GIF 這些格式的圖片已經(jīng)沒有太大的優(yōu)化空間。而 Google 推出的 WebP 圖片格式給圖片優(yōu)化提供了另一種可能。

WebP 是一種支持無損和有損壓縮的圖片格式，派生自圖像編碼格式 VP8。根據(jù) Google 的測試，無損壓縮后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使這些 PNG 文件經(jīng)過其他壓縮工具壓縮之后，WebP 還是可以減少 28％ 的文件大小。

WebP 現(xiàn)已成為主流網(wǎng)站喜歡的圖片格式，淘寶、豆瓣、京東等網(wǎng)站皆已使用 WebP 圖片以降低成本，提高網(wǎng)頁加載速度。但目前并非所有瀏覽器都支持 WebP，支持的情況參見如下圖所示：

又拍云省錢大法

很多人都會(huì)擔(dān)心，部分瀏覽器不支持 WebP 圖片，特別是 Safari 也不支持，會(huì)不會(huì)影響用戶的體驗(yàn)？

這里就強(qiáng)勢推薦下又拍云 WebP 自適應(yīng)，無需網(wǎng)站服務(wù)器和前端等層面技術(shù)上的任何改動(dòng)，就能解除你的顧慮。那WebP 自適應(yīng)是如何做到的呢？

通過 CDN 判斷瀏覽器是否支持 WebP

Google Chrome 、 Firefox 等瀏覽器以及許多其他工具和軟件庫都支持 WebP，但是目前并非所有瀏覽器都支持 WebP。因此需要對瀏覽器進(jìn)行識別。又拍云 CDN 通過 HTTP Accept 來自動(dòng)判斷瀏覽器是否支持 WebP 格式的圖片。如果支持，又拍云 CDN 則將原圖實(shí)時(shí)轉(zhuǎn)為 WebP 格式的圖片，并推送給瀏覽器；如遇到不支持 WebP 格式的瀏覽器，則推送原圖。

如何實(shí)現(xiàn)相同 URL 訪問，緩存不同副本圖片？

如何實(shí)現(xiàn)相同 URL 訪問，緩存不同副本圖片？

又拍云 CDN 利用到了緩存里面的 Vary 機(jī)制，同一個(gè) URL 根據(jù)不同 Header 頭的值緩存多份不同的拷貝，同時(shí)保持 URL 不變。例如：

很明顯，WebP 是提升用戶體驗(yàn)的一大利器，雖然瀏覽器對 WebP 的支持仍有需要改進(jìn)的地方，但完全可以使用又拍云 CDN 服務(wù)，來解決 WebP 兼容問題和處理批量 WebP 圖片格式轉(zhuǎn)換，高效地減少網(wǎng)站帶寬成本。

總結(jié)

以上是生活随笔為你收集整理的这些表情包你有吗？来 Battle 啊的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。