卡卡網(wǎng)

我們?cè)谧鼍W(wǎng)站的時(shí)候，都會(huì)用到圖片，通常情況下，會(huì)使用JPEG、GIF、PNG或SVG這幾種格式的文件。

我們通常不知道為何選擇某一種格式，但是有可能最終會(huì)減慢網(wǎng)站加載速度，因?yàn)樗玫膱D像不是可用的最佳格式，也不是優(yōu)化的。

其實(shí)，每一種圖片類型格式都有其獨(dú)特的特點(diǎn)，有優(yōu)點(diǎn)，也有缺點(diǎn)。

本文將介紹6種Web圖像文件優(yōu)缺點(diǎn)比較：JPEG(JPG)、PNG、SVG、GIF、BMP、WebP。

圖像文件類型和格式主要分為兩大類：光柵圖像文件和矢量圖像文件。

讓我們仔細(xì)看看每個(gè)類別。

光柵圖像文件格式

Web 上最常見的圖像格式（JPEG、GIF 和 PNG）都屬于光柵類別。

光柵圖像文件類型顯示靜態(tài)圖像，其中每個(gè)像素都有基于其分辨率（例如 1280×720）定義的顏色、位置和比例。

由于它們是靜態(tài)的，因此你無法有效地調(diào)整圖像大小，原始設(shè)計(jì)和像素只會(huì)被拉伸以填充額外的空間。這最終會(huì)產(chǎn)生模糊、像素化或其他失真的圖像。

 
光柵圖像文件

我們?cè)诰W(wǎng)上看到的絕大多數(shù)照片或圖像都使用光柵圖像格式。

矢量圖像文件格式

SVG是矢量圖像文件類型。

與靜態(tài)光柵圖像文件格式不同，矢量圖形使用笛卡爾平面上的線和曲線系統(tǒng)，與總面積相比，而不是任何單個(gè)像素。

這意味著你可以無休止地放大原始圖像分辨率，而不會(huì)損失任何質(zhì)量或失真。

 
圖像放大7倍比較

如你所見，放大7倍時(shí)的質(zhì)量差異是完全無法比擬的。

由于 SVG 根據(jù)總面積的百分比而不是像素來計(jì)算位置，因此根本沒有像素化。 

只有 8% 的網(wǎng)站不包含視覺內(nèi)容……但對(duì)于另外 92% 的網(wǎng)站，顯示具有正確文件類型的圖像至關(guān)重要。

6種Web常見的圖像文件類型

下面，我們將介紹6種Web常見的圖像文件類型，深入探討它們的優(yōu)缺點(diǎn)、瀏覽器和操作系統(tǒng)支持以及每種格式的理想用例。

• JPEG（JPG）
• PNG - 便攜式網(wǎng)絡(luò)圖形
• GIF - 圖形交換格式
• WebP
• BMP——位圖
• SVG — 可縮放矢量圖形

1、JPEG（JPG）

JPEG（或 JPG）是一種具有有損壓縮的光柵圖像文件格式，適用于共享圖像。JPEG 是“有損”的，這意味著它們會(huì)減小文件大小，但也會(huì)在你使用該格式時(shí)降低圖像質(zhì)量。

JPEG 仍然是你在網(wǎng)上看到的最常用的圖像文件類型之一，因?yàn)樗哂袎嚎s和幾乎通用的瀏覽器/操作系統(tǒng)支持。

大多數(shù)社交媒體平臺(tái)會(huì)自動(dòng)將上傳的圖像文件轉(zhuǎn)換為 JPEG。他們還使用獨(dú)特的社交媒體圖像尺寸來控制照片的分辨率。

JPEG（或 JPG）的優(yōu)點(diǎn)和缺點(diǎn)

• 通用瀏覽器和操作系統(tǒng)支持。
• 相當(dāng)小的文件大小。
• 有損圖像壓縮可能會(huì)導(dǎo)致文本可讀性差。

瀏覽器和操作系統(tǒng)支持

• 從所有主流瀏覽器（Chrome、Firefox、Safari 等）的 1.0 版開始支持
• 所有主要操作系統(tǒng)的所有圖像查看器和編輯器默認(rèn)支持。

用例

• 博客和文章圖片的不錯(cuò)選擇，例如受訪者頭像、產(chǎn)品圖片等。
• 不要將JPEG 用于包含大量小文本的信息圖表或以文本為關(guān)鍵的教程截圖。 

2、PNG——便攜式網(wǎng)絡(luò)圖形

PNG 是一種光柵圖形格式，支持無損壓縮，保持顏色之間的細(xì)節(jié)和對(duì)比度。

特別是，PNG 提供比 JPEG 更好的文本可讀性。

這使得 PNG 成為更受歡迎的信息圖表、橫幅、屏幕截圖和其他包含圖像和文本的圖形的選擇。

PNG 的優(yōu)點(diǎn)和缺點(diǎn)

• 更高質(zhì)量（無損）的圖像和清晰可見的文本。
• 如果過度使用（尤其是高分辨率圖像），較大的文件大小會(huì)降低您的網(wǎng)站速度。

瀏覽器和操作系統(tǒng)支持

• 支持所有主流瀏覽器（Chrome、Edge、Firefox、Internet Explorer、Opera、Safari）。
• 受所有主要操作系統(tǒng)及其標(biāo)準(zhǔn)圖像編輯器的支持。

用例

• 信息圖表、橫幅、博客圖形、屏幕截圖、優(yōu)惠券和其他包含文本的視覺效果的理想選擇。
• 不要用于高分辨率照片，因?yàn)樗鼤?huì)創(chuàng)建高達(dá)幾兆字節(jié)的大文件。

3、GIF——圖形交換格式

GIF 是另一種屬于光柵格式的圖像文件類型。它使用無損壓縮，但將圖像“限制”為每像素 8 位和 256 色的有限調(diào)色板。

GIF 格式是最著名（也是最常用）的動(dòng)畫圖像，因?yàn)樗?8 位限制使動(dòng)畫的文件大小保持較小且對(duì) Internet 友好。

GIF 的優(yōu)點(diǎn)和缺點(diǎn)

• 文件大一點(diǎn)。
• 動(dòng)畫支持。
• 8 位限制會(huì)導(dǎo)致圖像質(zhì)量受限。

瀏覽器和操作系統(tǒng)支持

• 支持所有主流瀏覽器（Chrome、Edge、Firefox、Internet Explorer、Opera、Safari）。
• 受所有主要操作系統(tǒng)及其標(biāo)準(zhǔn)圖像編輯器的支持。

用例

• 使用動(dòng)畫 GIF 不僅可以“為內(nèi)容增添趣味”，還可以演示如何完成教程和指南中的任務(wù)。
• 如果你需要大于 8 位的彩色圖像（JPEG 最多支持 24 位），請(qǐng)不要使用它。

4、WebP

WebP 是一種專門為提供更好的無損和有損圖像壓縮而開發(fā)的圖像格式。

從 JPEG 和 PNG 切換到 WebP 有助于節(jié)省服務(wù)器磁盤空間和大量帶寬，圖像文件最多可縮小 35% 以獲得相同的質(zhì)量。

WebP 的優(yōu)點(diǎn)和缺點(diǎn)

• 較小的文件可獲得相同或更好的圖像質(zhì)量。
• 并非所有瀏覽器和圖像編輯器都支持。

瀏覽器和操作系統(tǒng)支持

• Google Chrome（桌面版 17+，移動(dòng)版 25+）、Firefox (65+)、Edge (18+) 和 Opera (11.0+) 原生支持 WebP。Safari 計(jì)劃的第 14 版將支持 WebP。
• 大多數(shù)原生操作系統(tǒng)圖像編輯器仍然不支持該格式，但 Photoshop 等專業(yè)選項(xiàng)支持 WebP。

用例

• 替換 JPEG 和 PNG 文件以節(jié)省帶寬并加速你的網(wǎng)站。

5、BMP——位圖

位圖 (BMP) 是一種大部分過時(shí)的圖像文件格式，它映射單個(gè)像素幾乎沒有壓縮。這意味著 BMP 文件很容易變得非常大，并且無法存儲(chǔ)或處理。

位圖 (BMP) 的優(yōu)點(diǎn)和缺點(diǎn)

• 與 WebP、GIF 或 PNG 等格式相比，巨大的文件大小沒有明顯的質(zhì)量提升。

瀏覽器和操作系統(tǒng)支持

• 支持所有主流瀏覽器（Chrome、Edge、Firefox、Internet Explorer、Opera、Safari）。
• 大多數(shù)默認(rèn)操作系統(tǒng)圖像編輯器中的本機(jī)支持，例如 MS Paint。

用例

• 2022 年，BMP 圖像格式的合法用例基本為零。 

6、SVG——可縮放矢量圖形

Scalable Vector Graphics 文件格式，通常稱為 SVG，是由 W3C 開發(fā)的一種標(biāo)記語言，用于在瀏覽器中渲染二維圖像。

它不像光柵格式那樣依賴像素，而是使用 XML 文本以類似于數(shù)學(xué)方程式創(chuàng)建圖形的方式來勾勒形狀和線條。

這意味著您可以無限放大 SVG 圖像而不會(huì)損失任何質(zhì)量。

SVG 的優(yōu)點(diǎn)和缺點(diǎn)

• 用于簡單插圖、形狀和文本的小文件大小和無損縮放。
• 不是圖像或復(fù)雜繪圖的理想格式。

瀏覽器和操作系統(tǒng)支持

• 支持所有主流瀏覽器（Chrome、Edge、Firefox、Internet Explorer、Opera、Safari）。
• 默認(rèn)圖像編輯器往往不支持 SVG（因?yàn)樗贿m合照片），但大多數(shù)插圖軟件都支持 SVG 導(dǎo)出。

用例

• SVG 是徽標(biāo)、圖標(biāo)、簡單插圖以及您希望通過響應(yīng)式設(shè)計(jì)自由擴(kuò)展的任何其他內(nèi)容的理想格式。 

圖像文件類型常見問題解答

圖像文件的 3 種常見文件類型是什么？

根據(jù)與 Web 使用相關(guān)的數(shù)據(jù)，三種最常見的圖像文件類型是 PNG、JPEG 和 SVG。

 
圖片文件格式使用統(tǒng)計(jì)

哪種圖像格式質(zhì)量高？

對(duì)于 Web 圖像，對(duì)于相同質(zhì)量的照片，WebP 文件格式提供的文件大小比 JPEG 小 25-35% ，這意味著你可以為相同的磁盤空間上傳更高質(zhì)量的圖像并加快你的網(wǎng)站速度。

PNG 文件提供無損壓縮，但這意味著文件大小將非常大并且加載速度很慢。單個(gè) PNG 文件通常可以達(dá)到數(shù)百 KB 甚至 1MB 以上。但是，如果你利用一些策略，例如延遲加載和CDN，你仍然可以擁有一個(gè)快速的站點(diǎn)。

哪些文件格式支持透明度？

支持透明度的最常見的 Web 圖像文件類型是 PNG、WebP、SVG。

流行的 JPEG 圖像格式不支持透明度。

PNG比JPEG好嗎？

PNG和JPEG之間的主要區(qū)別在于PNG是一種無損圖像格式，而JPEG是一種有損圖像格式。這基本上意味著 PNG 使用壓縮技術(shù)而不犧牲圖像的原始質(zhì)量或細(xì)節(jié)。

對(duì)于圖像中的文本、教程截圖，以及當(dāng)你希望標(biāo)志或其他精細(xì)元素在照片中 100% 可見時(shí)，PNG 是正確的格式。

總結(jié)

不乏可以合法用于項(xiàng)目的圖像。希望本文能幫助你了解在哪種情況下使用哪種圖像文件類型和格式以獲得最佳效果。

光柵格式最適合用于圖像和圖片，而矢量是徽標(biāo)、圖標(biāo)和數(shù)字圖形的絕佳替代品。

為正確的任務(wù)使用正確的圖像文件類型不僅可以幫助提高頁面加載速度，還可以降低帶寬和服務(wù)器負(fù)載。作為后續(xù)的積極影響，你的整體用戶體驗(yàn)也將大大改善。

相關(guān)文章

• 瀏覽器直接保存SVG為PNG圖片的方法
• 在線svg-to-png，svg轉(zhuǎn)png，svg2png，支持透明背景

標(biāo)簽: image  圖像格式文件