指南/建立內容/媒體/將圖片最佳化

將圖片最佳化

為了讓網站訪客享有最佳體驗,網站圖片須快速載入。本指引將說明如何縮減檔案大小並保留圖片畫質,盡可能提升圖片的處理速度。

WordPress 網站可加入不同數量的佈景主題、版面配置與其他因素,這些都會影響系統建議的圖片大小,因此,我們無法在此提供適合所有人的圖片大小。一般而言,建議根據需求將圖片設為適當大小,而不是越大越好。

現在的數位相機與智慧型手機,都能以大型檔案儲存高畫質圖片。在網站顯示這類圖片時,可將檔案大小縮小 50% 以上,以保留良好畫質。

請前往「媒體庫」的「編輯圖片」面板查看檔案大小與尺寸,步驟如下:

  1. 前往網站儀表板的「媒體庫」。
  2. 按一下要查看檔案大小和尺寸的圖片縮圖。
  3. 縮圖周圍會出現邊框,右下角則會顯示數字。
  4. 按一下「編輯」按鈕。
  5. 系統隨即會在「編輯」面板顯示檔案大小與尺寸。
「編輯圖片」面板的螢幕截圖;顯示檔案大小、尺寸與其他圖片詳細資料。

查看網站上的圖片,圖片是否顯示為高畫質,但載入速度緩慢?例如假設圖片寬度為 5000px,建議縮減到 2500px。如顯示正常,可繼續將圖片寬度縮小到 2000px 或 1800px,直到畫質和大小取得適當平衡為止。

以下指引章節將說明如何用不同的工具縮小圖片大小。

用免費軟體縮小圖片大小

調整圖片大小的方法有很多。在下列章節中,我們會說明電腦、線上程式與更進階軟體上的可用工具。

Windows

可使用 Windows 電腦上的小畫家 。用該程式開啟圖片,然後在「小畫家」視窗頂端按一下「調整大小」。可按照百分比縮小圖片,然後儲存較小的新版圖片。

Mac

可使用 Mac 電腦上名稱為「預覽」的應用程式。用該應用程式開啟圖片,然後依序點按「工具」和「調整大小」。

線上工具

要快速縮小圖片,可使用免費線上工具,例如:

只要將圖片上傳至這些服務,選擇新的大小並匯出新版本即可。請注意,這些服務與 WordPress.com 並無關聯。

Jetpack 行動應用程式

如透過 Jetpack 應用程式張貼文章到網站,該應用程式可將圖片最佳化。系統會預設開啟「最佳化圖片」選項。可以設定「最大圖片上傳大小」,上傳原始檔案後系統就會自動調整大小。

如使用 iPhone 版 Jetpack 應用程式Android 版 Jetpack 應用程式,且想要調整設定,請依照下列步驟操作:

  1. 在手機上登入 Jetpack 應用程式。
  2. 按一下右下角的個人檔案圖示。
  3. 按一下「應用程式設定」。

可關閉「最佳化圖片」(但不建議這麼做),或調整「最大圖片上傳大小」。圖片大小預設為 2000 x 2000px。

「最大圖片上傳大小」設定具有醒目提示格式。
iOS 設定
「最佳化圖片」設定已開啟。
Android 設定

GIMP 圖片編輯器

若要進一步控制圖片的最佳化設定,可用 GNU Image Manipulation Program (GIMP) 縮小圖片大小;GIMP 是 Photoshop 的免費替代選項,Windows、Mac、Linux 等作業系統皆可安裝。

若要用 GIMP 縮減圖片大小,請:

  1. 在 GIMP 中開啟圖片。
  2. 按一下工具列中的「圖片」,選取「縮放圖片」。
  3. 在圖片大小中,將寬度的值變更為想要的大小。
  4. 按一下「縮放」。
  5. 在工具列中選取「檔案」,然後選取「匯出為」。
  6. 替檔案命名,結尾為「.jpg」。
  7. 選取「匯出」。
  8. 在開啟的對話方塊中,將畫質變更為 60 或其他想要的值。
  9. 按一下「進階選項」。
  10. 將「次取樣」變更為「4:2:0 (色度四等分)」。
  11. 按一下「匯出」。

以下是成果比較。請用滑動軸檢視完整圖片:

The left image has a file size of 1,072KB. The right image has a file size of just 384KB, yet there is no noticeable loss of quality!

其他圖片編輯軟體

其他圖片編輯軟體工具可能有簡易選項,可快速調整大量照片的大小並壓縮:

你也可以使用網頁服務:

支援外掛程式的網站

如果你的 WordPress.com 方案支援外掛程式,可使用內建的 Jetpack 網站加速器 (CDN),自動加快圖片載入時間。

  1. 前往網站儀表板。
  2. 前往「Jetpack」→「設定」。
  3. 按一下標示為「效能」的分頁。
  4. 向下捲動至「效能和速度」區段。
Jetpack「效能」設定的「效能和速度」區段。
網站加速器

Retina 顯示器

Retina 顯示器的像素密度比一般顯示器高得多,可能導致一般像素密度的圖片看起來模糊不清;為防止這種情況,我們在偵測到 Retina 顯示器時,會將圖片大小放大一倍,以呈現最大清晰度,但只有「媒體庫」的圖片大小大於網站圖片時,此功能才會發揮作用。

即使在網站上將最大顯示大小放大一倍,圖片檔案本身仍比相機使用的完整解析度小得多,因此可以將圖片最佳化,使圖片在 Retina 顯示器上呈現絕佳畫質。

Copied to clipboard!