卡卡網(wǎng)

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

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

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

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

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

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

光柵圖像文件格式

Web 上最常見(jiàn)的圖像格式（JPEG、GIF 和 PNG）都屬于光柵類(lèi)別。

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

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

 
光柵圖像文件

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

矢量圖像文件格式

SVG是矢量圖像文件類(lèi)型。

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

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

 
圖像放大7倍比較

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

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

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

6種Web常見(jiàn)的圖像文件類(lèi)型

下面，我們將介紹6種Web常見(jiàn)的圖像文件類(lèi)型，深入探討它們的優(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)上看到的最常用的圖像文件類(lèi)型之一，因?yàn)樗哂袎嚎s和幾乎通用的瀏覽器/操作系統(tǒng)支持。

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

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

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

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

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

用例

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

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

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

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

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

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

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

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

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

用例

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

3、GIF——圖形交換格式

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

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

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

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

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

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

用例

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

4、WebP

WebP 是一種專(zhuān)門(mén)為提供更好的無(wú)損和有損圖像壓縮而開(kāi)發(fā)的圖像格式。

從 JPEG 和 PNG 切換到 WebP 有助于節(jié)省服務(wù)器磁盤(pán)空間和大量帶寬，圖像文件最多可縮小 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 等專(zhuān)業(yè)選項(xiàng)支持 WebP。

用例

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

5、BMP——位圖

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

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

• 與 WebP、GIF 或 PNG 等格式相比，巨大的文件大小沒(méi)有明顯的質(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 文件格式，通常稱(chēng)為 SVG，是由 W3C 開(kāi)發(fā)的一種標(biāo)記語(yǔ)言，用于在瀏覽器中渲染二維圖像。

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

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

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

• 用于簡(jiǎn)單插圖、形狀和文本的小文件大小和無(wú)損縮放。
• 不是圖像或復(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)、簡(jiǎn)單插圖以及您希望通過(guò)響應(yīng)式設(shè)計(jì)自由擴(kuò)展的任何其他內(nèi)容的理想格式。 

圖像文件類(lèi)型常見(jiàn)問(wèn)題解答

圖像文件的 3 種常見(jiàn)文件類(lèi)型是什么？

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

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

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

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

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

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

支持透明度的最常見(jiàn)的 Web 圖像文件類(lèi)型是 PNG、WebP、SVG。

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

PNG比JPEG好嗎？

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

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

總結(jié)

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

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

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

相關(guān)文章

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

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