客人打開你的網站，第一眼看到的是照片。同一個商品，模糊、歪斜、背景雜亂的照片，跟清楚、明亮、風格一致的照片，給人的信任感差很多。好消息是，這件事不需要專業相機：現在的 iPhone 拍出來的像素已經足夠，真正影響品牌感的是「比例選對」和「拍法一致」。這篇把網站照片要多大、用什麼比例、怎麼拍、上傳前要檢查什麼一次說清楚。
先說結論
| 照片用途 | 比例 | 建議像素 | 建議 |
|---|---|---|---|
| 首頁大圖 | 直式 4:5 | 至少 1200 × 1500 px | 放最能代表你的一張：作品、空間或你工作的樣子。主角放在畫面中間 |
| 介紹、作品集 | 橫式 3:2 | 至少 1200 × 800 px | 拍環境、過程、作品細節，讓客人認識你 |
| 商品照 | 橫式 5:4～3:2 | 寬至少 1200 px | 同一間店的商品，背景、光線、角度盡量一致 |
| 分享預覽圖 | 約 1.91:1 | 1200 × 630 px | 分享到 LINE、Facebook 時顯示。放店名或主打商品，縮小後也看得清楚 |
| Logo | 橫式、去背 PNG | 高至少 100 px | 網站上通常顯示得很小，線條和字不要太細 |
像素方面，手機全寬的照片寬度約 1,200 px 就夠清楚。用 iPhone 直接拍的原圖遠遠超過這個大小，不需要另外買相機。
像素：網站照片要多大才清楚
手機螢幕的像素很密。以 iPhone 17 Pro 為例，螢幕寬 1,206 px，但網頁是用「點」來排版，一個點由 3 × 3 個像素組成，所以網頁寬度大約是 402 點。照片要在這樣的螢幕上看起來銳利，寬度大約要 1,200 px；比這小很多的照片，放大到全寬就會糊。
反過來，照片也不是越大越好。一張 4,000 多 px 寬的原圖，檔案動輒好幾 MB，用手機網路開會很慢。Google 用「最大內容繪製」（LCP）衡量網頁的主要內容多快出現，2.5 秒內算好，首頁大圖太大常常就是拖慢的原因。
比例：直式、橫式、正方形各放哪裡
比例決定照片在網站上會被怎麼裁。放錯比例，主角可能被切掉一半。
- 直式（4:5）：手機一打開就佔滿畫面，適合首頁大圖。不過在電腦上，同一個位置常會顯示得比較扁，上下會被裁掉一些，所以主角不要貼著上下邊緣。
- 橫式（3:2、5:4）：適合介紹、作品集和商品照。橫式在手機和電腦上都比較好排版。
- 正方形（1:1）：適合細節圖、尺寸圖，或要跟 IG 貼文共用的照片。
iPhone 相機內建 4:3、1:1、16:9 三種比例，沒有 4:5。建議用預設的 4:3 拍，拍得寬一點、主角周圍留點空間，之後要裁成直式或橫式都不怕切到。照片 App 編輯時按「裁切」，可以選固定比例或自由調整。
如果同一批照片也要放 IG，IG 官方說明支援的比例從 1.91:1（橫）到 3:4（直），寬度最多 1080 px。網站和 IG 一起規劃，可以參考有 IG 還需要官網嗎？。
用 iPhone 拍出品牌感的五個做法
- 靠窗、用自然光：把商品放在窗邊，跟窗戶大約呈 90 度，光從側邊打過來，商品會比較立體。不要開閃光燈，也不要混著日光和室內燈，顏色會跑掉。陽光太強時，在窗上掛一塊白布讓光變柔。
- 背景乾淨、一致：白牆、木桌、亞麻布都很好用。重點是整間店用同一套背景，客人逛起來才像同一個品牌。
- 手機固定，轉商品不轉手機：用三腳架或疊書把手機固定好，每件商品都放在同一個位置、轉動商品拍不同角度。這樣每張照片的大小、角度都一致。
- 不要用手機變焦：數位變焦會讓畫質變差。靠近一點拍，或拍完再裁切。
- 同一套修圖風格：亮度、色溫調一次後，同一批照片都用一樣的設定，不要每張套不同濾鏡。
商品照之外，記得也拍幾張「有你在裡面」的照片：你工作的手、工作室一角、包裝的過程。這些照片放在首頁和介紹，最能讓客人記住你。
上傳前的檢查清單
- 主角清楚：縮成手機上的小圖時，還認得出是什麼嗎？
- 第一張最重要：商品的第一張照片通常就是列表上的封面，也是分享到 LINE 時的預覽圖，放最清楚、最好看的那張。
- 同一頁風格一致：把要放的照片排在一起看一次，背景、亮度有沒有差太多。
- 格式：iPhone 預設存成 HEIC，有些網站或電腦不支援。如果你用的工具傳不上去，到「設定 › 相機 › 格式」改成「最相容」，之後就會存成 JPEG。
- 圖片說明：如果你用的工具可以填圖片的替代文字（alt），寫一句描述畫面的話，例如「手工天然酵母吐司切面」。Google 圖片搜尋會參考這段文字，看不到圖片的讀者也能理解。
- 分享預覽圖：分享到 LINE、Facebook 時會顯示預覽圖。Facebook 官方建議至少 1200 × 630 px，LINE 沒有公布建議尺寸，用同一張就好。
口袋官網怎麼處理你的照片
口袋官網是在 iPhone 上建站的 App，照片從手機相簿選就能用，上傳時會幫你處理這些事：
- 自動裁切成對的比例：首頁輪播 4:5、關於我們和圖片區塊 3:2、商品描述圖 1:1、分享預覽圖 1200 × 630。選完照片會出現裁切畫面，可以移動、縮放調整主角位置。
- 商品照不裁切：保留原本的比例，不足的地方補白底，商品不會被切到。
- 自動縮圖、轉檔：直接選手機原圖就好，HEIC 會轉成網頁能用的格式，也會縮成適合網頁的大小。
- 移除拍攝位置：照片裡的 GPS 位置資訊會在上傳時移除，不會跟著照片公開。
數量上，首頁輪播和圖片區塊各最多 8 張，每個商品最多 6 張照片、5 張描述圖。電腦上的首頁大圖會顯示成 4:3，上下會裁掉一些，主角記得放在中間。第一次開店的完整流程，可以看用手機 10 分鐘開好網路商店。
常見問題
網站圖片尺寸要多大？
手機全寬的照片寬度約 1,200 px 就夠清楚，太大反而拖慢網頁。用 iPhone 拍的原圖遠大於這個尺寸，如果你用的平台會自動縮圖，直接上傳原圖就好。
網站首頁大圖用直的還是橫的？
手機上直式比較佔滿畫面，但電腦上同一個位置常會顯示得比較扁。用直式時，主角放在畫面中間、不要貼著上下邊緣，兩種裝置看都不會被切到。
商品照片用什麼比例比較好？
橫式 5:4 到 3:2 在手機和電腦上都比較能填滿版面。最重要的是同一間店的商品照比例、背景和角度一致，看起來才像同一個品牌。
iPhone 拍的 HEIC 照片可以直接上傳網站嗎？
看你用的工具。有些網站不支援 HEIC，可以到「設定 › 相機 › 格式」改成「最相容」，照片就會存成 JPEG。口袋官網會在上傳時自動轉檔，不用另外設定。
分享到 LINE 的預覽圖要多大？
LINE 會讀取網頁設定的預覽圖，但沒有公布建議尺寸。Facebook 官方建議至少 1200 × 630 px，做一張這個尺寸的圖，兩邊共用就好。
手機裡的照片，
就能做出好看的官網。
本文規格整理自 Apple、Google、Meta、Instagram 與 Shopify 的官方說明，查核日期為 2026 年 10 月 11 日；各平台規格可能隨時調整，實際以官方公告為準。文中提及的品牌名稱與商標屬各公司所有，口袋官網與上述公司無任何合作關係。
參考資料：Apple iPhone 相機比例、Apple 照片裁切、Apple HEIC 與 JPEG、Apple 相機格式設定、web.dev 最大內容繪製（LCP）、Google 圖片搜尋最佳做法、Meta 分享圖片規格、LINE 網址預覽說明、Instagram 照片尺寸說明、Shopify 商品攝影指南、Shopify 用手機拍商品照
