詳解如何優化和壓縮WordPress網站圖片

相信我們，獨立站尤其是新建的站點，應該知道如何去討好搜尋引擎，也只有這樣才可以獲得更好的展現位置。 而，如何讓搜尋引擎覺得你的站點更友好，其中一個辦法就是讓你的網站圖片更加小以提升網站效能。

如果是單純的簡單粗暴地不考慮質量地壓縮影象，只會適得其反，因為這樣可能會使訪問者討厭您的網站。 我們要做的是，在不損害或者極小程度地影象質量下壓縮影象。 有一些技巧可以讓你減少影象的檔案大小，並保證質量，讓使用者無感知你對圖片壓縮過。 因此，讓我們來看看如何格式化影象而不會讓它們變得難看，以及如何針對網頁和效能優化影象。

大影象會降低您的網頁速度，從而導致使用者體驗不佳。 優化影象，可以使用外掛或指令碼減小檔案大小以加快頁面的載入時間。 有損和無失真壓縮是常用的兩種方法。

• 格式化影象的好處
• 如何針對Web和效能優化影象
• 使用線上工具壓縮和優化圖片
• 使用WordPress影象優化外掛
• 優化影象案例研究
• 將SVG與其他影象一起使用
• 使用影象時的最佳做法

在本指南中，我們將討論圖片優化的重要性及其對網站的影響。然後，我們將介紹幾種優化和壓縮圖片的不同方法。讓我們進入正題！

格式化影象的好處

首先，為什麼需要格式化影象？ 有什麼好處？ 優化影象以提高效能有很多好處。 根據HTTP Archive，截至2018年11月，影象平均佔網頁總體積的21％。 因此，在優化您的WordPress網站時，影象是您應該首先開始的第一個地方！
它比優化指令碼和字型更重要。 影象優化工作流程是最容易實現的工作之一，但許多網站所有者忽略了這一點。

每頁平均位元組數（KB）

以下是主要優點。

• 它將提高您的頁面載入速度（請參閱下面的案例研究，瞭解它對您的速度有多大影響）。如果您的頁面需要很長時間來載入，訪客可能不願意等待並跳出。有關優化頁面載入時間的詳細資訊，請參閱《如何做到Google PageSpeed Insights測試滿分/100分》。
• 使用WordPress搜尋引擎優化外掛，幫助你提高了網站的SEO。您的網站在搜尋引擎結果中的排名會更高。大檔案會降低您的網站速度，搜尋引擎討厭網站速度慢（爬蟲在爬取頁面內容過程中，如果伺服器響應過慢，爬蟲可能就會離開或者降低網站的爬取頻率）。搜尋引擎也可能更快地抓取您的圖片並將其編入索引，以便進行圖片搜尋。想知道您的流量中有多少來自圖片搜尋？您可以使用Google Analytics或者百度統計細分來檢查圖片搜尋流量。
• 建立備份會更快。
• 較小的影象檔案大小使用較少的頻寬。
• 伺服器上需要的儲存空間更少（這取決於您優化的縮圖數量）

如何針對Web和效能優化影象

格式化影象的主要目標是在最小檔案體積和可接受質量之間找到平衡點。 優化影象的方法不止一種。 最流行的方法之一是在上傳到WordPress之前簡單地壓縮它們。 通常，這可以在Adobe Photoshop或Affinity Photo等工具中完成。 其中一些任務也可以使用外掛執行，我們將在下面詳細介紹。
要考慮的兩個主要問題是您使用的檔案格式和壓縮型別。 通過選擇正確的檔案格式和壓縮型別組合，您可以將影象大小減少多達5倍。 您將不得不嘗試使用每種影象或檔案格式來檢視最佳效果。

選擇正確的影象格式

在開始修改影象之前，請確保選擇了最佳檔案型別。 您可以使用幾種型別的檔案：

• PNG – 生成更高質量的影象，但檔案也會比較大。無損影象格式，雖然它也可能是有損的。
• JPEG – 使用有損和無損優化。 您可以調整質量級別，以實現質量和檔案大小的良好平衡。
• GIF – 僅使用256種顏色。 這是動畫影象的最佳選擇。 它只使用無失真壓縮。
• AVIF – 生成更高質量的影象，同時檔案大小顯著更小。支援無損和有失真壓縮，使其靈活適用。
• HEIC – 在保持影象質量的情況下，能夠顯著減小檔案大小。支援多個影象的儲存，靈活處理動圖或影象序列。

還有其他幾個，例如JPEG XR和WebP，但並非所有瀏覽器支援。 理想情況下，色彩豐富的影象應該選擇JPEG（或JPG）和相對簡單的影象選擇PNG。

JPEG

與 BMP 和 GIF 一樣，JPEG 是最古老的影象檔案格式之一。

優點

• 適用於照片和色彩豐富的複雜影象。
• 在檔案大小和影象質量之間取得了很好的平衡。
• 廣泛支援所有瀏覽器和裝置。

缺點

• 使用有失真壓縮，這意味著壓縮影象時會丟失一些資料。
• 不支援透明度。
• 不適合帶有文字或銳利邊緣的影象，因為它們看起來會很模糊。

最適合

照片、複雜的插畫以及任何質量略有下降但不明顯的影象。

PNG

PNG 是一種通用格式，可提供高質量影象，同時還支援透明度。

優點

• 支援透明度。
• 使用無失真壓縮，因此儲存時不會有質量損失。
• 非常適合帶有文字或銳利邊緣的影象。

缺點

• 與 JPEG 照片相比，檔案大小較大。
• 對複雜照片的處理效率較低。

最適合

Logo、螢幕截圖、帶文字的影象或任何需要透明的影象。

GIF

GIF 以其迴圈播放的動畫風靡網際網路，你可以將其用作動畫貼紙或備忘錄。

優點

• 支援簡單的動畫。
• 簡單影象檔案小。
• 廣泛支援各種瀏覽器和裝置

缺點

• 僅限 256 色。
• 不適合照片或複雜影象。
• 長動畫的檔案大小可能較大。

最適合

簡單的動畫、圖示和非常簡單的圖形。

WebP

由於上述影象格式已相當陳舊，而網際網路的發展又遠遠超出了它們的能力範圍，因此谷歌推出了 WebP 這種更高效的影象格式。

優點

• 提供有損和無失真壓縮。
• 支援動畫和透明度。
• 檔案大小比 JPEG 和 PNG 小得多（大約小 25-35%）。
• 質量大小比優於 JPEG。

缺點

• 不支援舊版瀏覽器（看你的了，Internet Explorer）。

最適合 如果你的受眾使用的是現代瀏覽器，它幾乎適用於一切。對於需要兼顧質量和效能的網站來說，它尤為重要。

SVG

SVG 與其他影象格式有些不同。SVG 不是由畫素組成，而是基於數學公式。

優點

• 可縮放至任何尺寸而不會降低質量。
• 簡單圖形的檔案尺寸非常小。
• 可使用 CSS 進行樣式設計，也可使用 JavaScript 進行操作。
• 非常適合響應式設計。

缺點

• 不適合複雜的照片。
• 如果非常複雜，渲染速度可能較慢。
• 需要比圖片更強的處理能力。

最適合

Logo、圖示、簡單插畫，以及任何尺寸下都需要清晰顯示的圖形。

AVIF

AVIF（AV1 影象檔案格式）是一種基於 AV1 視訊編碼的影象格式，旨在高效地壓縮影象，同時保持高影象質量。

優點：

• 高效的壓縮：在相同影象質量下，AVIF 檔案的大小比 JPEG 和 PNG 低約 50%。
• 出色的影象質量：支援有損和無失真壓縮，提供更好的保真度。
• 支援透明度和 HDR：可以處理透明背景，並且支援高動態範圍（HDR）影象。
• 適合動畫：可以支援動畫功能，類似於 GIF。

缺點：

• 相容性問題：雖然現代瀏覽器逐漸開始支援，但與舊版裝置和瀏覽器的相容性仍然有限。
• 處理速度：解碼和編碼的計算複雜度較高，可能導致處理速度較慢。

最適合：

高質量的照片、複雜影象以及需要透明度和 HDR 的應用場景，特別是在對檔案大小有嚴格要求的網頁設計中。

HEIC

HEIC（高效影象檔案格式）是基於 HEVC（高效視訊編碼）標準的影象格式，主要用於儲存高效壓縮的靜態影象和影象序列，如 Apple 的照片應用中使用的格式。

優點：

• 高效的壓縮：與 JPEG 相比，HEIC 檔案可以在保持相同質量的情況下更小，大約節省 50% 的空間。
• 支援多影象儲存：可以在一個檔案中儲存多個影象，例如用於動圖或備份不同版本。
• HDR 支援：支援高動態範圍（HDR）影象，增強了顏色和亮度範圍。
• 支援透明度：可以處理具有透明背景的影象。

缺點：

• 相容性：雖然 Apple 的生態系統支援良好，但在其他作業系統和舊版裝置上的支援有限。
• 編輯軟體要求：需要較新的影象編輯軟體來開啟和處理 HEIC 檔案。

最適合：

高質量照片、動圖（子影象序列）以及需要高效儲存空間的應用場景，特別是蘋果裝置使用者和希望在圖片質量與檔案大小之間取得平衡的使用者。

壓縮質量及體積

下面是一個例子，說明壓縮影象過多會發生什麼。 第一種是使用非常低的壓縮率，這導致最高質量（但更大的檔案大小）。 第二種是使用非常高的壓縮率，這導致影象質量非常低（但檔案尺寸較小）。 注意：未經修改的原始影象為2.06 MB。

低壓縮（高質量）JPG – 590 KB

高壓縮 (低質量) JPG – 68 KB

如您所見，上面的第一張圖片是590 KB。 這對於一張照片來說非常大！ 一般網站的頁面我們應該保持總體積不超過1或2MB。 590KB已經是其中的四分之一。 第二個影象顯然看起來很糟糕，但只有68 KB。 你要做的是在你的壓縮率（質量）和檔案大小之間找到一個平衡點。
因此我們以中等壓縮率再次壓縮影象，如下所示，質量還是很不錯的，檔案大小為151 KB，這對於高解析度照片來說是可以接受的。 這比壓縮率低的原始照片小近4倍。 通常，像PNG影象應該低於100 KB或更低，以獲得最佳效能。

中等壓縮 (質量OK) JPG – 151 KB

有損與無損優化

同樣重要的是要了解有兩種型別的壓縮可以使用——有損和無損。
有損 – 這是一個刪除一些資料的過濾器。這會降低影象質量，因此您必須小心為影象的減重。檔案大小可以減少很多。您可以使用Adobe Photoshop，Affinity Photo或其他影象編輯器等工具調整影象的質量設定。我們上面使用的示例是使用有失真壓縮。
無損 – 這是一個壓縮資料的過濾器。這不會降低質量，但需要在渲染之前對影象進行解壓縮。您可以使用Photoshop，FileOptimizer或ImageOptim等工具在桌面上執行無失真壓縮。
最好嘗試使用不同壓縮技術，以瞭解哪種方法最適合每種影象或格式。如果您的工具有選項，請確保儲存為Web影象。這是許多影象編輯器中的一個選項，它將為您提供質量調整，以便您可以執行最佳壓縮。影象會損失些質量，所以嘗試找到最佳平衡，儘可能在減少體積的同時又不影響質量。

影象優化工具和程式

有許多選擇的影象優化工具和程式，包括付費和免費的，您可以使用它們來優化您的影象。 有些為您提供了優化的工具，而其他一些則直接幫你做了這事。 Affinity Photo是個非常不錯的選擇，相比Adobe Photoshop，價格更便宜，但擁有幾乎相同的功能。

使用Affinity Photo壓縮影象

以下是一些我們收集的可用於影象壓縮的工具和程式：

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• Trimage
• ImageResize.org

調整影象大小以縮放

在過去，您需要按比例上傳影象並且不要讓CSS調整它們的大小。 但是，自WordPress 4.4版本以來，WordPress開始支援響應式影象（不按CSS縮小）。 基本上，WordPress會自動為上傳到媒體庫的每個影象建立幾種尺寸。 通過將影象的可用大小包含到srcset屬性中，瀏覽器現在可以選擇下載最合適的大小而忽略其他大小。 請參閱下面的程式碼示例截圖。

srcset響應影象示例程式碼

如今滿大街的HiDPI顯示器，動不動就是4K解析度，響應式影象是必須的了。 但2x或3x您的網站的列或div大小，仍然小於原始大小。 瀏覽器將根據裝置的解析度顯示合適Size的影象。
WordPress媒體庫根據您的設定建立縮圖。 但是，原件仍然保留並且不受影響。 如果您想通過不儲存原件來調整影象大小並節省伺服器硬碟空間，可以使用像Imsanity這樣的免費外掛。

WordPress多媒體設定

Imsanity允許您設定限制，以便將所有上傳的影象約束到合理的大小，這足以滿足典型網站的需求。 Imsanity在WordPress處理影象處理圖片。 因此，WordPress在所有方面的行為都完全相同，除非在上傳之前貢獻者將其影象縮放到合理的大小。

使用線上工具壓縮和優化圖片

您還可以使用線上影象優化工具來做同樣的事情，甚至做得更多。有些優化工具還能幫助你批量處理圖片。這可以幫你節省大量時間。

Squoosh

我們喜歡使用 Squoosh，原因有以下幾點：

• 它是免費的，基於網路：無需下載或安裝任何東西。
• 顯示實時比較：你可以立即看到你的優化對圖片質量的影響。
• 支援多種檔案格式：它讓你可以選擇輸出檔案型別。
• 提供壓縮方法選擇：你可以選擇不同的壓縮方法/演算法，還能實時檢視你的選擇對最終檔案大小和影象質量的影響。

以下是使用 Squoosh 調整影象大小的方法。

訪問 https://squoosh.app，從裝置中新增一張圖片。如果你只是在測試該平臺，可以使用他們在 “Or try one of these” 部分提供的演示圖片。

看到圖片後，你會在頁面右側看到一個面板，上面有不同的圖片壓縮選項。切換到 Resize 按鈕。

這將為你提供一些額外的選項，以更改調整大小的方法、選擇預設大小等。在本例中，我們選擇的預設值為 33.33%。

這意味著影象尺寸將縮小到原始尺寸的 33.33%。因此，如果原始影象的寬度為 3000 畫素，選擇 33.33% 預設值後，影象寬度將為 1000 畫素。

你還會注意到，調整影象大小會大大減小檔案大小，在我們的例子中，減小了 60%。

完成後，點選螢幕右下方的藍色 Download 按鈕，就可以了！現在你就擁有了一張壓縮圖片。

TinyPNG

TinyPNG 是一款使用者友好型網路應用程式，可以一次壓縮多達 20 張圖片，每張圖片最大 5MB。它免費使用，支援 WebP、PNG 和 JPEG 影象。

遺憾的是，你還不能用它來優化 SVG 影象。只有當你的圖片大小已經小於 5MB 時，這款工具才最適合你。

要使用 TinyPNG 優化圖片，只需將圖片檔案上傳到頁面頂部的框中，然後等待壓縮過程完成即可。

就是這樣！然後你就可以檢視結果並下載優化後的圖片了。對於原始圖片，我們注意到圖片大小減少了 40%-70%。

Kraken.io

Kraken.io 是另一款線上影象優化工具。和 TinyPNG 一樣，它可以讓你批量壓縮圖片。

Kraken 提供了多種選項來選擇壓縮型別、匯出檔案的方式等。

例如，你可以選擇三種優化模式，包括有損（Lossy）、無損（Lossless）和專家（Expert）。

Kraken.io能讓你更輕鬆地控制影象的壓縮方式。您可以選擇影象質量優先於檔案大小，反之亦然。

要使用 Kraken.io 優化影象，只需上傳要壓縮的影象，選擇優化方法，然後選擇下載選項即可。

例如，你可以單獨下載每個檔案，也可以在一個 zip 檔案中下載多個檔案，還可以直接上傳到 Dropbox，或直接分享到 Facebook 和 Twitter。

不過，該工具的主要缺點是免費版本相當有限。他們提供 100MB 的測試配額和 1MB 的最大配額，如果你要批量壓縮圖片，可能一次使用就會用完。

使用WordPress影象優化外掛

值得慶幸的是，使用WordPress，您不必手動完成所有影象格式化或壓縮。 您可以使用外掛自動完成這些操作。 一些外掛會在您上傳影象檔案時自動優化它們，甚至會優化您已上傳的圖片。 這是一個非常貼心的功能 – 特別是如果您網站的存量圖片過多。 下面介紹一些最好的外掛來格式化影象以獲得更好的效能。
但有一點非常重要，即不應該100%依賴外掛本身。 例如，您不應將2MB影象上傳到WordPress媒體庫。 這可能會導致您的Web主機硬碟空間很快就耗盡。 最好的方法是事先在照片編輯工具中快速調整影象大小，然後上傳它並使用以下外掛進一步減少它。

• Imagify Image Optimizer
• ShortPixel Image Optimizer
• Optimole
• EWWW Image Optimizer Cloud
• Optimus Image Optimizer
• WP Smush
• TinyPNG
• ImageRecycle
• Jetpack Image CDN
• Compress JPEG & PNG Images

Imagify Image Optimizer

WordPress影象優化外掛-Imagify

Imagify是由開發WP Rocket的團隊建立的，大多數人都可能熟悉它。 相容WooCommerce，NextGen Gallery和WP Retina。 它還具有批量優化功能，您可以選擇三種不同的壓縮級別，正常，激進和超級。 它還提供恢復功能，因此如果您對質量不滿意，可以一鍵恢復並重新壓縮，使其更符合您的需求。 外掛提供免費和高階版本，其中免費版本比較摳門只有25MB的配額。

WordPress影象優化外掛-Imagify

Imagify還支援在第三方伺服器上壓縮影象，而不是你的，這在效能方面非常重要。這樣Imagify就不會減慢你的WordPress網站。

ShortPixel Image Optimizer

WordPress影象優化外掛-ShortPixel

ShortPixel Image Optimizer是一款免費外掛，每月可壓縮100張圖片，並支援壓縮多種型別的檔案，包括PNG，JPG，GIF，WebP甚至PDF檔案。 它提供有損和無損影象壓縮，且支援將CMYK轉換為RGB。 它會將您的影象和縮圖放入雲中進行處理，然後再傳回你網站伺服器以替換原件。 外掛會建立原始檔案的備份，以便您可以根據需要手動還原它們。 外掛也支援批量轉換相簿檔案，檔案大小也沒有限制。

步驟 1：請求免費的ShortPixel API金鑰
安裝並啟用外掛後，外掛會要求提供一個API金鑰。這會在您的站點和ShortPixel優化工具之間建立連線。

如果您還沒有API金鑰，您可以申請一個免費的API金鑰。只需輸入您的電子郵件地址，然後單擊Request Key。將為您生成一個金鑰，您還將設定一個ShortPixel帳戶。輸入並驗證金鑰後，您將進入ShortPixel 外掛設定螢幕。

步驟 2：配置優化設定
如果您不想配置ShortPixel外掛，您可以單獨保留預設設定。但是，如果您確實想自定義外掛，則可以在此處進行。讓我們快速瀏覽一下常規設定選項卡，這是大多數使用者所需要的。

在這裡，您可以決定是否希望該外掛也優化您的縮圖、設定要應用於所有檔案的壓縮級別以及刪除EXIF資料。您還可以備份原始影象，並選擇是否希望外掛自動調整影象大小。

當您對這些設定感到滿意時，單擊“儲存更改”。或者，如果您想立即開始優化現有影象，您可以選擇儲存並轉到批量處理。

步驟 3：批量壓縮現有影象
ShortPixel外掛將自動壓縮您將來上傳的所有影象，但它也使您能夠優化現有影象。您可以使用Bulk Optimization Too 來實現，您可以通過WordPress 中的Media > Bulk ShortPixel訪問它。
在這裡，您將看到站點上現有影象的數量，包括縮圖。

要開始該過程，請單擊“Start Optimizing”按鈕。您可以實時檢視每個影象的壓縮方式，包括節省的空間總量。

該過程完成後，您將看到一條訊息，確認所有原始影象都已備份並替換為壓縮版本。從現在開始，您無需擔心圖片會拖慢您的網站速度！

Optimole

WordPress影象優化外掛-Optimole

Optimole是一個WordPress影象優化外掛，可以自動減少影象的大小，無需任何手動工作。 它在您的網站載入速度方面具有很大的優勢，因為它完全基於雲，並且從不提供比它們應該更大的影象，做到兼顧訪客和瀏覽器兩者。
此外，該外掛提供延遲載入和高效的影象替換 – 如果訪問者的網際網路連線速度較慢，它會降低影象質量 – 這使其在人群中脫穎而出。 它還會自動檢測使用者的瀏覽器，根據實際展示WebP格式影象。
Optimole壓縮的所有影象都通過快速CDN提供。 您可以免費試用Optimole，如果您需要額外的頻寬和處理空間，可以考慮升級到付費套餐。

EWWW Image Optimizer Cloud

WordPress影象優化外掛-EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud可幫助您縮小影象，加快網站建立速度，減少麻煩。沒有大小限制和足夠的靈活性，您可以使用預設值，或完全根據自己的喜好自定義外掛。所有EWWW IO使用者都可以使用批量優化程式壓縮其現有影象，或使用“媒體庫”列表模式選擇要壓縮的特定影象。
可以掃描其他資料夾，以確保您網站上的每個影象都經過適當優化。 EWWW IO甚至允許您將影象轉換為WebP等下一代格式，或者為具有多格式轉換選項的影象找到最佳影象格式。圖片壓縮的起價僅為0.003美元/張。

Optimus Image Optimizer

WordPress影象優化外掛-Optimus Image Optimizer

Optimus WordPress Image Optimizer使用無失真壓縮來優化您的影象。 無損意味著您不會看到任何質量損失。 它支援WooCoomerce和多站點，並且對於那些已經很大的現有媒體庫的人來說，它提供很好的批量優化功能。 它還與WP Retina WordPress外掛相容。 外掛也是提供免費和付費版本。 在付費版本中，您每年支付一次，您可以不限量壓縮影象。 如果將它與Cache Enabler外掛結合使用，您還可以深入瞭解WebP影象，這是Google提供的一種新的輕量級影象格式。

WP Smush

WordPress影象優化外掛-WP Smush

WP Smush有免費版和高階版。 它將減少影象中的隱藏資訊，以減小尺寸而不降低質量。 當您將影象上傳到您的網站時，它會掃描影象並減少它們。 它還會掃描您已上傳的影象並減少這些影象。 它將同時批量重新整理多達50個檔案。 如果需要，您也可以手動執行。 它支援JPEG，GIF和PNG影象型別，不過檔案大小限制為1MB。

• 它與一些最流行的媒體庫外掛相容，如WP All Import和WPML。
• 所有影象優化均採用無失真壓縮技術，保持高影象質量。
• 儲存影象的目錄無關緊要.Smush找到並壓縮它們。
• Smush可以選擇自動設定所有影象的寬度和高度，因此所有影象的大小都會調整為相同的比例。

TinyPNG (also compressed JPGs)

WordPress影象優化外掛-TinyPNG

TinyPNG使用TinyJPG和TinyPNG服務（免費帳戶允許您每月壓縮大約100張影象）來優化您的JPG和PNG影象。 它將自動壓縮新影象並批量壓縮現有影象。 它會將CMYK轉換為RBG以節省空間。 它可以壓縮高達60％的JPEG影象和高達80％的PNG影象，而不會出現明顯的影象質量損失。 它沒有檔案大小限制。

ImageRecycle

WordPress影象&PDF優化外掛-ImageRecycle

ImageRecyle外掛是一個影象和PDF自動優化器。 一個非常方便的功能是能夠設定壓縮的最小檔案大小。 例如，如果設定影象大小為80 KB，則自動將它們從壓縮中排除。 這可以確保影象和檔案永遠不會被過度壓縮。 它還包括批量優化和自動影象大小調整。 注意：他們有15天的免費試用期，但這是一項付費服務，並且使用伺服器上傳和壓縮影象。 它們不是每月收費，而是按壓縮的影象總數收費，10美金起步。

Jetpack Image CDN

Jetpack是一款流行的WordPress工具包外掛，包含基於服務CDN形式的影象優化。該模組以前稱為Photon，可讓您通過切換單個設定（位於Jetpack > Settings > Writing）來加快網站上影象的載入時間。
Image CDN利用image_downsize過濾器快速優化文章和頁面上的影象，包括特色影象和縮圖。選擇加速影象和照片設定後，您的所有文章都將使用 Image CDN 優化其影象。
主要特徵：

• 自動調整優化影象的大小，這樣它們就不會影響您選擇的主題的外觀。
• 非常容易設定。
• 過濾內容而不更改資料庫中的影象資訊。

Jetpack外掛的免費版本包含完整的Image CDN功能，但也提供高階計劃。

Compress JPEG & PNG Images

Compress JPEG & PNG Images對於 TinyPNG 的使用者來說會很熟悉；這是該工具的外掛版本。這使您可以直接從您的站點使用 TinyPNG 服務，這使其成為對使用者最友好的選項之一。
該外掛將每個上傳的影象傳送到 TinyPNG 服務，以自動確定壓縮影象的最佳方式。然後對該影象進行優化並返回到您的站點。壓縮 JPEG 和 PNG 圖片還可以批量壓縮您現有的檔案。
主要特徵：

• 使您能夠自動調整影象大小。
• 壓縮動畫影象。
• 將影象從 CMYK 轉換為 RGB，以節省額外空間。

這個外掛可以免費使用，每月最多可免費壓縮500張圖片。之後，您可以以每張影象0.009美元的價格購買額外的壓縮包。TinyPNG提供了一個方便的價格計算器，可用於根據您的要求估算價格。

優化影象案例研究

下面進行自己的小案例研究和測試，向您展示影象優化對網路的影響及您的WordPress網站的整體速度。

未壓縮的JPG

我們首先將6個未壓縮的JPG上傳到測試站點，所有這些JPG都超過1 MB。然後通過Pingdom進行了5次測試並取平均值。 從下面的速度測試中可以看出，總載入時間為1.55秒，總頁面大小為14.7 MB。

未壓縮JPG影象網站測速

壓縮過的JPG

然後，使用Imagify WordPress外掛使用“激進設定（aggressive setting）”壓縮JPG。然後通過Pingdom進行了5次測試並取平均值。 從下面的速度測試中可以看出，總載入時間減少到476毫秒，總頁面大小減少到2.9 MB。 也就是說總載入時間減少了54.88％，頁面大小減少了80.27％。

壓縮JPG影象後網站測速結果

網站幾乎沒有其他優化可以讓您的載入時間減少50％以上。 這就是影象優化如此重要的原因，上面的過程全部由外掛自動完成。
通過優化圖片，無論是使用照片編輯工具還是使用WordPress外掛，您還可以修復Google PageSpeed Insights中的“優化圖片”警告（如下所示）。

PageSpeed Insights 優化影象警告

如果您發現Google PageSpeed Insights有其他更多的優化，可以閱讀《如何做到Google PageSpeed Insights測試滿分/100分》深入瞭解網站優化，又或者嘗試使用更多的網站優化工具，更全面瞭解網站載入緩慢的原因，參見《網站測速效能測試深入淺出教學[附15款常用網站測速工具]》。

使用SVG格式圖形

另一個建議是將SVG與其他影象一起使用。 SVG是一種可縮放的向量格式，適用於徽標，圖示，文字和簡單影象。 以下是幾個原因：

• SVG可在瀏覽器和照片編輯工具中無限縮放。
• 主流搜尋引擎均索引SVG，就像它對PNG和JPG一樣，所以你不必擔心SEO。
• SVG傳統上（並非總是）檔案大小小於PNG或JPG。 這可以加快載入時間。

國外博主Genki寫了一篇很棒的文章，他比較了SVG、PNG和JPEG三者的大小。 以下是他測試中的一些內容，他比較了三種不同的影象型別。

JPG (優化後的體積: 81.4 KB)

JPG影象

PNG (優化後的體積: 85.1 KB)

PNG影象

SVG (優化後的體積: 6.1 KB)

SVG圖形

如您所見，與JPG相比，SVG的檔案大小減少了92.51％。 與PNG相比，為92.83％。

使用影象時的最佳做法

以下是一些關於如何針對Web優化影象的一般最佳實踐：

• 如果使用WordPress外掛，請使用在其伺服器上外部壓縮和優化影象的外掛。這樣可以減少了您自己網站的負擔。
• 儘可能使用向量影象以及PNG和JPG
• 使用CDN加速向全球訪問者提供影象
• 刪除不必要的影象資料
• 裁剪空白區域並使用CSS提供填充來重新建立它
• 儘可能使用CSS3效果
• 將影象儲存在適當的尺寸。雖然記得WordPress現在支援響應式影象來提供它們，而無需使用CSS調整它們。
• 使用Web字型而不是在影象中放置文字 – 縮放時它們看起來更好並佔用更少的空間
• 僅對具有大量形狀和細節的場景使用光柵影象
• 將位深度減小到較小的調色盤
• 儘可能使用有失真壓縮
• 嘗試找到每種格式的最佳設定
• 如果需要動畫，請使用GIF（但壓縮GIF動畫）
• 如果您需要高細節和高解析度，請使用PNG
• 使用JPG獲取常規照片和螢幕截圖
• 刪除所有不需要的影象後設資料
• 儘可能自動化流程
• 在某些情況下，您可能希望延遲載入影象以加快第一頁渲染速度
• 在Photoshop等工具中將影象儲存為“針對Web優化”影象
• 在Chrome中使用WebP格式影象可以提供較小的影象

在對圖片進行格式化以獲得更好的效能並遵循最佳做法後，搜尋引擎，瀏覽器和網路將更好地載入您的網站，併為您的讀者提供載入更快網站。

如果你關於這個話題有什麼要補充的，歡迎在下面的評論中告訴我們您的技術和做法！