1. 首頁
2. 知識庫
3. Sharing AI 架站平台教學
4. 網站圖片尺寸怎麼抓？主視覺 Banner、內文圖與上傳前處理

Sharing AI 架站平台教學

網站圖片尺寸怎麼抓？主視覺 Banner、內文圖與上傳前處理

作者：JamXu更新日期：2026-10-12

網站圖片尺寸先看什麼？像素、比例與檔案大小是三件事

討論「圖片要多大」時，很多人其實把三件不同的事混在一起：圖片有幾個像素、長寬是什麼比例，以及檔案有幾 KB。這三件事會互相影響，卻各自解決不同的問題。像素決定清不清楚、比例決定會不會被裁掉、檔案大小決定載入快不快，把它們分開來看，準備圖片時就不會顧此失彼。

以一張主視覺為例：像素不夠，放到大螢幕上會糊；比例不對，手機上可能只剩畫面中間一塊；像素與比例都對了，檔案卻有好幾 MB，首頁就會慢慢地一格一格出現。所以「網站圖片尺寸」不是一個數字，而是一組規格。後面的章節會依序說明怎麼估算像素、各版位用什麼比例，以及上傳前怎麼把檔案縮小。

這篇文章聚焦在尺寸、比例與上傳前處理。圖片的替代文字與檔名怎麼寫，本站另有圖片 SEO 優化說明；分享到社群時顯示的預覽圖，則整理在 網站和社群怎麼串？聯絡按鈕、貼文嵌入與分享預覽圖設定，這裡只在需要時帶到。

為什麼同一張圖，在電腦和手機上看起來不一樣？

現在的網站大多是響應式設計：同一個頁面會依照螢幕寬度重新排版。電腦上一列並排三張圖，到手機上可能變成一張一列；電腦上很寬的橫幅，在手機上若照原比例縮小，就會變成一條細細的長條，上面的文字小到看不清楚。為什麼網站要這樣設計，可以先看 RWD 響應式網站為什麼重要。

影響圖片清晰度的另一個因素，是螢幕的像素密度。網頁排版使用的「CSS 像素」是一個邏輯單位，高解析度的手機與筆電螢幕，會用兩個或更多的實體像素來顯示一個 CSS 像素。web.dev 的響應式圖片教學就以裝置像素比 2 的螢幕為例，說明這類螢幕適合提供兩倍密度的圖片版本。換句話說，一張在版面上只占 400 像素寬的圖片，在高解析度螢幕上需要約 800 像素才會銳利。

版位比例不同時，圖片會被裁切

許多網站的主視覺與卡片圖片，會設定成「填滿固定比例的框，多出來的部分裁掉」。這種做法可以讓版面整齊，代價是圖片的邊緣可能不會出現在畫面上。如果把重要文字或人物放在靠近邊緣的位置，換到另一種比例的框時，就可能被切掉一半。

因此，準備圖片時要先知道它會被放在什麼比例的框裡。如果平台讓你分別上傳電腦版與手機版的圖片，就分開準備兩張；如果只能上傳一張，就把重點內容放在畫面中央，四周保留可以被裁掉的空間。

尺寸怎麼抓？用「顯示寬度 × 2」來估算

與其背一長串尺寸表，不如學會一個估算方法：先量出圖片在版面上最寬會顯示多少像素，再乘以 2，就是比較穩妥的準備寬度；高度則依版位的比例換算。這個方法對照的是前面提到的高解析度螢幕，乘以 2 之後，大多數裝置上看起來都夠清楚。

1. 用電腦瀏覽器打開要放圖的頁面，把視窗拉到最寬，找到圖片要出現的位置。
2. 在圖片上按右鍵選「檢查」，或用瀏覽器開發人員工具查看該元素的寬度，記下最大的顯示寬度。
3. 把顯示寬度乘以 2，得到建議的圖片寬度；如果結果超過 1,920 像素，通常以 1,920 像素為上限即可。
4. 依版位比例換算高度，例如 3:1 的橫幅，寬 1,920 像素時高度就是 640 像素。
5. 如果平台後台已經標示建議尺寸，以後台的數字為準，上面的估算只用來檢查是否合理。

為什麼不乾脆上傳越大越好？因為多出來的像素在畫面上看不到，卻要全部下載。Lighthouse（PageSpeed Insights 背後的檢測工具）在「適當調整圖片大小」這項檢查中，會比較圖片的實際尺寸與顯示尺寸（並把裝置像素比算進去），只要兩者相差的資料量達到 4 KiB 以上就會列為問題。官方說明也很直接：理想上，網頁不應提供比使用者螢幕上實際顯示版本更大的圖片。

表格中的範圍是依估算方法整理的參考值，不是標準規格；實際尺寸仍要以你使用的版型與平台後台標示為準。手機版通常不需要另外再放大，因為手機的畫面寬度比電腦窄，同一張圖在手機上的顯示寬度多半更小，用電腦版的估算結果已經足夠。

主視覺 Banner：桌機與手機分開準備

主視覺是訪客進站第一眼看到的圖片，也是最容易出問題的一張：它最大、最顯眼，又要同時適應寬螢幕與直立的手機。以 Sharing AI 的「輪播看板」區塊為例，新增輪播時可以分別上傳「圖片（桌機）」與「圖片（手機）」，每個欄位旁的說明都直接寫出建議規格。

兩張圖的比例差很多：桌機是又寬又扁的 3:1，手機是正方形的 1:1。直接把桌機橫幅縮小當手機圖用，文字會小到看不清楚；把它裁成正方形，左右兩側的內容又會被切掉。比較好的做法，是用同一組素材分別排版兩次：桌機版把主體放在一側、留出文字空間，手機版把主體與標語上下排列。

標語盡量用文字欄位，而不是做在圖片裡

輪播看板的「文字內容」分頁有「標題」與「副標題」欄位，說明是顯示於輪播圖上；「連結網址」則是點擊圖片後前往的頁面，留空時圖片不可點擊。能用這些欄位呈現的文字，就不要直接做在圖片裡。做在圖片裡的字，在手機上會跟著圖片一起縮小，也無法被選取、翻譯或由螢幕閱讀器直接讀出，只能靠替代文字補充；用文字欄位，換裝置時字級可以維持可讀，日後修改標語也不用重新做圖。

「樣式設定」分頁可以調整標題位置（左、中、右）與文字顏色。選了「左」，桌機圖的左側三分之一就要保持乾淨，避免文字壓在複雜的背景上看不清楚。文字顏色與背景之間要有足夠的對比，這點在戶外看手機時特別明顯。

多張輪播：尺寸一致、數量克制

後台說明特別提醒「每張圖片像素請務必保持一致」。如果第一張是 1920×640、第二張是 1920×720，輪播切換時高度會跳動，下方的內容也會跟著上下移動。同一組輪播的每張圖，都用同一個像素尺寸輸出，最簡單的方法是做一個固定尺寸的範本檔，每次只替換內容。

輪播的張數也不必多。訪客通常不會停留等待每一張輪完，最重要的訊息應該放在第一張；其他張數如果只是不同角度的形象照，不如改放在頁面下方的圖片區塊。若首頁的主視覺要怎麼安排還沒想清楚，可以先參考 公司網站首頁要放什麼中的首屏規劃，再回來準備圖片。

內文圖、圖文交錯與圖片牆：依欄寬決定尺寸

主視覺以外的圖片，尺寸主要由所在的欄寬決定。內文中的單欄圖片通常和文字欄一樣寬，兩欄並排的「圖文交錯」大約是內容寬度的一半，三到四欄的圖片牆或卡片則更窄。用前面的「顯示寬度 × 2」估算，就能得到大致的準備寬度。

內文圖：截圖、流程圖與照片的差別

• 照片：寬度 1,200～1,600 像素通常就足夠，用 WebP 或 JPEG 壓縮，重點是主體清楚、光線一致。
• 後台或軟體截圖：用電腦截取後，裁掉瀏覽器邊框與不相關的區域，只保留讀者需要看的部分；文字多的截圖寧可裁小範圍，也不要整個畫面縮小。
• 流程圖與圖表：線條與小字最怕模糊，寬度可以取 1,600 像素上限；如果圖上字太小，應該重新排版成較大的字，而不是放大圖片。
• 含個資的畫面：客戶名稱、電話、金額與後台網址，上傳前先遮蔽或裁掉。

圖文交錯與比較圖：左右兩張要同一比例

圖文交錯是一段文字搭配一張圖、左右輪流排列的版面，常用來介紹服務項目。這類版面最常見的問題是每張圖的比例都不一樣，有的是橫的、有的是直的，排起來高低不齊。建議整組都使用同一比例，例如 4:3 或 3:2，先決定比例，再把每張圖裁成這個比例。比較圖用來呈現改造前後或方案差異，兩張圖更必須同尺寸、同角度，差異才看得出來。

圖片牆與作品集：統一尺寸比追求大圖重要

圖片牆一次會出現很多張圖片，每張的顯示寬度都不大，但數量多，檔案加起來很可觀。這時與其每張都準備 1,920 像素，不如統一輸出成 800 像素左右的寬度、同一比例，版面整齊、載入也快。需要讓訪客看大圖時，再另外連到作品或案例頁，在那裡放高解析度版本。

合作夥伴或客戶標誌放在圖片牆時，建議把每個標誌放在同尺寸的透明背景畫布上，並讓標誌在畫布中的大小看起來接近，否則有的標誌會顯得特別大或特別小。使用他人標誌與作品照片前，也要先確認已取得對方同意，素材授權的整理方式可以參考 架站前要準備哪些品牌素材。

文章預覽圖與分享預覽圖：不要搞混的兩張圖

寫文章時常會遇到兩種「縮圖」，它們出現的地方不同，規格也不同。第一種是文章列表上的預覽圖：當頁面用區塊列出多篇文章時，每篇文章卡片上方的那張小圖。第二種是分享預覽圖：把網址貼到 Facebook、LINE 等社群時，連結下方自動出現的大圖。

在 Sharing AI 的「新增文章」畫面，「基本設定」分頁有「預覽圖」欄位，說明寫著圖片檔案不可超過 5 MB、建議寬度最佳為 800 像素，並註明預覽圖僅在多篇文章時使用。旁邊的「預覽圖比例」可以選橫式（4:3）、直式（3:4）、方形（1:1）或自訂比例。

同一個文章列表中的預覽圖，比例要一致，卡片才會排得整齊。實務上可以先決定整個網站的文章預覽圖統一用 4:3，之後每篇文章都輸出成 800×600 像素；若選了自訂比例，也要把比例記在網站的圖片規格表裡，避免不同人上稿時各用各的。

分享預覽圖則是另一回事。它來自頁面或文章的精選圖片與 OG 標籤，常見做法是準備 1200×630 像素左右的橫式圖，並在分享前用社群平台的工具更新快取。這部分的原理與設定步驟，已經完整整理在 網站和社群怎麼串？聯絡按鈕、貼文嵌入與分享預覽圖設定，這裡不重複說明。

標誌與網站小圖示：小尺寸要更講究

標誌與網站小圖示（favicon）顯示得很小，但尺寸準備不好會非常明顯：邊緣鋸齒、線條糊掉，或在深色選單上幾乎看不見。標誌建議保留向量原始檔，網站上使用時再輸出透明背景的 PNG，或直接使用 SVG；選單上的標誌高度通常不大，輸出寬度只要能應付高解析度螢幕即可，不必上傳數千像素的大圖。

網站小圖示的規格，Google 搜尋中心要求使用正方形，並建議大於 48×48 像素，Sharing AI 的網站基本設定教學也建議使用 48 的倍數（例如 192 像素）。標誌要準備哪些版本、小圖示怎麼從純圖形版製作，架站前要準備哪些品牌素材已經有一份完整清單，可以直接照著準備。

圖片格式怎麼選：JPEG、PNG、WebP 與 SVG

格式決定了同樣的畫質需要多少檔案大小。根據 Google 搜尋中心的圖片 SEO 最佳做法，Google 搜尋支援 BMP、GIF、JPEG、PNG、WebP、SVG 和 AVIF 格式的圖片，並建議檔名的副檔名與實際格式相符。也就是說，選格式主要考慮的是畫質與速度，而不是「哪一種格式搜尋引擎才看得懂」。

在 Google 的 WebP 官方說明中，WebP 無損圖片比 PNG 小約 26%，有損圖片在同等畫質下比 JPEG 小約 25～34%，而且支援透明背景。Sharing AI 平台會把上傳的圖片自動轉成 WebP 格式，所以在這個平台上，你上傳 JPEG 或 PNG 都可以，系統會處理格式轉換。

但要特別注意：轉成 WebP 不等於縮小尺寸。一張 6,000 像素寬的相機原圖，轉成 WebP 之後仍然是 6,000 像素寬，檔案依然可能好幾 MB。格式轉換只能在「同樣的像素」下省一些容量，真正大幅降低檔案大小的，是上傳前把像素縮到需要的寬度。

上傳前怎麼處理？五個步驟把圖片縮小又不失真

不需要專業修圖軟體，作業系統內建的看圖工具、常見的線上圖片壓縮工具，或設計工具的「匯出」功能，都能完成以下步驟。重點是順序：先裁比例、再縮尺寸、最後壓縮，順序顛倒容易讓畫質損失更多。

1. 裁切比例：依版位決定比例（例如主視覺桌機 3:1、文章預覽圖 4:3），先把圖片裁成這個比例，並確認主體與文字落在安全區內。
2. 縮小尺寸：把寬度縮到前面估算的準備寬度，例如主視覺 1,920 像素、內文圖 1,200～1,600 像素、預覽圖 800 像素；原圖比目標小時不要硬放大。
3. 匯出與壓縮：照片用 JPEG 或 WebP，品質大約設在 75～85 之間；截圖與標誌用 PNG。匯出後用原尺寸看一次，確認沒有明顯的色塊或模糊。
4. 重新命名：用有意義的英文單字與連字號命名，例如 kitchen-renovation-before.webp，而不是 IMG_0423.jpg，方便自己管理，也有助搜尋引擎理解。
5. 檢查結果：看一下最後的像素尺寸與檔案大小是否符合規格，同一組圖片的尺寸是否一致，再上傳到網站。

第三步的品質數值是常見的起點，不是固定答案。每張照片的內容不同，壓縮後的效果也不同；最可靠的判斷方式，是用實際顯示的大小比較壓縮前後，看不出差異就可以再往下壓一點，看得出色塊或邊緣糊掉就往回調。

原始檔另外保存

縮小與壓縮後的圖片是「網站用版本」，原始檔要另外保存在公司的雲端資料夾。之後如果改版需要不同比例，或要印刷、做廣告素材，都要從原始檔重新輸出；從網站上下載已壓縮的圖片再加工，畫質只會越來越差。建議資料夾分成「原始檔」與「網站用」兩層，網站用的檔名與上傳到網站的名稱一致，日後找圖會輕鬆很多。

檔案大小要壓到多小？上限與目標不一樣

Sharing AI 後台在頁面圖庫的上傳視窗、輪播看板與文章預覽圖的欄位說明中，都寫著檔案大小不可超過 5 MB。這是平台允許上傳的上限，不是建議值。一張 4 MB 的主視覺雖然傳得上去，對手機訪客來說仍然很重，特別是在行動網路下。

比較實用的做法，是替網站訂一組自己的目標值，例如主視覺盡量控制在數百 KB 以內、內文圖與卡片圖再更小一些。這些數字沒有官方標準，要依圖片內容調整：細節多的照片本來就比較大，純色背景的圖可以壓得很小。判斷是否太大，最直接的方法是用 PageSpeed Insights 檢查，看報告是否列出「適當調整圖片大小」或「LCP 元素」相關的建議。

在 Sharing AI 頁面圖庫管理圖片

Sharing AI 後台左側選單的「頁面圖庫」，是整個網站上傳過的圖片集中處，畫面標題寫著「管理網站的媒體資源」。上方有搜尋框、「標籤篩選」與「批次選取」，第一格是「新增圖片」；點開後的上傳視窗可以點擊或把檔案拖曳進去，下方註明檔案大小不可超過 5 MB。

圖庫中的每張圖片下方，都會顯示像素尺寸與檔案大小，例如「1600 × 830」「70.7 KB」。上傳之後回到圖庫看這兩個數字，是最快的驗收方式：像素是否符合規格、檔案是否在目標範圍內，一眼就能確認；發現特別大的檔案，就重新處理後替換。

• 貼標籤：每張圖片都可以「貼標籤」，建議依頁面或用途分類，例如「首頁輪播」「服務頁」「文章預覽圖」，之後用「標籤篩選」快速找到同一組圖片。
• 批次選取：改版後不再使用的舊圖，可以用「批次選取」一次整理，但刪除前要先確認沒有頁面還在使用。
• 搜尋：圖片名稱寫得清楚，搜尋才找得到，這也是上傳前要重新命名的原因之一。

平台會把上傳的圖片自動轉成 WebP，所以圖庫裡看到的檔案大小，就是訪客實際要下載的大小。後台各功能的入口與操作順序，可以回到 Sharing AI 架站平台教學主題頁中「表單、同步區塊與頁面圖庫」一節對照。

圖片會不會拖慢網站？LCP、版面跳動與延遲載入

圖片通常是網頁中最大的資源。Google 的核心網頁指標裡，最大內容繪製（LCP）衡量的是畫面中最大的圖片或文字區塊多快出現，而在多數企業網站上，這個最大元素就是首屏的主視覺。各項指標的門檻與判讀方式，在 PageSpeed Insights 怎麼看已經有完整說明；這裡只整理和圖片尺寸直接相關的三件事。

一、主視覺的檔案大小直接影響 LCP

主視覺越大，下載越久，LCP 就越晚。把主視覺從數 MB 縮到數百 KB，通常是改善首頁速度最直接的一步，也是本文前面所有步驟的目的。

二、首屏圖片不要延遲載入

延遲載入（lazy loading）會讓圖片等到快捲動到時才下載，對頁面下方的圖片很有幫助，但不適合首屏。web.dev 的 LCP 最佳化指南明確提醒：絕對不要對 LCP 圖片使用延遲載入，否則會造成不必要的載入延遲。使用自由設計自行撰寫 HTML 時，首屏主視覺不要加上 loading="lazy"；使用平台區塊時，則由平台處理。

三、預留圖片的位置，避免版面跳動

如果瀏覽器在圖片下載完成前不知道它有多高，就會先把下面的內容往上排，等圖片出現再把內容往下推，造成版面跳動（CLS）。web.dev 建議一律在圖片上標示寬度與高度屬性，或用 CSS 的 aspect-ratio 預留空間。對於使用平台區塊的人來說，能做的是讓同一組圖片保持相同尺寸，例如輪播的每一張都一樣大，切換時高度就不會改變。

網站圖片最常見的八個錯誤

下面這些錯誤，在改版或新網站上線時特別常見。多數只要在上傳前多一個步驟就能避免，事後修正反而要一頁一頁找。

其中最值得優先處理的是第一項。如果網站已經上線，可以先打開頁面圖庫，依檔案大小找出最大的幾張圖，從首頁主視覺開始重新處理，通常就能看到明顯的速度改善。

一張可以存起來的網站圖片規格表

把前面的內容整理成一張規格表，建議存成公司內部文件，交給負責上稿或外包設計的人。表中標示「後台建議」的項目來自 Sharing AI 後台欄位說明，其他項目是依估算方法整理的參考值，可以依你的版型調整。

上傳前最後檢查

• 每張圖都知道會放在哪個版位、顯示多寬，並依「顯示寬度 × 2」或後台建議準備像素。
• 比例符合版位，主體與文字落在安全區內，同一組圖片尺寸一致。
• 主視覺另外準備手機版，標語與按鈕用區塊的文字欄位呈現。
• 已縮小尺寸並壓縮，檔案遠低於 5 MB 上限，也符合網站自訂的目標值。
• 檔名有意義，截圖中的個資已遮蔽，使用的素材都有授權。
• 上傳後在頁面圖庫確認像素與檔案大小，並用手機實際打開頁面看一次。

下一步：從首頁主視覺開始檢查

整篇濃縮成三件事：第一，圖片的像素看顯示寬度、比例看版位、檔案大小看速度，三者分開判斷；第二，主視覺依後台建議分別準備桌機 1920×640 與手機 768×768 兩張，同一組圖片尺寸一致；第三，上傳前一定先裁比例、縮尺寸、再壓縮，不要把轉成 WebP 當成壓縮。

如果不知道從哪裡開始，就先打開首頁，用手機與電腦各看一次主視覺，再到頁面圖庫找出檔案最大的幾張圖重新處理。圖片準備好之後，上線前的其他檢查項目可以對照 用 Sharing AI 架站，上線前要檢查什麼；想了解平台的功能與方案，可以從 Sharing AI 架站平台開始。若希望由專業團隊協助規劃版面與視覺素材，也歡迎直接與我們聯絡。