JPG vs PNG：為您的網站選擇哪個？

在為您的網站選擇照片時，重要的不僅僅是照片中的內容。 事實上，選擇正確的圖像格式同樣重要。 那麼讓我們來談談 JPG 與 PNG，選擇哪個以及為什麼。

如果你選擇了錯誤的格式，你最終可能會得到一個更慢的網站、更高的跳出率和更低的轉化率——這不是你想要的，尤其是當它可以很容易地避免時。

PNG和JPG之間的區別

讓我們從基本定義開始。

PNG 代表便攜式網絡圖形，具有所謂的“無損”壓縮。 這意味著壓縮前後的圖像質量是相同的。

JPEG 或 JPG 代表聯合圖像專家組，具有所謂的“有損”壓縮。

正如您可能已經猜到的那樣，這是兩者之間最大的區別。 JPEG 文件的質量明顯低於 PNG 文件。

但是，較低的質量不一定是壞事。

什麼是JPEG？

JPEG 圖像是數碼攝影產生的圖像的常見選擇，它們是具有復雜顏色和陰影的圖片的不錯選擇。

雖然 JPG 的 10:1 壓縮在質量上的損失很小，但較小的尺寸使 JPEG 適合 Web 使用，因為減少用於照片的數據量有助於響應式演示。

另一方面，由於相鄰像素之間的鮮明對比，JPG 圖片不是線條圖和其他文本或標誌性圖形的最佳選擇。 如果您想為您的網站使用該類型的圖像，您可能應該考慮使用無損圖形格式。

什麼是 PNG？

PNG 是作為 GIF 的改進替代品而創建的，它已成為 Internet 上最常見的無損圖像壓縮格式。

那麼什麼是PNG文件呢？

PNG 圖像被稱為便攜式網絡圖形，可以是基於調色板、灰度和全彩色非基於調色板的 RGB/RGBA。

PNG 文件格式專為在 Internet 上傳輸圖像而不是打印圖形而設計，因此不支持非 RGB 顏色空間，例如 CMYK。

最大的優點是 .png 提供了多種透明度級別，這意味著 PNG 背景可以是完全透明的，這對於 png 標誌設計和類似的設計很重要。 它也是具有淡入淡出效果的圖片的最佳選擇。

JPG vs PNG – 基本規則

由於 JPG 和 PNG 格式各有利弊，您應該充分利用它們並發揮它們的優勢。

實際上，這意味著您應該將 .jpeg 用於照片，將 .png 用於圖形和屏幕截圖。

真的有關係嗎？

在談論 JPG 與 PNG 並並排比較兩者時，事實是您將無法在照片中看到太大的差異。

因此，如果 PNG 圖片看起來沒有 JPG 好得多，為什麼不總是使用 JPG 格式並讓自己更輕鬆呢？

不幸的是，這並不是那麼簡單，其原因是圖像壓縮。

您想要最高質量的圖像格式，但您還想要一個響應式網站，因此您需要真正考慮 jpeg 和 png 之間的差異，尤其是圖像壓縮方面的差異。

可以這樣想：圖像壓縮意味著在不為尺寸而犧牲質量的情況下減小圖像尺寸。 通常，更強的壓縮等於更小的文件大小，這等於更差的圖像質量。

因此，如果您想要一個好的壓縮，您需要在文件的質量和大小之間找到適當的平衡點。

當您查看保存在計算機中的圖像時，您會看到它的最佳版本，因為該文件尚未壓縮。 但是，如果網站上有相同的圖像，則需要下載它才能看到它。

從邏輯上講，這意味著圖像越大 - 加載時間越長。

圖像壓縮服務

有許多用於圖像壓縮的服務和工具，這裡有一些可以用於 jpg 或 png 的好工具：

• Kraken.io – 大小和質量之間的完美平衡

• Kraken WordPress 插件 – 自動壓縮您上傳到您網站的圖像

• WP Smush – 一個 WordPress 插件，可以自動壓縮您的圖像

包含文字的圖片

有時，您會想要使用包含文本的圖片，在這裡選擇 jpeg 或 png 真的很重要。 對於這種類型的圖片以及具有精細細節的圖形，PNG 通常是更好的選擇。

jpg 和 png 之間的一個重要區別是，對於 JPG，字母的輪廓以及圖形中的細線通常顯得不那麼清晰。

常規圖片

雖然 .png 文件中的圖形和帶有字母的圖像通常更好看，但對於普通照片，JPG 是網絡的更好選擇，因為如果尺寸更小。

如果您決定只使用 PNG，它們會降低您的網站速度，從而導致用戶感到沮喪。

調整圖像大小

除了壓縮之外，您還可以考慮調整要用於網頁設計的圖像的大小。 好消息是調整大小並不是一個複雜的過程，有兩種方法可以做到：

1 – 使用一些調整大小的工具，您可以手動移動圖像的邊緣。 如果您想保持原始的高寬比，請確保抓住圖像的一角而不是一側，這樣您就可以按比例調整圖像大小。

2 - 如果您不想通過手動調整來調整圖像大小，或者如果您需要特定大小的圖像，您可以使用一些高級圖形程序，這些程序允許您指定圖像大小然後調整時間相應的圖像。

但是，有時圖像在調整大小後會有點失焦，因此請考慮在將其導出為 png 或 jpg 之前使用一些銳化工具。

當您不確定時，PNG 與 JPG

到目前為止，我們知道 JPG 更適合照片，而 .png 圖像更適合帶有文字的圖表和圖片。 但是對於介於兩者之間的圖像，什麼更好呢？

屏幕截圖就是一個很好的例子，因為它們通常包含照片以及文本和清晰的線條。

然而，當談到截圖時，如果談到 JPG 與 PNG，幾乎總是使用 PNG 格式更好地保留圖片中文字的清晰度和可讀性。

歸根結底，如果您仍然不確定應該使用哪種格式，您可以隨時將圖片保存在這兩種格式中，然後比較它們並確定您認為最適合您需求的一種。

結束關於 JPG 與 PNG 比較的想法

既然您知道 PNG 文件是什麼以及 PNG 和 JPG 之間的區別是什麼，那麼您應該更容易選擇正確的格式來保持您的網站既美觀又快速且響應迅速。

在談論 JPG 與 PNG 時，需要牢記一些關鍵事項。

PNG 是圖表、帶有文本的圖片、屏幕截圖以及需要使用透明度的設計（例如徽標設計等）的最佳選擇。 但是，最大的缺點是它們的大小更大，並且會降低您的網站速度。

另一方面，JPG 更小，加載速度更快，但壓縮會帶來一些質量損失，這對於照片通常不是問題，但對於包含細線的文本或圖像可能會很糟糕。

那麼你應該使用哪一個呢？ 好吧，這取決於圖像的類型和您正在構建的網站的類型。