通過縮放影象以提高WordPress網站效能

如何縮放影象

網站速度對其成功至關重要,因為47%的訪問者可能會離開載入時間超過兩秒的網站。

雖然有幾個因素會影響您的網站效能,但影象需要特別注意。除了使用適應不同螢幕尺寸的影象外,您還應該提供縮放影象。

提供縮放影象涉及通過將影象重新調整為完美尺寸來優化影象——不要太小,也不要太大。使用正確縮放的影象將對網站速度和效能產生積極影響,從而改善您網站的SEO(搜尋引擎優化)。

本文將解釋如何在您的WordPress網站上提供縮放影象。我們還提供了外掛推薦,以幫助您自動提供縮放影象。

什麼是縮放影象?

縮放影象是經過調整以適合網站所需的確切尺寸的影象。

如果您使用小影象填充較大的區域,則放大時會變得模糊。另一方面,如果你使用過大的影象,瀏覽器會縮小它們以適應給定的尺寸,但影象尺寸會保持不必要的大。

縮放圖片對比

例如,如果您將500 x 500畫素的影象用於50 x 50畫素的縮圖,則瀏覽器必須先下載並縮小圖片,然後才能將其顯示給訪問者。此過程效率低下,並且會減慢網站載入時間。

但是,如果您通過提供縮放影象來優化影象,則不會出現此問題。

如何提供縮放影象?

現在是時候學習如何在您的WordPress網站上正確提供縮放影象了。有兩種方法可以做到這一點——手動或使用外掛。本節將向您展示如何手動縮放影象。

步驟 1-分析網站

如果您想在完全優化整個媒體庫之前嘗試使用少量影象,請嘗試縮放在您網站的多個頁面上重複出現的影象。例如,網站徽標或標題影象。

首先,您需要在網站上找到需要重新縮放的影象以及要使用的適當尺寸。為此,我們將使用GTMetrix

1. 開啟GTMetrix並輸入您的WordPress網站URL。單擊Test Your Site按鈕。

GTMetrix

2. 完成網站分析後,轉到“Structure”選項卡並單擊“Properly size images”部分。

Properly size images

3. 本部分將顯示您網站中的哪些影象需要優化。Potential Savings列將顯示提供縮放影象後的潛在節省。儲存影象的URL以備後用。

影象優化版本

步驟 2-使用檢查工具找出最大顯示尺寸

WordPress已經包含一個名為srcset的用於影象優化的本機功能,它可以使您的影象具有響應性。

srcset為上傳到站點的每個影象建立多種尺寸。例如,如果您上傳2000 x 2000畫素的圖片,WordPress會自動建立其他幾種尺寸的副本,例如:

  • 中等尺寸– 400 x 400 畫素
  • 縮圖– 200 x 200 畫素

然後,它向瀏覽器提供這些不同的尺寸,瀏覽器只會下載最優化的尺寸。

但是,完全依賴 srcset並不能像提供縮放影象那樣顯著提高站點效能。為了進一步優化您的WordPress網站,仍然需要找出顯示影象的最大尺寸。

例如,如果最大顯示尺寸為500 x 500畫素,則無需上傳2000 x 2000畫素的影象。因此,要找出影象的最大顯示尺寸,請使用檢查工具

1. 在Chrome中,右鍵單擊影象並單擊Inspect。如果您使用Firefox,請選擇Inspect Element,或者在Edge中選擇Developer Tools。在本例中,我們將使用Chrome。

2. DevTools面板將顯示在瀏覽器視窗的右側在那裡,影象程式碼將突出顯示。將滑鼠懸停在程式碼上以檢視影象的Rendered sizeIntrinsic size

DevTools檢視圖片屬性

3. 記下Rendered size,因為它是最大顯示尺寸。同時,Intrinsic size是影象的實際尺寸,是使用者瀏覽器下載的尺寸。

瀏覽器載入圖片實際尺寸

步驟 3-重新縮放影象

下一步是重新調整大小不正確的影象。有多種方法可以做到這一點:使用影象編輯器、WordPress媒體庫或媒體設定。讓我們看看他們中的每一個。

通過影象編輯器

在WordPress網站中縮放影象的第一種方法是使用影象編輯器。有大量可用的線上和離線影象編輯器工具。

用於編輯影象的離線工具的示例包括PhotoshopGIMP。在本教學中,我們將使用線上影象編輯器PicResize

1. 開啟PicResize並選擇From URL

PicResize

2. 貼上您要編輯的影象的URL,然後單擊Continue to Edit Picture

3. Select a new size for your picture選項下有一個下拉選單。選擇Custom Size

自定義圖片尺寸

4. 對於新的影象尺寸,根據檢查工具建議的渲染尺寸輸入WidthHeight

5. 向下滾動並點選I’m Done, Resize My Picture! 按鈕。

圖片儲存下載

6. 通過單擊Save to Disk來儲存影象。立即執行,因為PicResize會在20分鐘後自動刪除影象。

PicResize自動刪除圖片

7. 通過刪除檔名開頭的rsz_將影象重新命名為其原始名稱。

通過WordPress媒體庫

要使用此方法提供縮放影象,您將使用WordPress媒體庫裁剪影象。這樣做的方法如下:

1. 在WordPress儀表盤上,轉到文章選項卡。

2. 找到包含您要重新縮放的影象的文章,然後點選編輯

WordPress圖片編輯

3. 在文章上,單擊要縮放的影象。選擇替換->開啟媒體庫

編輯文章圖片

4. 將出現一個媒體庫彈出視窗。在那裡,導航到右列,然後單擊編輯影象連結。

WP編輯圖片入口

5. 在Scale Image部分下,您將看到原始影象的大小。在其下方的欄位中輸入新的縮放尺寸 – 基於上一步中的Rendered size。請注意,當您鍵入水平尺寸時,垂直尺寸會自動調整。單擊Scale

WP修改圖片尺寸

影象現在已成功縮放。

通過管理媒體設定

最後一種方法是通過直接調整媒體設定來縮放影象:

1. 在WordPress站點儀表盤上,導航到Settings -> Media

自定義WP圖片生成尺寸

2. 您將看到“Media Settings頁面,其中設定了預設影象尺寸。它包括中等的尺寸,以及縮圖設定

3. 設定每個影象尺寸的最大寬度和高度。設定首選影象尺寸後,單擊儲存更改按鈕。

這些設定將提示 WordPress 自動縮放您將來上傳的影象。

步驟 4-替換影象

要手動縮放影象,您還必須替換現有影象。在這個例子中,我們將使用一個名為Enable Media Replace的WordPress外掛。

1. 從外掛選單安裝並啟用外掛Enable Media Replace。

2. 導航到Media -> Library並將佈局從Grid更改為List

多媒體庫顯示方式

3. 將滑鼠懸停在要替換的影象上,然後選擇Replace Media

WP替換圖片

4. 單擊Choose File按鈕以選擇您儲存的縮放影象。

替換圖片上傳

  1. 設定ReplacementDate選項,然後單擊Upload

替換圖片方式

對於Replacement Options ,如果縮放的版本使用相同的格式,請選擇Just replace the file 。同時,對於Date Options,建議保留原來的日期。

5個提供縮放影象支援的外掛

現在您已經學會了如何手動縮放影象,讓我們來看看如何使用 WordPress 外掛來做到這一點。

雖然手動過程允許更高的精度,但這種方法可以更輕鬆、更快速地提供縮放影象,因為外掛將自動執行該過程。

以下是我們挑選的五個在WordPress中提供縮放影象的最佳外掛。

1.Smush

Smush

Smush是用於WordPress影象優化目的的最受歡迎的外掛之一。它有助於在不影響影象質量的情況下調整影象大小和壓縮影象。

該外掛有助於在您的WordPress網站上提供縮放影象,具有以下功能:

  • 批量壓縮 – 一次為多達50張影象提供高質量的影象壓縮和優化,以幫助節省時間。
  • 尺寸不正確的影象檢測– 查詢會降低站點速度的未優化影象。
  • 指定目錄壓縮 – 壓縮位於WordPress媒體庫之外的目錄中的影象。這包括來自其他WordPress外掛和主題包的影象,以便您可以在整個站點上有效地提供縮放影象。
  • 內建懶載入– 僅提供網站訪問者正在檢視的影象,同時延遲頁面下方的其他影象。懶載入功能有助於顯著提高網站速度,尤其是在網站有大量影象的情況下。
  • Smush配置– 只需單擊幾下即可儲存您首選的Smush配置設定並將其應用到站點,從而改進您的工作流程。

Smush的免費版本提供了出色的工具來在WordPress網站中提供縮放影象。它優化無限影象,只要每個影象大小不超過5MB。

同時,高階計劃具有許多附加功能,例如與免費版本相比優化速度提高200%以及保持EXIF資料完整的選項,這對於攝影師來說是理想的選擇。

2.Optimole

Optimole

Optimole是另一個在WordPress中提供縮放影象的優秀外掛。設定完成後,它將自動調整影象大小以適應各種螢幕尺寸。

藉助以下工具,使用Optimole縮放影象非常簡單:

  • 基於格式的優化– 根據訪問者瀏覽器支援的格式優化無限影象。例如,如果訪問者使用支援WebP的瀏覽器,Optimole會將影象檔案轉換為WebP。
  • 水印新增– 自動為影象新增水印。這對於保護影象免遭未經授權的使用非常有用,特別是如果您打算在網站上上傳原始影象,例如您自己的插圖或照片
  • 為較慢的連線降級質量– Optimole在檢測到較慢的網路時會將影象大小減少到多達40%。
  • 雲庫支援– 將您的站點影象儲存在Optimole Cloud上,這將有助於節省伺服器儲存空間並在多個Optimole連線的網站之間交叉共享影象。
  • 視網膜支援——檢測視網膜螢幕並在適用時自動載入視網膜影象。

使用Optimole的免費計劃,為每月最多5,000名訪問者的WordPress網站縮放影象。要在流量較高的網站上使用它,必須訂閱高階計劃。

3. EWWW Image Optimizer

EWWW Image Optimizer

EWWW Image Optimizer是一種影象優化工具,可幫助您在WordPress網站上縮放影象。

通過使用EWWW Image Optimizer的一系列出色功能來提供縮放影象,例如:

  • 無限檔案大小優化– 優化所有大小的影象。如果您想優化比EWWW Image Optimizer測試過的尺寸更大的影象,只需聯絡他們。
  • 批量優化– 通過優化單個頁面上的所有影象(包括媒體庫目錄之外的影象)來更有效地工作。
  • 刪除後設資料——從不必要的資料中去除影象。
  • 自適應轉換——EWWW影象優化器支援JPG、PNG、GIF和WebP影象格式。它的智慧轉換會自動檢測最佳影象格式,例如,將PNG轉換為JPG或WebP格式(如果適用)。
  • 與其他外掛的相容性 – 該外掛與數百個 WordPress 外掛和主題相容,例如Perfect Images Retina,可在上傳過程中自動優化視網膜影象。

EWWW Image Optimizer的核心外掛是免費的,但付費計劃提供更強大的功能。他們可以處理多個網站上的影象優化,並增加頻寬限額。

4.ShortPixel

ShortPixel

Shortpixel通過提供高質量的影象壓縮來有效地提高WordPress網站的效能。

該外掛將通過使用以下功能來幫助提供縮放影象:

  • 自動調整影象大小– 在您上傳影象時自動調整影象大小,以實現更有效的工作流程。
  • 光澤優化——這種型別的影象壓縮提供一流的影象質量,但可能會導致頁面載入速度略有下降。這對攝影師很有用,因為它有利於影象質量而不是頁面速度。
  • 保留或刪除 EXIF 資料– 非常適合攝影師僅提供所選影象的必要資料,從而優化網站效能。
  • 跳過優化的影象——ShortPixel不會過度優化站點影象,因為它會跳過任何已經優化的影象。
  • 批量優化– 只需單擊一下即可優化媒體庫選項卡或其他站點目錄中的影象。

它的免費版本每月優化多達150張影象。同時,其付費版本包括具有各種影象配額的月度和一次性計劃。此外,ShortPixel為非營利組織提供免費的優化積分。

5.Perfect Images

Perfect Images

Perfect Images有助於優化WordPress的視網膜顯示影象。該外掛的功能包括:

  • 高清縮放影象——自動生成視網膜影象,為超高解析度螢幕提供優化影象。
  • 媒體庫檢視– 更容易檢視需要將哪些影象轉換為視網膜影象。對於具有大量影象的網站特別有用。
  • 縮圖再生– 幫助為每次影象更改重新生成縮圖。這可以批量完成以節省時間。
  • 影象閾值控制——WordPress可能會自動調整大影象的大小,而視網膜影象會故意在解析度和大小上保持較大。Perfect Images可讓您通過禁用影象閾值來控制此功能。
  • 影象替換– 使用視網膜版本快速輕鬆地替換影象。

除了免費計劃外,這個WordPress外掛還提供付費版本,支援延遲載入、自動調整站點媒體庫中的影象大小,並可在多個網站上使用。

小結

提高WordPress網站效能的最佳方法之一是提供縮放影象。這意味著調整站點影象的大小以適合放置它們的區域的確切尺寸。

優化圖片可以顯著改善您網站的載入時間和在搜尋引擎結果中的排名,從而增加網站流量並降低跳出率

此外,在WordPress網站中提供縮放影象並不難。您可以手動完成,也可以使用 WordPress 外掛。

如果您選擇遵循手動方法,則步驟包括:

  1. 分析網站——在網站上找到需要重新縮放的影象。
  2. 找出影象的最大顯示尺寸——使用檢查工具找出影象的最大顯示尺寸。
  3. 縮放影象——通過使用影象編輯器或通過媒體設定指定最大影象尺寸,將影象縮放到適當的尺寸。或者,通過WordPress媒體庫裁剪影象。
  4. 替換原始影象– 用正確縮放的影象替換現有影象。

如果您更喜歡使用更實用的方法提供縮放影象,請使用外掛。這樣做會自動在WordPress網站中提供縮放影象,這樣您就可以專注於其他重要的網站方面。

評論留言