如何輕鬆優化Web圖像(不損失質量)


您是否知道在上傳到WordPress之前對圖像進行優化會對您的網站速度產生巨大影響?

在開始新博客時,許多初學者只是上傳圖像而沒有針對網絡進行優化。 這些較大的圖像文件使您的網站變慢。

您可以通過將圖像優化最佳實踐作為常規博客例程的一部分來解決此問題。

在本文中,我們將向您展示如何優化圖像以獲得更快的Web性能而又不損失質量。 我們還將分享WordPress的自動圖像優化插件,可以使您的生活變得輕鬆。

如何在WordPress中優化圖像(逐步操作)

由於這是有關Web圖像優化的綜合指南,因此我們創建了易於理解的目錄:

什麼是圖像優化? (優化與未優化的圖像)

圖像優化是一種以盡可能小的文件大小保存和傳送圖像而不降低整體圖像質量的過程。

雖然這個過程聽起來很複雜,但如今實際上很容易。 您可以使用許多圖像優化插件和工具之一來自動將圖像壓縮多達80%,而不會造成圖像質量的明顯損失。

這是優化圖像與未優化圖像的示例:

WordPress中的優化圖像與未優化圖像

如您所見,經過適當優化後,同一張圖像可以比原始圖像小75%,而不會造成質量損失。

圖像優化如何工作?

簡而言之,圖像優化通過使用諸如“ Lossy”和“ Lossless”之類的壓縮技術來工作,這有助於減小文件的整體大小,而不會明顯降低質量。

優化圖像意味著什麼?

如果您曾經收到過通過WordPress託管支持或速度測試工具來優化圖像的建議,那麼這意味著您需要通過針對網絡進行優化來減小圖像的文件大小。

為什麼圖像優化很重要? 圖像優化的好處是什麼?

儘管優化圖像有很多好處,但以下是您應該了解的最重要的:

  • 更快的網站速度
  • 提升SEO排名
  • 銷售和潛在客戶的整體轉化率更高
  • 更少的存儲和帶寬(可以減少託管和CDN成本)
  • 更快的網站備份(也降低了備份存儲成本)

在視頻之外,圖像是網頁上的下一個最重要的項目。 根據HTTP檔案, 圖片平均佔網頁總重量的21%

由於我們知道快速的網站在搜索引擎(SEO)中排名較高,並且具有更好的轉化,因此圖像優化是每個企業網站要想在線成功所必須做的事情。

現在,您可能想知道圖像優化可以真正起到多大的作用?

根據Strangeloop的一項研究,網站加載時間延遲一秒鐘可能使您損失7%的銷售,11%的頁面瀏覽量減少以及16%的客戶滿意度降低。

速度如何影響您的網站

如果這些還不足以加快您的網站的速度,那麼您應該知道,像Google這樣的搜索引擎也為快速加載的網站提供了SEO優惠待遇。

這意味著通過優化網絡圖像,可以提高網站速度並提高WordPress SEO排名。

影片教學

訂閱WPBeginner

如果您喜歡書面說明,請繼續閱讀。

如何保存和優化圖像以提高Web性能?

Web性能成功進行圖像優化的關鍵是在最小文件大小和可接受的圖像質量之間找到完美的平衡。

在圖像優化中起著重要作用的三件事是:

  • 圖像文件格式(JPEG,PNG和GIF)
  • 壓縮(較高的壓縮率=較小的文件大小)
  • 圖像尺寸(高度和寬度)

通過選擇三者的正確組合,您可以將圖像尺寸減小多達80%。

讓我們更詳細地看一下每個。

1.圖像文件格式

對於大多數網站所有者而言,真正重要的僅有的三種圖像文件格式是JPEG,PNG和GIF。 選擇正確的文件類型在圖像優化中起著重要作用。

為了使事情簡單,您想對照片或具有多種顏色的圖像使用JPEG,對簡單圖像或需要透明圖像時使用PNG,而對動畫圖像僅使用GIF。

對於不知道每種文件類型之間差異的用戶,PNG圖像格式是未壓縮的,這意味著它是更高質量的圖像。 缺點是文件大小更大。

另一方面,JPEG是一種壓縮的文件格式,它會稍微降低圖像質量,以提供明顯較小的文件大小。

而GIF僅使用256色以及無損壓縮,這使其成為動畫圖像的最佳選擇。

在WPBeginner上,我們根據圖像類型使用所有三種圖像格式。

2.壓縮

接下來是圖像壓縮,它將在圖像優化中發揮巨大作用。

圖像壓縮有不同類型和級別。 每種設置都會因您使用的圖像壓縮工具而異。

大多數圖像編輯工具(如Adobe Photoshop,On1 Photo,GIMP,Affinity Photo等)均具有內置的圖像壓縮功能。

您還可以正常保存圖像,然後使用TinyPNG或JPEG Mini之類的網絡工具來簡化圖像壓縮。

儘管有點手工,但這兩種方法允許您在將圖像上傳到WordPress之前對其進行壓縮,這就是我們在WPBeginner上所做的。

還有一些流行的WordPress插件,例如Optimole,EWWW Image Optimizer,以及其他可以在首次上傳圖像時自動壓縮圖像的插件。 許多初學者甚至大型公司都喜歡使用這些圖像優化插件,因為它既簡單又方便。

我們將在本文後面的內容中分享有關這些WordPress插件的更多信息。

3.圖像尺寸

通常,從手機或數碼相機導入照片時,它具有很高的分辨率和較大的文件尺寸(高度和寬度)。

通常,這些照片的分辨率為300 DPI,尺寸從2000像素起。 這些高質量的照片非常適合打印或桌面發布。 它們不適用於網站。

將文件尺寸減小到更合理的尺寸可以顯著減小圖像文件的大小。 您可以使用計算機上的圖像編輯軟件簡單地調整圖像大小。

例如,我們優化了具有1.8 MB原始文件大小,300 DPI分辨率和4900×3200像素圖像尺寸的照片。

我們選擇jpeg格式以獲得更高的壓縮率,並將尺寸更改為1200×795像素,並將圖像文件大小減小為103 KB。 這比原始文件大小小94%。

現在您已經知道了圖像優化中的三個重要因素,下面讓我們看一下針對網站所有者的各種圖像優化工具。

最佳圖像優化工具和程序

如前所述,大多數圖像編輯軟件都帶有圖像優化和壓縮設置。

在圖像編輯軟件之外,還有一些功能強大的免費圖像優化工具,可用於優化Web圖像(單擊幾下)。

我們建議您使用這些工具優化圖像,然後再將其上傳到WordPress,特別是如果您是完美主義者。

此方法可幫助您節省WordPress託管帳戶上的磁盤空間,並且由於您手動查看每個圖像,因此可以保證最快的圖像和最佳質量。

Adobe Photoshop

Adobe Photoshop是一款高級軟件,具有保存針對Web優化的圖像的功能。 只需打開圖像,然後單擊“文件»另存為Web”選項。

這將打開一個新對話框。 在右側,您可以設置不同的圖像格式。 對於JPEG格式,您將看到不同的質量選項。 選擇選項時,它還會在左下方顯示文件大小。

使用Photoshop保存針對Web優化的圖像

GIMP

GIMP是流行的Adobe Photoshop的免費開源替代品。 它可用於優化網絡圖像。 不利之處在於,它不像此列表中的其他解決方案那樣容易使用。

首先,您需要在GIMP中打開圖片,然後選擇 文件»導出為 選項。 這將打開保存文件對話框。 給您的文件起一個新的名字,然後點擊導出按鈕。

在GIMP中導出圖像

這將顯示圖像導出選項。 對於jpeg文件,您可以選擇壓縮級別以減小文件大小。 最後,單擊導出按鈕以保存優化的圖像文件。

小小PNG

TinyPNG是一個免費的Web應用程序,它使用智能有損壓縮技術來減小PNG文件的大小。 您所要做的就是訪問他們的網站並上傳圖片(簡單的拖放操作)。

使用TinyPNG為WordPress優化圖像

他們將壓縮圖像,並為您提供下載鏈接。 您可以使用其姐妹網站TinyJPG進行JPEG圖像壓縮。

它們還具有Adobe Photoshop擴展名,這是我們在圖像編輯過程中使用的擴展名,因為它結合了Photoshop中最好的TinyPNG和TinyJPG。

對於開發人員來說,他們有一個API可以自動轉換圖像,對於初學者來說,他們有一個WordPress插件可以自動為您完成(稍後會詳細介紹)。

JPEG迷你

JPEGmini使用無損壓縮技術,可在不影響圖像感知質量的情況下顯著減小圖像尺寸。 您還可以比較原始圖像和壓縮圖像的質量。

JPEGMini在線圖像壓縮工具

您可以免費使用其網絡版本,或為您的計算機購買該程序。 他們也有一個付費的API,可以自動執行您服務器的過程。

圖像優化

ImageOptim是Mac實用程序,可通過查找最佳壓縮參數並刪除不必要的顏色配置文件來壓縮圖像而不會降低質量。

圖像優化

Windows的替代品是Trimage。

適用於WordPress的最佳圖像優化插件

我們認為,優化圖像的最佳方法是在將圖像上傳到WordPress之前先進行操作。 但是,如果您運行一個多作者網站或需要一個自動化解決方案,則可以嘗試使用WordPress圖像壓縮插件。

以下是我們最好的WordPress圖像壓縮插件列表:

  1. Optimole – ThemeIsle背後的團隊流行的插件。
  2. EWWW圖像優化器
  3. 壓縮JPEG和PNG圖像–本文上面提到的TinyPNG小組的插件。
  4. Imagify –由流行的WP Rocket插件團隊提供的插件。
  5. ShortPixel圖像優化器
  6. WP Smush
  7. 重新貼上

使用任何這些WordPress圖像優化插件將幫助您加快網站速度。

圖像優化的最終想法和最佳實踐

如果您不保存針對Web優化的圖像,則需要立即開始。 這將對您的網站速度產生巨大的影響,您的用戶將對此表示感謝。

更不用說,更快的網站非常適合SEO,您可能會發現搜索引擎排名的提高。

除了圖像優化外,使用WordPress緩存插件和WordPress CDN可以顯著幫助您加快網站訪問速度的兩件事。

另外,您可以使用託管的WordPress託管公司,因為它們通常同時提供緩存和CDN作為平台的一部分。

我們希望本文能幫助您學習如何在WordPress中優化圖像。 您可能還希望查看我們的指南,以了解如何提高WordPress安全性以及適用於商業網站的最佳WordPress插件。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。