【2024】WordPress網站圖片建議尺寸 | 精選圖片的最佳設定與壓縮網站介紹

如果你只是想快速了解封面圖片尺寸的話,先給個結論是 1200x630 像素。

而接下來我也將介紹網站圖片建議的容量大小、圖像壓縮網站、排版該注意的重點,讓你的網站再也不怕被糟糕的圖片設定拖慢速度!

為什麼圖片要特別處理?

我們都知道網站載入速度是越快越好,但偏偏圖片就是很大張,要把它讀出來就是要花上一些時間,更別提現在相機普遍像素比較高的情況,動輒一張就是 5MB 起跳。如果把這些大小好好調整一下,可以減輕主機負擔,載入速度更快,訪客可以即時看到內容,搜尋引擎也會更喜歡。以下我粗略舉兩個實際案例:

案例一:俏鬍子旅行團

俏鬍子旅行團網站測速數據
俏鬍子旅行團網站測速數據

先聲明一下,我還滿喜歡這個網站的喔(不然不可能存在書籤列參考)。

我們先不看其他數據,就單純看圖片 Image 的部分,這首頁使用了約 37 張圖片大小約 11.5 MB,雖然大了一些些,但我是覺得速度測出來有 C 也算可以接受,網站其他體驗不錯的話都可以彌補差距。

案例二:一小時學盲解

一小時學盲解網站測速數據
一小時學盲解網站測速數據

從這個魔術方塊網教學網站來看,雖然圖片使用大約是俏鬍子旅行團的一半,但大小卻只有 56KB 是 1/200,網頁大小很小的情況下,自然載入速度可能快個一些。

還是強調這個是很粗略的比較而已,這個只不過是用來提醒圖片大小的差異,一小時學盲解網站還額外對載入速度做了很多努力,這未來有機會再分享。

圖片建議尺寸

文章內圖片

一般的網站來說,如果你想做個大張一點的圖片,目前主流會是跟文字差不多寬度,這樣訪客的視覺比較流暢,那大約寬度在 750~800 像素都是效果不錯的。我個人習慣定在 750 像素,像是這篇後台設定教學文大概就是這樣的圖片尺寸,可以隨便逛逛看看效果。

而如果你是想做小一點的,那大概就是一半,400 像素的表現很好;甚至如果有特地目的也可以更小一些,像是我這篇搜尋引擎排行第一個魔術方塊教學,圖片內容簡單好懂,所以沒有超過 150 像素。

精選圖片

這可以簡單理解成文章的封面圖,就是你分享網址給別人時會顯示的那個(但並非一定就是那張)。目前主流尺寸是 1200x630 像素,這種設計可以確保你在社群平台分享時,縮圖可以呈現你想要的內容。Facebook 自己也在圖片手冊中提到相同尺寸。

橫幅圖片

這個就是所謂的滿版,英文叫做 Hero Image,主要就是要有特色有重點可以吸引訪客,像是一小時學盲解首頁上方那幾張大的。這個的話建議參考一下你使用的佈景主題官方說明,每個廠商做的不見得相同,懶得找的話,多數可能會用 1440 或者 1920 像素吧。

圖片建議大小

一律建議小於 200 KB,大容量的圖片雖然能保留更多細節,但不是所有訪客都會在看你文章的時候拼命縮放看圖片。如果可以的話,你平時用的圖片後製軟體在輸出時把畫質調低一些,沒有一定參數,你自己看起來能接受的程度就行了。裁切圖片、壓縮畫質這些是每個軟體必備功能,從免費的 GIMP、單次付費的 Affinity Photo、訂閱制的 ADOBE Photoshop 都有,沒有說一定要用哪個。而現在 WordPress 可以直接上傳 WebP 檔案格式的圖片了,真的是輕量很多,不過有小部分的瀏覽器不支援,接受的話可以直接用這種格式上傳檔案。

Imagify - 照片減肥工具

Imagify 官方網站
Imagify 官方網站

如果你不想用軟體的話,那就直接找網頁版的吧!

這個 Imagify 是 WP Rocket 家開發出來的圖片處理工具,那畢竟 WP Rocket 這款快取外掛我很信賴,所以我也會推薦他們家的圖片處理服務。註冊帳號後提供的免費額度大致夠用,所以多數情況不用額外付費沒問題~

Imagify 官方網站
Imagify 官方網站

使用方法就這樣,圖片拉進去,然後最下方就會顯示壓縮了多少,再按 DOWNLOAD 下載就好了,非常簡單。他們也有直接提供對應的 WordPress Imagify 外掛,自己到後台安裝即可。

精選圖片設計重點

圖片建議顯示位置
圖片建議顯示位置

我個人很建議把主要內容放在中間,理由是搜尋引擎顯示的畫面偶爾會調整,但正中間 1:1 的部分基本上永遠都會出現,所以重要資訊、文字請都放在這裡。而至於旁邊的部分,我是都當點綴用,看要放邊框、或者一些重複圖案就看個人喜好吧~

常見問題

網站圖片大小很重要嗎?

大小、尺寸都很重要,這關係到到文章載入速度,進而影響搜尋引擎對你網站的評分,且就訪客角度而言等了太久還沒出現內容,可是會直接跳出的!

WordPress 精選圖片尺寸要多少?

建議尺寸是 1200x630 像素,大小則是盡量不要超過 200 KB。那至於要如何調整、設計時又該注意哪些細節,可以參考文中介紹的 Imagify 工具與調整心法。

文章類別

小技巧

文章標籤

WordPress, 小技巧

建議文章