如何在web上圓滿使用 JPG 等圖形格式

JPEG

JEPG由聯(lián)合圖像專家小組（Joint Photographic Experts Group）于1992年創(chuàng)建，并以創(chuàng)建者命名。JPEG是一種有損光柵圖像格式，這意味著每次壓縮保存JPEG時，一些信息

將發(fā)生不可逆轉地丟失。

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，因為它能兼顧不錯的圖像質量和較小的文件尺寸。刪除元數(shù)據(jù)也可以減少JPEG文件體積。

在Photoshop里，可以通過在“導出”中選擇“元數(shù)據(jù)：無”或“存儲為Web所用格式（舊版）”來完成壓縮。對圖像整體或者部分進行模糊處理也會產(chǎn)生較小的文件。

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

會顯示在文件大小的改變上。

PNG

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

格式。這意味著由于它的壓縮算法，當文件被保存和壓縮時，不會丟失任何信息。

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

• 透明通道 - 意味著每個像素可以具有不同的透明度;

• 8位文件可以使用基于調色板的顏色模型（也稱為索引顏色） - 這意味著如果減少顏色數(shù)量，文件可能更小;

• PNG壓縮效率比GIF高25％

• 二維隔行掃描 — 圖像會在加載過程中漸進顯示，而不是只有當圖像完全加載時才顯示。你必須謹慎使用此選項，因為它會增加文件大小。

PNG的用途

PNG對于線條圖，LOGO，圖標和顏色較少的圖像非常適合。顏色復雜的照片和圖像使用PNG格式將生成巨大的文件。PNG另一個優(yōu)點是支持透明背景。在這種情況下，即使

是復雜的圖片仍然需要使用PNG，因為JPEG中無法實現(xiàn)圖片透明。

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

壓縮PNG

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

對于大多數(shù)PNG使用場景（線圖，圖形，圖標），256色是足夠的。因此，可以通過減少調色板中的顏色數(shù)量來進一步減少文件大小。

GIF

圖形交換格式（Graphics Interchange Format）也是一種位圖格式，并且比本文中提到的其它格式都出現(xiàn)地更早。它于1989年由Steve Wilhite創(chuàng)建, 在PNG創(chuàng)建前都是最流行的

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

• 僅支持256種顏色;

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

• 與PNG相比壓縮性能差

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

• 有歧義的發(fā)音

SVG

可伸縮矢量圖形（Scalable Vector Graphics）與前面講的柵格格式不同，顧名思義，它是矢量格式。這意味著它不會基于像素存儲數(shù)據(jù)，而是通過記錄坐標的形式存儲圖形信

息。SVG使用基于XML的語義化標簽結構，這有點像HTML。由于是DOM結構，你可以通過ID獲取SVG元素，并操縱它們。這帶來了很多可能性，例如使用JavaScript和CSS

修改并對元素進行動畫操作或者創(chuàng)建響應式圖形。

就像其它矢量格式，SVG圖片能不丟失任何細節(jié)地放大到任何大小。
SVG的用途

SVG在線條藝術，LOGO，圖標，插畫和數(shù)據(jù)可視化方面用途廣泛。但它不適用于寫實圖像和有許多細節(jié)的復雜圖片。在一些情況下，SVG和PNG都能很好地達到同一個目

的。對于線條藝術，SVG通常能生成較小的文件。但是這不是必然的，實際情況會根據(jù)矢量圖像究竟有多少個錨點，它甚至可能會生成比PNG更大的文件。 SVG真正出色的地

方是數(shù)據(jù)可視化。由于可以使用JavaScript來操縱和創(chuàng)建矢量動畫，諸如D3之類的庫提供了無限的可能性.

壓縮SVG

大多數(shù)情況下，使用如SVGz（GZipped SVG）等工具來壓縮在Web網(wǎng)頁中使用的SVG文件是不必要的。你可以（并且應該）在服務器上開啟 Gzip 來實現(xiàn)壓縮功能，雖然可能

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

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

點。在Sketch里, 注意不要使用不必要的文件夾，因為它們也會作為額外的標簽保存到SVG中。

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

元素標簽是包含在SVG文件內的所有內容，包括開始和結束標簽。矢量編輯軟件，如Adobe Illustrator和Sketch可能會到處含有非必要元素和屬性的SVG。SVG壓縮器可用于刪

除這種多余的信息。

以上就是如何在web上完美使用 JPG 等圖形格式的詳細內容，更多請關注php中文網(wǎng)其它相關文章！