概覽

盡量減小圖片尺寸，以縮減用戶等待資源加載的時間。適當地設置圖片的格式并進行壓縮可以節省大量的數據字節空間。這樣可以為那些網絡連接較慢的用戶節約時間網站優化，還可以為有流量套餐限制的用戶節省成本。

什么是優化Web圖像？

你用或、程序創建的圖像看起來是驚人的，但往往文件都非常大。這是因為，圖像的制作格式使得它們更易于手工以不同的方式進行操作。

隨著每個圖像體積以兆字節般的增大，如果你把這些圖像放到網頁上，網頁的加載會變得非常緩慢。

優化您的Web圖像意味著以對網頁友好的格式保存或編譯你的圖片，這取決于圖像包含什么內容。

圖像保存數據不只是我們在屏幕上看到的像素等。這些數據可以增加不必要的尺寸從而導致用戶等待圖像下載需要更長的加載時間。

如果你還沒有優化，那么在好處方面來說，優化圖片應該是你網頁速度優化早期要做的事。

它是如何工作的？

簡單來說，優化圖像是通過刪除不必要的保存在圖像中的數據網站優化，從而減少圖像的大小，這要以用在網頁哪里為基礎。

通過Web優化圖像可以減少高達80％的總頁面加載大小。

我們要知道壓縮有兩種形式，有損和無損。

保存有損格式的圖片看起來比原始圖像略有不同。請記住，這只是在非常接近的樣子可見。有損壓縮對網頁來說是非常好的，因為圖像使用少量的存儲器，但也可以是充分地像原始圖像。

保存無損格式的圖像保留所有需要產生原始圖像的信息。出于這個原因，這些圖片承載大量的數據，因此是一個非常大的文件。

我們也可以通過保存為相應的尺寸優化Web圖像。使用CSS在網頁里調整圖像大小是有幫助的，但問題是Web瀏覽器還是會下載整個原始文件，然后調整它的大小和顯示。

你能想象采用一張海報大小的圖像，但使用它只作為一個縮略圖？一個小小的只有20像素的圖像，卻需要加載整個原始海報的時間，我們其實可以只需要裝載一個20像素的圖像的時間。

為什么優化圖片這么重要？

優化圖片是如此重要的最主要的原因是，因為90％的大多數網站都依賴于圖像，所以有很多的圖像文件。使用未經壓縮的圖像和不正確的格式，會大大減慢你的網頁加載時間。

怎樣優化網頁圖片？

圖像的全面優化可以說是通往完美的一個藝術，因為有很多各種各樣的你可能會處理的圖像。下面是最常見的優化您的網頁圖片的方法。

要調整圖片大小，你將不得不使用一些程序。對于基本的壓縮，您可以使用一個簡單的編輯程序如GIMP。對于更高級的優化，你可以使用，或來保存特定的文件。

建議

您應對所有圖片進行基本優化和高級優化。基本優化包括裁剪不必要的區域，將顏色深度降至可接受的最低水平，移除圖片評論以及將圖片保存為恰當的格式。您可以使用任意圖片編輯程序（例如，GIMP）執行基本優化。高級優化包括對JPEG和PNG文件執行進一步的壓縮（無損壓縮）。

使用圖片壓縮工具

市面上有許多工具可用來對圖片文件執行進一步的無損壓縮，且不會對圖片質量造成任何影響。可以使用的在線圖片壓縮優化工具。

選擇恰當的圖片文件格式

您應測試一下哪種格式最適合您的圖片，盡管我們在下面推薦了一些較高級別的格式：

JPG圖片保存為“標準式”還是“漸進式”？

JPG圖片保存時可以選擇不同的形式，“標準式”和“漸進式”，“標準式”圖片是從上到下逐漸顯示，“漸進式”圖片是先顯示圖片輪廓,，再由模糊逐漸變清晰。

兩種方式各有優點和缺點，但是請注意，“漸進式”圖像在IE里的表現是相當糟糕的，對于“漸進式”圖像，IE瀏覽器根本不預先顯示低分辨率的模糊圖片輪廓，而是一片空白！只有當圖片完全加載完后，才唰的一下顯示整張圖片。這給用戶的體驗是很壞的。詳細分析和演示請看文章：JPG圖片保存時慎用“漸進式瀏覽器顯示”格式。

本頁面中的內容已獲得知識共享署名3.0許可，并且代碼示例已獲得 2.0許可；另有說明的情況除外。

文章源地址：