Wordpress網站圖片壓縮教學

你是否知道圖片對網站的速度有巨大的影響？作為新手架設網站經常忽略這一點，由於上傳了未經優化、壓縮的原圖，導致網站打開速度很慢，還以為是服務器不好，這是常有的事。本文就將講解wordpress網站圖片壓縮的詳細步驟，包含了圖片的格式、文件大小、尺寸建議，還包含了photoshop自動批處理、wordpress圖片壓縮外掛使用教學。

什麼是圖片優化壓縮？

圖像優化是盡可能少的降低圖片質量，同時盡可能大的縮小圖片文件大小。見下圖，優化壓縮前後的圖片幾乎看不出質量上的區別，但圖片縮小了75%。

優化壓縮圖片的好處？

1. 更快的網站速度
2. 提升SEO排名
3. 銷售和潛在客戶的整體轉化率更高
4. 更少的存儲空間和帶寬（可以減少託管和CDN成本）
5. 更快的網站備份（也降低了備份存儲成本）

如何優化壓縮圖片？

優化圖片的關鍵三要素：

1. 圖像文件格式：JPG，PNG和GIF
2. 圖像尺寸：高度和寬度
3. 壓縮率：較高的壓縮率=較小的文件

通過組合不同的格式、尺寸、壓縮比，甚至可以將圖像減重80％。

圖片格式

JPG：照片或具有豐富顏色的圖像請使用JPG，JPG是一種壓縮的文件格式，它會稍微降低圖像質量，以便文件更小。

PNG：適合簡單圖像或透明圖像，PNG圖像格式未壓縮，這意味著它是更高質量的圖像，但缺點是文件更大。

GIF：僅適用於動畫圖像，GIF使用256色以及無損壓縮，這使其成為動畫圖像的最佳選擇

圖片尺寸與文件大小

針對企業網站架設的常見用圖場景：

1. Logo：寬度不超過300px，大小建議在50K以內
2. 站點圖標：大小控制在幾K
   • 如果只考慮圖標顯示在瀏覽器頁卡中的情況，不考慮手機端收藏網頁後的圖標效果，尺寸僅需16*16。
   • 如果考慮手機端和瀏覽器頁卡的兩種情形，尺寸512px × 512px，在wordpress後台上傳圖標時便建議上傳512尺寸的。
3. Banner/slider：廣告圖或裝飾用的背景圖片，寬度一般建議在1200px，若banner希望做成全寬的，那麼圖片用2560px寬度也是可以的，但要盡量不讓圖片太大，最大也盡量不要超過200K，以不影響清晰度為前提，越小越好。
4. 產品圖片：寬度建議在600-1200px，大小建議控制在150K以下，有條件的話，盡量保證圖片的方向和尺寸的統一性，避免部分圖片是橫圖，部分又是豎圖。
5. 其他圖片，如證書、團隊成員等：寬度建議在1200px以內，大小建議控制在150K以下。

如何知道自己的圖片是否需要優化壓縮？

• 對照上文的建議，查看自己上傳的圖片格式、文件大小、尺寸
• 用工具gtmetrix檢測，如下圖所示，提示Optimize images分數很低（綠色表示優秀，紅色表示很差），也能看到有很多需要優化壓縮的圖片，這是我必用的方法

譬如本站的企業網站架設教學頁面，圖片多達200多張，在圖片經過shortpixel優化後，Optimize images評分達到99分。

圖片壓縮

圖像壓縮有不同的工具和壓縮效果，你可以使用免費工具壓縮圖片，然後再上傳到網站中，譬如photoshop，或者是在線壓縮工具：shortpixel、tinypng，對於原圖很大的圖片，線上壓縮工具有最大文件限制，所以過大的圖片，譬如5M以上，建議先用photoshop或者paint.net進行本地壓縮。

也可以採取簡單省時省事的方法，譬如使用下面的wordpress外掛在上傳圖片時自動壓縮

• ShortPixel Image Optimizer——我用的這個，有每月免費壓縮額度，買了一次性付費9.9美元，可壓縮10000張圖片
• reSmush.it image optimizer——免費的，但壓縮效果不如上面兩款付費的

下面，我們逐一介紹壓縮圖片的操作方法。

本地壓縮圖片

圖片數量多時，用photoshop的自動批處理功能

1. 打開photshop，打開一張圖片
2. 在菜單欄中，點擊“窗口”，勾選“動作”，點擊新建按鈕，命名動作名稱，確定後自動開始錄製

3. 將圖像大小改為目標尺寸，如1000px或1200px

4. 將圖片存儲為web格式，調整質量為90 jpg格式，存儲到非原圖的新文件夾內。 （PS：如果你的圖片需要保留透明效果，就要保持為png格式，通常png格式比jpg格式的圖片要大）

5. 關閉圖片，並點擊不保存原圖修改，

6. 至此，動作錄製完成，點擊動作錄製的結束按鈕

7. 接下來進行圖片的批量處理，
   • 點擊文件》自動》批處理
   • 選擇動作，默認已經選好剛才錄製的動作
   • 選擇源文件夾：選擇需要處理的圖片所存放的文件夾
   • 目標文件夾：選擇需要存儲處理後圖片的文件夾
   • 點擊確定，photoshop開始快速處理圖片，處理完成後你去文件夾裡驗收即可

圖片數量少時，用免費軟件paint.net單個處理，採用下面的步驟會覆蓋原圖，如需保留原圖，則請先複製一份原圖

1. 用paint.net打開圖片
2. 點擊ctrl+r修改圖像尺寸後，回車鍵確認
3. 點擊ctrl+s保存圖片，設置質量為90，回車鍵確認

手動線上壓縮圖片

以shortpixel在線壓縮圖片為例，下面講解壓縮圖片的操作步驟

1. 打開https://shortpixel.com/online-image-compression，一般選擇glossy壓縮，lossy是最大壓縮，圖可能會糊掉；Lossless是最小壓縮，圖片質量損失越少。
2. 將圖片拖拽到虛線框內進行壓縮
3. 壓縮成功後逐一下載圖片，你也可以點擊預覽按鈕查看壓縮前後的效果對比

wordpress外掛自動壓縮圖片

以免費的reSmush.it image optimizer外掛為例，下面講解如何在線自動壓縮圖片

1.確保安裝並啟用了外掛reSmush.it image optimizer，按下圖所示配置後，此後每次上傳圖片都會自動壓縮圖片，如果發現啟用了optimize on upload導致圖片上傳速度變慢，就不要勾選這個選項，改為自己點擊優化按鈕進行壓縮。

2.若需要優化安裝外掛之前的圖片，請在上圖中點擊optimize all pictures，或者在下圖所示的媒體庫中，點選optimize按鈕手動優化。

禁止自動生成圖片

對於付費壓縮圖片的外掛，需要注意的是：由於每張圖片在上傳時會被系統自動生成多張不同尺寸的圖片，譬如wordpress和woocommerce都會這麼做，那麼如果壓縮這些自動生成的圖片就會加快付費額度的消耗，請在用付費外掛時，進入外掛的設置頁面，設置：將縮略圖不進行壓縮，或有選擇的進行壓縮，而我還會用短代碼直接阻止系統生成無用的圖片，不僅能節省空間，也能避免消耗壓縮額度，下面介紹如何用短代碼阻止系統生成的圖片。

需要知道的是，這些自動生成的圖片並不能在wordpress的媒體庫看到，需要在服務器中查看，下圖是wordpress的媒體庫，只能看到原圖

下圖是siteground後台查看圖片文件的方法，請在進入網站的sitetools後按下圖所示順序操作查看，我們能看到系統為同一張圖生成了很多不同尺寸的圖片

在網站頁面設計完、內容上傳前，我們先禁用所有自動生成的圖片；若馬上可以上傳內容了，我們可以根據設計情況，酌情放開部分圖片尺寸，譬如在製作產品列表頁時，我們用到了300*300px的圖片，那麼就在下面的代碼中，將對應行的代碼前加//註釋掉或直接刪除該行。

1. 安裝安裝外掛Code snippets
2. 進入Snippets > add new頁面
3. 輸入標題，例如：禁用所有縮略圖
4. 輸入如下代碼

// disable generated image sizes function shapeSpace_disable_image_sizes($sizes) { unset($sizes['thumbnail']); // disable thumbnail size unset($sizes['medium']); // disable medium size unset($sizes['large']); // disable large size unset($sizes['medium_large']); // disable medium-large size unset($sizes['1536x1536']); // disable 2x medium-large size unset($sizes['2048x2048']); // disable 2x large size unset($sizes['shop_catalog']); unset($sizes['shop_single']); unset($sizes['shop_thumbnail']); unset($sizes['woocommerce_thumbnail']); unset($sizes['woocommerce_single']); unset($sizes['woocommerce_gallery_thumbnail']); return $sizes; } add_action('intermediate_image_sizes_advanced', 'shapeSpace_disable_image_sizes'); // disable scaled image size add_filter('big_image_size_threshold', '__return_false'); // disable other image sizes function shapeSpace_disable_other_image_sizes() { remove_image_size('post-thumbnail'); // disable images added via set_post_thumbnail_size() remove_image_size('a nother-size'); // disable any other added image sizes } add_action('init', 'shapeSpace_disable_other_image_sizes');
複製

4. 選擇Run snippet everywhere
5. 點擊Save changes保存即可。

查看更多WordPress教學