專注於架設企業網站,分享WordPress教學和Elementor教學

Wordpress網站圖片壓縮教程

更新日期:2024-02-20
本系列教學
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我

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

什麼是圖片優化壓縮?

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

-1

優化壓縮圖片的好處?

  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分數很低(綠色表示優秀,紅色表示很差),也能看到有很多需要優化壓縮的圖片,這是我必用的方法
wordpress優化圖片教程

譬如本站的外貿架設網站教程頁面,圖片多達200多張,在圖片經過shortpixel優化后,Optimize images評分達到99分。

wordpress優化圖片教程-2

圖片壓縮

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

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

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

本地壓縮圖片

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

  1. 打開photshop,打開一張圖片
  2. 在菜單欄中,點擊“窗口”,勾選“動作”,點擊新建按鈕,命名動作名稱,確定後自動開始錄製
Wordpress網站如何優化圖片
  1. 將圖像大小改為目標尺寸,如1000px或1200px
Wordpress網站如何優化圖片
  1. 將圖片存儲為web格式,調整質量為90 jpg格式,存儲到非原圖的新文件夾內。 (PS:如果你的圖片需要保留透明效果,就要保持為png格式,通常png格式比jpg格式的圖片要大)Wordpress網站如何優化圖片
  1. 關閉圖片,並點擊不保存原圖修改,
Wordpress網站如何優化圖片
  1. 至此,動作錄製完成,點擊動作錄製的結束按鈕
Wordpress網站如何優化圖片
  1. 接下來進行圖片的批量處理,
    • 點擊文件》自動》批處理
    • 選擇動作,默認已經選好剛才錄製的動作
    • 選擇源文件夾:選擇需要處理的圖片所存放的文件夾
    • 目標文件夾:選擇需要存儲處理後圖片的文件夾
    • 點擊確定,photoshop開始快速處理圖片,處理完成後你去文件夾裡驗收即可
Wordpress網站如何優化圖片

圖片數量少時,用免費軟件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. 壓縮成功後逐一下載圖片,你也可以點擊預覽按鈕查看壓縮前後的效果對比
shortpixel優化圖片教程
shortpixel優化圖片教程-2

wordpress外掛程式自動壓縮圖片

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

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

Wordpress網站如何優化圖片

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

Wordpress網站如何優化圖片

禁止自動生成圖片

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

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

Wordpress網站如何優化圖片

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

Wordpress網站如何優化圖片

在網站頁面設計完、內容上傳前,我們先禁用所有自動生成的圖片;若馬上可以上傳內容了,我們可以根據設計情況,酌情放開部分圖片尺寸,譬如在製作產品列表頁時,我們用到了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('another-size');   // disable any other added image sizes
}
add_action('init', 'shapeSpace_disable_other_image_sizes');
  1. 選擇 Run snippet everywhere
  2. 點擊Save changes保存即可。

查看更多WordPress教程

点赞

0 / 5 0

Your page rank:

Picture of 外貿建站技術姐Bonnie
外貿建站技術姐Bonnie

Bonnie是LOYSEO的創始人,在建站領域有著超過14年的經驗,熱愛能將想法變為現實的WordPress,更是Elementor的忠實使用者~

LOYSEO
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折, 戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛程式價值>$49
主機送Astra Pro不限網站1年
gmail.comsina.com 郵箱,註冊易通過
遇到問題,聯繫我