JPEG 與 PNG 的初學者指南（以及如何使用兩者）

已發表: 2021-11-02

帶有圖像的網絡會是什麼？ 幾十年內，互聯網已經從數字點陣打印機變成了多媒體的動態服務器，包括圖像、視頻、動畫等。 但是，當涉及到數字靜止圖像時，JPEG 與 PNG 可能會產生混淆，特別是何時使用它們。

如果您將 JPEG 圖像與相同但作為 PNG 一起查看，您可能會發現沒有區別。 這是最理想的，因為這兩種圖像格式都旨在為網絡重現最佳圖像。 但是，您需要注意不同的用例和優化技術。

在本文中，我們將比較 JPEG 與 PNG，並告訴您何時應該使用每種圖像格式。 首先，讓我們向您介紹每種文件類型。

JPEG與PNG之間的區別

從表面上看（從字面上看），JPEG 和 PNG 沒有區別。 換句話說，如果我們放兩張圖片，讓你選擇哪一張是JPEG，哪一張是PNG，你大部分時間都分不清。 例如，採取以下圖像：

一隻蝴蝶。

您能否確定這只猩紅色摩門教蝴蝶是 JPEG 還是 PNG 圖像？ 當然，沒有參照係就無法進行比較：

同一隻蝴蝶的另一個圖像。

有明確的差異，儘管在這種情況下不會有很大的不同。 在您嘗試做出決定時（無需查看瀏覽器的開發人員工具），我們可以分享一些技術細節：

  • 聯合圖像專家組 (JPEG) 文件格式提供數字圖像的有損壓縮。 這意味著如果圖像質量與文件大小之間的平衡過大，圖像質量就會很明顯。 JPEG 是“平面”文件。 換句話說，它們不能在文件中顯示透明度。 雖然您可以調整壓縮級別，但即使在最佳設置下，JPEG 也將是 8 位文件，這會影響動態範圍。 更重要的是，JPEG 通常包含一個顏色配置文件，它告訴監視器如何顯示其中的顏色。
  • 相比之下，便攜式網絡圖形 (PNG) 圖像是可用於 Web 的文件。 它是一種比 JPEG 更動態的格式，能夠輸出 24 位文件。 它也是一種“無損”格式，這意味著您可以復制它而不會降低圖像質量。 但是，您無法調整 PNG 文件的壓縮率，也沒有顏色配置文件。 儘管如此，根據其技術規範，PNG 非常適合 Web。

看起來很明確——PNG 適合網絡，而 JPEG 不適合。 好吧，這還不是全部。 每種文件類型都適用於某些應用程序。 接下來，我們將討論它們。

JPEG vs PNG：何時應該使用每一個

網絡可以充分利用 JPEG 和 PNG。 事實上，它們以一種很好的方式相吻合，沒有太多的交叉。 作為一個方便的聲音片段，這裡是你應該使用 JPEG 與 PNG 的時候：

如果要顯示照片，請使用 JPEG。 對於任何其他文件——尤其是數字圖形——使用 PNG。

不過，此建議並非適用於所有情況（儘管它幾乎適用於所有情況）。 例如，如果您將數字繪圖與庫存圖像相結合，那麼 JPEG 和 PNG 在技術上都無法正確使用。 稍後，您將有更多的知識來做出正確的決定，儘管還有其他一些建議可以給您。

例如，如果您想複製圖像，請使用與 JPEG 不同的文件格式。 這是因為有損壓縮格式僅重建文件的近似版本。 相比之下，PNG 是 1:1 複製，因為它提供無損壓縮。

此外，如果您想在保存圖像後調整圖像大小，請使用 JPEG，因為它可以很好地處理縮放。 PNG 使用不同的編碼結構，一旦您更改尺寸（或其他技術屬性），它就會降級。

您應該了解的其他圖像格式

當然，JPEG 與 PNG 並不是唯一需要考慮的圖像文件格式比較。 還有許多其他文件類型在爭奪注意力，並有其他用例：

  • 圖形界面格式 (GIF)。 如果你在 Twitter 上發布一個動畫的模因或反應視頻，它就是一個 GIF。 事實上，PNG 希望在其原始規範中替換 GIF 文件，並且它們都提供透明層。
  • 標記圖像文件格式 (TIFF)。 這種基於光柵的文件格式非常適合打印，因為它支持 CMYK 顏色空間。
  • 原始圖像格式 (RAW)。 如果您是攝影師，您只會使用它，並且它是您使用的相機獨有的。 雖然您可以在計算機上查看 RAW 文件，但您需要專用軟件才能查看它。 文件大小是天文數字，因為數據是完整的。 事實上，RAW 格式不是圖像，而是編碼時代表圖像的數據。
  • 高效圖像文件 (HEIF)。 這是 iOS 設備的主要文件格式。 它提供比 JPEG 更好的壓縮和文件大小，並且可以處理許多不同的多媒體格式。

雖然這些圖像文件中的每一個都將在網絡上看到使用（除了關於顯示的 RAW 文件），但 JPEG 與 PNG 仍然占主導地位。 它們都有特定的用例，可以很好地平衡利弊。

如何準備要上傳的圖像（以 3 種方式）

儘管 JPEG 與 PNG 在最終顯示質量方面出現了平局，但您必須以不同的方式處理每種格式以充分利用它。 您可以在三個方面影響圖像的文件大小、質量和整體準備：

  • 確保維度考慮到您將遇到的相關用例。
  • 為您的圖像選擇適合網絡的分辨率。
  • 使用“雅緻”壓縮來進一步減小圖像的文件大小，而不會過多影響質量。

如您所料，這裡有一個很好的平衡。 讓我們從圖像的尺寸開始。

1.設置你的尺寸

對於最終用戶來說，圖像的尺寸比鏈中的任何其他點都更重要。 這是因為瀏覽器要加載圖片，大文件會侵蝕用戶體驗（UX）。 不過，這不是唯一的考慮因素。 當然，質量也是關鍵。 如果您決定使圖像尺寸變小，它將影響最終的圖像質量（JPEG 比 PNG 更是如此）。

答案是從您的圖像尺寸開始，在幾個領域達到最佳效果。 一般來說，你想讓你的圖片足夠大，這樣它們就可以傳達你需要的細節。 根據目標平台和圖像本身的不同，有些地方會有些過度殺傷力。

在 Apple Preview 中設置圖像尺寸。

現代作物傳感器和全畫幅數碼相機可以生成默認尺寸約為 6,000 像素 x 3,000 像素的圖像（儘管相機之間存在巨大差異）。 相比之下，“長邊”大約為 2,000 像素的圖像在社交媒體上很常見。 請記住，這是為了在設備的完整視口中顯示。

對於博客圖像，這個 2,000 像素的經驗法則甚至可以低至 1,000 像素。 這也考慮了高清或“視網膜”圖像。 它們通常需要雙倍尺寸才能在高清屏幕上顯示清晰。 事實上，決議是下一步的好去處。

2.設置正確的分辨率

數字屏幕的基本元素之一是像素。 這些小點構成了整個顯示屏，儘管像素大小不一。 因此，在準備 JPEG 和 PNG 圖像時，我們還必須考慮分辨率。

我們使用每英寸像素 (PPI) 來討論屏幕上可以容納多少像素。 您也可以用厘米或“點”來表示。 後者用於物理打印格式，平面設計界經常使用 DPI。 因此，您會聽到它以可互換的方式使用，儘管 PPI 是正確的術語。

雖然 PNG 圖像規範使用 72 PPI 作為其最佳設計分辨率，但這並沒有考慮現代高清屏幕。 雖然您可以將圖像的尺寸加倍以在所有屏幕上呈現清晰的圖像，但您也可以對分辨率執行相同操作。 例如，以 macOS Big Sur 桌面的截圖為例：

使用高分辨率的屏幕截圖。

這是一個 PNG，長邊（在本例中為頂部和底部）有 1,000 像素。 雖然，它使用 144 PPI——儘管有一些上傳“魔法”可以在上傳到 WordPress 時將分辨率轉換為 72 PPI。

PNG 和 JPEG 圖像都可以使用更高的 PPI——可打印的分辨率約為 300 DPI/PPI。 更重要的是，來自諸如Pixabay等庫存照片網站的大量圖片將使用300 PPI下載：

一隻白鷺鳥。

因此，減少這種情況將更好地為網絡及其各種顯示準備您的圖像。

3. 使用壓縮優化您的圖像

我們不必告訴您太多有關圖像優化的信息。 這是您可以在博客的其他地方找到的主題，幾乎所有 WordPress 用戶都知道在上傳過程之前或期間優化圖像。

一般概念是您通常以有損方式對圖像應用額外的壓縮。 這確實會影響圖像質量，如果您在應用大量有損壓縮之前對尺寸和分辨率進行全面更改，則會很明顯。

過度壓縮、優化不佳的圖像。
您可以看到以“色帶”的形式出現的圖像質量明顯下降——這是壓縮不良的明顯偽影。

為了很好地呈現圖像，這些偽影必須是最小的。 因此，有很多工具可以完成這項工作。 最容易訪問的是 TinyPNG，儘管它也壓縮 JPEG：

TinyPNG 主頁。

不過，它應用的壓縮對某些圖像來說是溫和的，這可能不會使文件大小足夠小。 像 ShortPixel 這樣的服務提供了一種激進的有損壓縮格式，而與 TinyPNG 相比，它的 Glossy 壓縮做得令人欽佩。

短像素工具。

這裡的要點是，您必須平衡壓縮級別與文件大小以及圖像的所有其他元素。 在下一節中，我們將討論採取的最佳方法。

JPEG vs PNG：如何充分利用每種格式

儘管文件格式存在差異，但瀏覽網頁的性質意味著您可以將圖像準備歸結為以下內容：

  • 在長邊上使用 1,000–2,048 像素之間的尺寸。
  • 為所有圖像設置 144 PPI 的分辨率，以確保它們在所有屏幕上顯示清晰。
  • 通過圖像優化應用細微壓縮以幫助減小文件大小。 考慮到所有因素，大多數圖像的大小約為 100-200kb。

這裡還有一些基於特定文件格式的內容：

  • 對於 PNG 文件，減小尺寸可能會嚴重降低圖像質量。 這裡的想法是保持盡可能高的分辨率以減輕這些因素。
  • JPEG 文件經不起復制，因為每次復制都比上一次更加退化。 如果您可以控制 JPEG 的來源（例如，如果您拍攝了照片），請從 TIFF 或 RAW 文件創建 JPEG 以保持圖像的質量。
  • 根據我們的經驗，JPEG 不像其他文件格式那樣進行壓縮。 這意味著在壓縮階段之前準備和優化這些圖像很重要。

到目前為止，您應該對 JPEG 與 PNG、何時使用它們以及如何準備文件有了紮實的了解； 如果你還想知道文章開頭哪張圖片是JPEG，那就是第一張！

包起來

似乎圖像在網絡上運行。 因此，我們有多種文件格式來幫助我們以合適的文件大小為應用程序提供正確的質量。 JPEG 與 PNG 是一個常見的比較，因為尚不清楚兩者都擅長什麼，它們是兩種流行的圖像格式。

簡而言之，JPEG 用於照片，PNG 用於圖形。 要準備文件，主要關注點應該是保持高圖像質量而不是文件大小。 儘管如此，雖然對分辨率的調整會給您帶來最大的變化，但這對圖像質量的影響更大。 訣竅是平衡尺寸、分辨率和壓縮，以實現最終的網絡就緒圖像。

您是否按照我們在此處概述的那樣為網絡準備圖像，或者您是否做一些不同的事情？ 在下面的評論部分讓我們知道！

圖片來源：minka2507，克里斯特爾。