WordPress精選圖片的尺寸、分享呈現與最佳化
Posted in :
很多人第一次注意到精選圖片,是在文章分享到社群時發現縮圖抓錯,或是列表頁上一排文章有的有圖、有的空白。精選圖片在 WordPress 裡不是文章內的插圖,而是代表整篇文章的一張圖,被列表、相關文章、社群分享等多個位置引用。它設定得好不好,同時影響版面整齊度、點擊意願與頁面載入速度。這篇說明精選圖片實際被用在哪些地方、尺寸該怎麼決定、社群分享時會如何呈現,以及圖片最佳化對速度的實際影響。
精選圖片和文章內插圖,是兩件不同的事
文章內的插圖是為了說明段落內容而存在,位置固定在文章裡;精選圖片則是代表整篇文章的縮圖,會被網站的其他位置抓取使用。同一張圖在文章頁可能大幅呈現,在列表頁被裁成方形小圖,在相關文章區又變成細長的橫幅。理解這一點,才會知道為什麼有些圖單獨看很好,放到列表上卻慘不忍睹。
常見的錯誤是把資訊量很大的圖設為精選圖片,例如帶有小字說明的圖表,或是把重點放在角落的照片。這類圖被裁切之後,關鍵資訊往往剛好被切掉。挑選精選圖片時要以「縮小之後還看得懂」為標準,構圖盡量單純,主體置中,避免依賴文字傳達訊息。若真的需要在圖上放字,字要夠大、要留出足夠的安全邊界。
尺寸與裁切:同一張圖會被切成好幾種比例
WordPress 在上傳圖片時會依主題與設定產生數種不同尺寸的版本,用於不同版位。這代表你只上傳一張圖,網站實際上會使用它的多個裁切結果。因此上傳的原圖必須夠大,才能滿足最大的那個版位;但也不需要無限制地大,因為超過實際需求的解析度只會增加儲存與處理負擔。
比較務實的做法是先確認網站上精選圖片最大會出現在哪個位置、寬度大約多少,再以能覆蓋該寬度為原則準備原圖,並統一使用同一種長寬比例上傳。統一比例的好處在列表頁最明顯:所有卡片高度一致,版面才會整齊。如果過去上傳的圖片比例雜亂,換佈景或調整版面時常會出現大量重新裁切的工作。另外要注意的是,主題更換之後圖片尺寸的定義可能改變,舊圖有時需要重新產生對應的裁切版本,這是改版時容易被漏掉的一項。
社群分享時的呈現,跟站內列表不是同一回事
把文章連結貼到社群平台或通訊軟體時,出現的預覽圖並不一定是站內顯示的那張裁切圖,而是由頁面上的分享標記決定。多數情況下精選圖片會被用作分享圖來源,但裁切比例通常與站內列表不同,構圖偏向橫幅。這就是為什麼有些文章在網站上看起來正常,分享出去卻只看到人物的半張臉。
處理方式有幾個方向。最基本的是讓精選圖片的主體集中在中央區域,避免關鍵元素貼邊。其次是確認網站有正確輸出分享用的標記,包含標題、描述與圖片位址,這通常由佈景或相關外掛負責,設定完成後要實際貼出連結測試一次。要留意的是,社群平台會快取抓取到的資訊,換圖之後預覽不一定立刻更新,這是正常現象,不代表設定沒生效。
圖片最佳化對載入速度的實際影響
- 檔案大小是最直接的變數:圖片通常佔一個頁面傳輸量的大宗,未經壓縮的原始照片會明顯拖慢列表頁與首頁的載入。
- 不要用大圖硬縮:直接把超大圖顯示在小版位,瀏覽器仍要下載完整檔案,等於白白付出傳輸成本。
- 選擇適當的格式:照片與圖形適合的壓縮方式不同,現代的圖片格式在同樣畫質下檔案通常更小。
- 啟用延遲載入:讓畫面外的圖片等到接近可視範圍再載入,對圖片多的列表頁效果最明顯。
- 保留適當的畫質:壓縮過頭會讓照片出現色塊,反而傷害觀感,要在檔案大小與畫質之間取平衡。
- 建立上傳規範:與其事後補救,不如在後台給編輯一份明確的尺寸與檔案大小上限,從源頭控制。
沒有設定精選圖片時,網站會發生什麼
最直接的影響是版面。列表頁遇到沒有精選圖片的文章,可能顯示為空白區塊、預設圖,或是整張卡片的高度與其他不同,一整排看起來就會亂掉。有些佈景會退而抓取文章內的第一張圖,這種行為看似方便,實際上很不可控,抓到的可能是一張截圖或裝飾用的小圖。
另一個影響在分享。沒有精選圖片時,社群平台可能改抓頁面上其他的圖片,例如網站標誌或廣告圖,甚至完全不顯示預覽圖,連結貼出去只剩一行文字,點擊意願會明顯下降。因此比較好的做法是把「設定精選圖片」納入發文的標準流程,並準備一套備用的分類主視覺,讓真的沒有合適圖片時仍有可用的替代方案。同時要記得替圖片填寫替代文字,這對無法載入圖片時的呈現與可及性都有幫助。
常見問題
精選圖片會不會出現在文章內容的最上方?
要看佈景怎麼設計。有些佈景會在文章標題下自動顯示精選圖片,有些則只用於列表與分享。如果佈景已經自動顯示,你又在內文最前面插入同一張圖,讀者就會看到重複的兩張。建議發布前先預覽確認實際呈現,再決定內文要不要另外放圖。
上傳的原圖應該準備多大?
原則是能覆蓋網站上最大的精選圖片版位即可,通常是首頁或文章頁的主視覺寬度。準備得比實際需求大很多並不會讓畫面更清楚,只會增加儲存空間與處理時間。建議先實際量測網站上該版位的寬度,再決定原圖尺寸,並固定使用同一種長寬比。
換了佈景之後,舊文章的精選圖片變形了怎麼辦?
這通常是因為新佈景定義的裁切比例與舊的不同。多數情況可以透過重新產生縮圖的方式讓既有圖片產出新尺寸的版本;但如果新比例與原圖差距很大,部分圖片仍可能被切掉重點,這時只能挑出主要頁面的文章重新替換圖片。換佈景前先確認新舊比例差異,可以減少這類工作量。
精選圖片對搜尋排名有直接幫助嗎?
不能期待它直接提升排名,但它會影響幾個間接因素:圖片本身有機會被圖片搜尋收錄、替代文字有助於理解內容、而載入速度與使用體驗則是整體評估的一部分。更實際的價值在於分享與列表上的點擊意願,這些會影響流量,而不是排名機制本身。
可以用同一張圖當很多篇文章的精選圖片嗎?
技術上可以,但不建議大量重複。列表頁如果一整排都是同一張圖,讀者難以分辨文章差異,點擊意願會下降;分享時也一樣。若真的缺乏素材,可以準備幾組依分類區分的主視覺,讓同一分類共用但不同分類有所區別,至少維持視覺上的辨識度。
本文由京采數位科技整理。我們自 2005 年起提供官網設計、系統開發與 Google SEO 服務,實際案例可見成果與案例。
想直接討論你自己的網站狀況,或需要一份初步的搜尋機會評估?
加入京采 LINE 好友相關主題
下一步
如果你正在評估「wordpress精選圖片」相關的規劃,可以參考我們的網頁設計與系統開發服務,或直接與我們聯繫,我們會依你的產業與現況給出務實的建議。