如何在web上完美使用 JPG 等圖形格式

JPEG

JEPG由聯合圖像專家小組（Joint Photographic Experts Group）於1992年創建，並以創建者命名。 JPEG是一種有損光柵影像格式，這表示每次壓縮保存JPEG時，一些資訊

將發生不可逆轉地遺失。

JPEG利用人眼感知的缺陷 - 對亮度比對顏色更敏感 - 使用了一種壓縮演算法來丟棄我們不太擅長獲取的信息，因此屬於「有損格式」。壓縮率的設定將決定最終保存檔案的大小和質

量。

JPEG的用途

因為JPEG適用於亮度和色彩壓縮，所以在照片，以及其他寫實或帶有陰影的圖像（如繪畫和3D渲染）上使用效果良好。這就是為什麼它是多年來最受歡迎的儲存圖片的格式。出

於同樣的原因，JPEG不適宜用在向量圖片，如徽標，幾何圖形，截圖等方面。

照片，以及繪畫等複雜的或陰影的圖像，是使用JPEG的很好的例子。

壓縮JPEG

作為有損格式，JPEG檔案的壓縮率與最終影像品質呈現反比。在像Photoshop這樣的工具中儲存JPEG時，你會看到一個從0到100的品質設定。 Photoshop設定了一些影像品質範

圍：
        低— 10%

        中— 30%

       非常高— 60%

  — 80%

        最佳— 100%

##最佳100% (61 KB), 非常高80% (29 KB).

高60% (16 KB), 中80% (7 KB).

#低100% (6 KB), 最低0% (3 KB).

Web頁面上建議使用在50％到60％質量之間的JPEG，因為它能兼顧不錯的圖像品質和較小的文件尺寸。刪除元資料也可以減少JPEG檔案體積。

在Photoshop裡，可以透過在「匯出」中選擇「元資料：無」或「儲存為Web所用格式（舊版）」來完成壓縮。對影像整體或部分進行模糊處理也會產生較小的檔案。

請注意，由於JPEG是有損格式，即使以100％的品質保存相同的文件，因為壓縮演算法在同一影像上一次又一次地應用，多次之後也會導致影像品質的降低。但這變化可能不會

會顯示在檔案大小的改變上。

PNG

可移植網路圖形（Portable Network Graphics）也是自1995年以來就一直存在的光柵影像格式。它與JPEG不同，因為它是一種無損格式，也是目前網路上最常見的無損

格式。這意味著由於它的壓縮演算法，當檔案被保存和壓縮時，不會遺失任何資訊。

PNG有許多很酷的特性，例如：

#透明通道- 意味著每個像素可以有不同的透明度;
8位元檔案可以使用基於調色板的顏色模型（也稱為索引顏色） - 這意味著如果減少顏色數量，檔案可能會更小;
#PNG壓縮效率比GIF高25％
二維隔行掃描— 影像會在載入過程中漸進顯示，而不是只有當影像完全載入時才顯示。你必須謹慎使用此選項，因為它會增加檔案大小。

PNG的用途

PNG對於線條圖，LOGO，圖示和顏色較少的圖片非常適合。顏色複雜的照片和圖像使用PNG格式將產生巨大的檔案。 PNG另一個優點是支援透明背景。在這種情況下，即使

是複雜的圖片仍然需要使用PNG，因為JPEG中無法實現圖片透明。

PNG可以很好地用在線條作品，LOGO和圖示上。

壓縮PNG

因為PNG中的壓縮演算法是無損的，你可以選擇性地減少它的顏色，從而透過外部工具減少圖片尺寸。

對於大多數PNG使用場景（線圖，圖形，圖示），256色是足夠的。因此，可以透過減少調色板中的顏色數量來進一步減少檔案大小。

GIF

圖形交換格式（Graphics Interchange Format）也是一種點陣圖格式，並且比本文中提到的其它格式都出現地更早。它於1989年由Steve Wilhite創建, 在PNG創建前都是最受歡迎的

8位元圖像格式。 GIF與PNG有類似的特性，但有一些缺點：

• 只支援256種顏色;

• 一維隔行交錯— 影像會漸進顯示，但不夠平滑;

• 與PNG相比壓縮性能差

• 二進位透明度- 像素只能是100％透明或100 ％可見;

• 有歧義的發音

SVG

#可伸縮向量圖形（Scalable Vector Graphics）與前面講的柵格格式不同，顧名思義，它是向量格式。這意味著它不會基於像素儲存數據，而是透過記錄座標的形式儲存圖形信件

#利息。 SVG使用基於XML的語意化標籤結構，這有點像HTML。由於是DOM結構，你可以透過ID來取得SVG元素，並操縱它們。這帶來了許多可能性，例如使用JavaScript和CSS

 修改並對元素進行動畫操作或建立響應式圖形。

就像是它向量格式，SVG圖片能不遺失任何細節地放大到任何大小。
SVG的用途

SVG在線條藝術，LOGO，圖標，插畫和資料視覺化方面用途廣泛。但它不適用於寫實圖像和有許多細節的複雜圖片。在某些情況下，SVG和PNG都能很好地達到同一個目

的。對於線條藝術，SVG通常能產生較小的檔案。但這不是必然的，實際情況會根據向量圖像究竟有多少個錨點，它甚至可能會產生比PNG更大的檔案。 SVG真正出色的地

方是資料視覺化。由於可以使用JavaScript來操縱和創建向量動畫，諸如D3之類的庫提供了無限的可能性.

#壓縮SVG

##大多數情況下，使用如SVGz（GZipped SVG）等工具來壓縮在Web網頁中使用的SVG檔案是不必要的。你可以（而且應該）在伺服器上開啟 Gzip 來實現壓縮功能，雖然可能

效果寥寥。比較好的方法應該是透過清除SVG向量圖形中不必要的錨點、元素和屬性來減少檔案大小。錨點繪製了向量圖像，因此，你需要確保已移除的錨點不會影響向量圖

形的最終形狀。如果您使用Adobe Illustrator編輯SVG，請確保使用匯出>匯出為...而不是文件>另存為...進行儲存，因為這樣才能產生一個最小化的文件，當然它還有其它優

點。在Sketch裡, 注意不要使用不必要的資料夾，因為它們也會作為額外的標籤保存到SVG中。

清理不必要的節點是縮減SVG尺寸的一種途徑。

元素標籤是包含在SVG檔案內的所有內容，包括開始和結束標籤。向量編輯軟體，如Adobe Illustrator和Sketch可能會到處含有非必要元素和屬性的SVG。 SVG壓縮器可用來刪除

除這種多餘的資訊。

以上是如何在web上完美使用 JPG 等圖形格式的詳細內容。更多資訊請關注PHP中文網其他相關文章！