EWWW Image Optimizer，一個在 WordPress 中將所有圖像轉換為 WebP 的插件

Eva

2025-05-12

推薦給這些人

那些正在尋找有用的 WordPress 插件的人
想要在 WordPress 中使用 WebP 圖像的人
那些想要縮小圖像尺寸以加快網站顯示速度的人
對於那些考慮安裝 EWWW Image Optimizer 的人

當您在 WordPress 等上撰寫博客文章時，您幾乎總是在每篇文章中使用圖像。
在Josys no Jiyucho中，我們主要撰寫與IT相關的解釋性文章，因此我們很少在一篇文章中使用數十張圖片。
服務器的磁盤容量是有限制的，對於閱讀文章的人來說，圖片越輕越好！因此，我想使用 EWWW Image Optimizer 將網站上發布的圖像壓縮並轉換為 WebP。

WebP是谷歌開發的下一代靜態圖像格式，據說是為了減少網站流量和顯示速度而開發的。
Google 的評論稱：“尺寸比 PNG 小 26%。比 JPEG 圖像小 25-34%。”點擊此處查看原文。

由於它是 Google 創建的格式，預計它會比現有的 PNG 和 JPG 更輕，但還有其他好處。
令人驚訝的是，WebP 支持背景透明度和動畫！

到目前為止，我們使用PNG作為透明背景，使用GIF作為動畫，轉換方式多種多樣，但它將統一為網站的WebP（Weppy）。（GIF 不太流行......）

	背景透明化	動畫片
網絡P	好的	好的
巴布亞紐幾內亞	好的	的
JPG（JPEG)	的	的
動圖	好的	好的

WebP、PNG、JPG、GIF比較

有一個缺點，除非你的瀏覽器支持，否則你無法查看它，但我認為你不需要擔心它，因為它目前與除 IE 之外的大多數瀏覽器兼容。

瀏覽器的兼容性狀態
https://caniuse.com/?search=webp

雖然不清楚人群，但令人欣慰的是，95.77%的病例是相容的。

什麼是 EWWW 圖像優化器？

EWWW Image Optimizer 是一個 WordPress 插件，可在您每次上傳圖像時自動縮小和優化圖像。

將過去的圖像轉換為 WebP 並壓縮它們的功能。還有一個功能是通過延遲加載圖片來加快網站的顯示速度，使網站加載流暢。
它是一個非常著名和流行的插件，有效安裝次數超過 900,000，評分為 4.5 星。

創作者	正是萬維網
支持的 WordPress 版本	5.6 或更高版本
最新驗證版本	5.9
PHP版本	7.2 或更高版本
支持的語言	日語、英語、法語、意大利語、西班牙語等28種語言

截至 2022 年 2 月的信息

我認為對於任何使用 WordPress 創建博客的人來說，這是一個必不可少的插件。

EWWW Image Optimizer 的官方網站是英文的，但也支持日文。
點擊此處查看EWWW Image Optimizer官方網站

如何安裝和激活 EWWW Image Optimizer

首先，安裝並激活轉換為 WebP 的插件 EWWW Image Optimizer。

單擊 WordPress 左側插件下的添加新項。
在右上角顯示的[關鍵字]中搜索[EWWW Image Optimizer]。

找到 EWWW Image Optimizer 並單擊立即安裝。
搜索結果中會顯示多個插件。請避免誤安裝類似插件。

單擊“立即安裝”，EWWW Image Optimizer 的狀態將更改為“正在安裝”。
稍等片刻，安裝完成，按鈕將變為【激活】。當按鈕變為[激活]後，單擊[激活]。

如何設置 EWWW 圖像優化器

從這裡，我們將配置 EWWW 圖像優化器。
在本文中，我們將只為初學者介紹最低限度的設置。

單擊 EWWW Image Optimizer 中的 [設置] 進入設置屏幕。

我們將從上面的設置屏幕中的[基本]選項卡上的設置進行說明。
第一的，[刪除元數據]但是，如果您不需要保留元數據，請選中復選框將其刪除。

低於那個[延遲加載]但是，建議延遲加載圖像，因為這樣可以減輕觀看者的壓力。具體來說，它是一個僅在屏幕滾動到達圖像時才加載圖像的功能，並且由於加載頁面時並非所有圖像都被加載，因此可以期望提高頁面打開的速度。

下一個[Webp 轉換]不過，這次的目的是將圖像轉換為Webp，所以請選中該複選框。

在[Webp交付方式]下，將以下字符用藍框括起來的代碼添加到租賃服務器等上的.htaccess的開頭。
請將其複製到記事本或其他東西中。

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png|gif)$
	RewriteCond %{REQUEST_FILENAME}.webp -f
	RewriteCond %{QUERY_STRING} !type=original
	RewriteRule (.+).(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
	<FilesMatch ".(jpe?g|png|gif)$">
		Header append Vary Accept
	</FilesMatch>
</IfModule>
AddType image/webp .webp

這樣就完成了 EWWW Image Optimizer 的設置。
不要忘記按左下角的“保存更改”按鈕。

如何將Webp所需的信息添加到.htaccess的開頭

很多人似乎在他們的博客上使用Xserver，但我們也在《Josis no Jiyucho》上使用Xserver。
從這裡開始，我想向那些租用 X 服務器的人解釋如何將使用 EWWW Image Optimizer 分發 Webp 所需的信息添加到 .htaccess 的開頭。

不正確的設置可能會導致您的博客出現意外錯誤。如果您認為自己不擅長，請向有知識的人尋求幫助。

進入X服務器的【服務器管理界面】。
在頁面的【主頁】中點擊【編輯.htaccess】。

單擊[編輯.htaccess]以顯示[域選擇屏幕]。
單擊您正在使用的域右側的選擇。

參見：Mac應用程序“iMage Tools” – 批量更改圖像文件名（重命名）

當您單擊[選擇]時，將打開一個名為[.htaccess編輯]的頁面。
單擊頁面上標有[.htaccess編輯]的選項卡。

將[WebP分發方法]中寫入的字符粘貼到紅色虛線內寫入的字符的開頭。

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{REQUEST_FILENAME} (.*).(jpe?g|png|gif)$
	RewriteCond %{REQUEST_FILENAME}.webp -f
	RewriteCond %{QUERY_STRING} !type=original
	RewriteRule (.+).(jpe?g|png|gif)$ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
	<FilesMatch ".(jpe?g|png|gif)$">
		Header append Vary Accept
	</FilesMatch>
</IfModule>
AddType image/webp .webp

從 <IfModule mod_rewrite.c> 粘貼到 AddType image/webp .webp。

粘貼完成後，單擊右下角的[前往確認屏幕]繼續。

單擊右下角的【運行】按鈕。

如何檢查Webp是否正確反映在WordPress中

完成X服務器上的設置後，返回WordPress並檢查是否可以使用Webp。

確保 EWW Image Optimizer 設置屏幕右下角的 [PNG] 部分已更改為綠色 [WEBP]。
*更改可能需要大約 20 分鐘才能體現。請稍等片刻並再次檢查。
*您當前使用的瀏覽器必須支持Webp。作為預防措施，我們建議使用最新版本的 Google Chrome。

[該網站似乎缺少 mod_headers。請聯繫您的託管公司或系統管理員以啟用此 Apache 模塊。 ] 顯示

如果 EWWImage Optimizer 設置中顯示此消息，則無需擔心。
即使出現此消息，只要 EWWW Image Optimizer 設置屏幕的右下角有一個綠色的 [WEBP] 圖像，就沒有問題。

如何實際壓縮圖像並檢查是否正在使用 Webp

從這裡開始，我們將使用 EWWW Image Optimizer 壓縮之前上傳的圖像，並檢查是否可以使用 Webp。

單擊WordPress管理屏幕右側菜單中[媒體]下的[批量優化]。
單擊[批量優化]，轉到[批量優化]屏幕。
單擊[批量優化]屏幕上的[掃描未優化的圖像]。

單擊顯示[優化 XX 圖像]的位置。
這裡的圖片數量之所以高於實際使用的圖片數量，是因為其中還包括上傳到WordPress時自動創建的縮略圖數量，所以無需擔心。

如果單擊[優化XX圖像]的位置，圖像尺寸將逐漸縮小。
如果這裡顯示Webp，則沒有問題，因為Webp圖像也是創建的，沒有任何問題。
雖然常規 EWWW Image Optimizer 的減少率為 14.0%（這仍然是一件好事），但 Webp 的減少率為 35.6%。
您可以看到 Webp 非常有效地縮小圖像。