專注於企業網站架設,分享WordPress教學和Elementor教學
不用充值便可免費試用3天的Cloudways超快獨享主機,獨家優惠碼:LOYSEO,前2個月可優惠30%,感謝你的互惠互助

Wordpress網站如何優化圖片

更新日期:2022-02-19

掃碼加入 讀者學習群

相關 教學

我自用的 架設網站資源

當你點擊本站的鏈接購買主機、主題、外掛,我會得到一些佣金用於運營網站,但不會影響你的購買價格,我只推薦自己在用的,感謝有你的支持~比心( •̀ ω •́ )y

Cloudways

不用充值便可免費試用3天的Cloudways超快獨享主機,獨家優惠碼:LOYSEO,前2個月可優惠30%
了解詳情→

elementor logo gradient 01 1
Elementor

最熱門的網頁可視化設計編輯器,我的網站就是用它建的
了解詳情→

Namesilo

註冊網域,購買時使用優惠券loyseo可減1美元
前往註冊→

Share on facebook
Share on twitter
Share on linkedin

你是否知道圖片對網站的速度有巨大的影響?作為新手架設網站經常忽略這一點,由於上傳了未經優化的原圖,導致網站打開速度很慢,還以為是服務器不好,這是常有的事。本文就將講解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,或者是在線壓縮工具:http://shortpixel.com/https://tinypng.com/,對於原圖很大的圖片,線上壓縮工具有最大文件限制,所以過大的圖片,譬如5M以上,建議先用photoshop或者paint.net進行本地壓縮。

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

  • ShortPixel Image Optimizer——我用的這個,有每月免費壓縮額度,買了一次性付費9.9美元,可壓縮10000張圖片
  • Imagify——網站加速外掛WP Rocket開發的,有每月免費壓縮額度,一次性付費9.9美元,可壓縮1G圖片(約1000張)
  • reSmush.it image optimizer——免費的,但壓縮效果不如上面兩款付費的

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

本地壓縮圖片

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

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

圖片數量少時,用免費軟件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%E5%8E%8B%E7%BC%A9%E5%9B%BE%E7%89%87%E6%8F%92%E4%BB%B6resmush%E6%95%99%E7%A8%8B

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

elementor%E4%B8%8Eacf%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%A7%E5%93%81%E5%AD%97%E6%AE%B5%E6%95%99%E7%A8%8B 1

禁止自動生成圖片

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

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

wordpress%E5%AA%92%E4%BD%93%E5%BA%93

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

wordpress%E8%87%AA%E5%8A%A8%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87%E5%8E%BB%E9%99%A4%E6%95%99%E7%A8%8B

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

Your page rank:

2 回复

  1. 如果是禁用所有缩略图。 那需要用到缩略图的地方是否要多传一份。怎么命名系统能自动调用上传的缩略图呢。

    1. 1.要用到的缩略图就不要禁用,把文章中的代码里对应的行删除,或者就只保留需要禁用的缩略图尺寸对应的代码行
      2.你也无法自行上传一份缩略图,这是系统自动生成的
      3.如果你都禁用了,系统无法获取到缩略图时,会显示你上传的原图

評論被關閉。

超快獨享主機
Cloudways
免費試用3天,無需充值
費用月結| 不用一次性付整年
*註冊優惠碼Promo code:LOYSEO
*用Gmail郵箱,註冊易通過