網頁切圖怎麼做？先分清楚素材裁切與網頁切版
網頁切圖是將設計稿中的照片、圖示、裝飾與背景等素材，依照網頁實際需要的範圍、尺寸與格式輸出。正確流程是先確認版面用途，再裁切圖片、設定輸出尺寸、壓縮檔案，最後放進網頁檢查顯示效果，而不是把整張設計稿切成小圖後直接拼回去。
「切圖」與「切版」也不完全相同。切圖處理的是影像素材；切版則主要透過 HTML 建立結構、CSS 控制排版，並視需求使用 JavaScript 加入互動。完整的網站還可能需要後端程式與資料庫，並非圖片輸出完成就能上線。
早期 Fireworks、Dreamweaver 的工作流程，常利用切片工具分割版型，再輸出圖片及相關頁面。現代網站需要適應手機、平板與桌機，通常只匯出必要素材，文字、按鈕與版面則交由網頁技術呈現，更方便維護及調整。
網頁切圖前，先確認哪些內容需要輸出
照片與複雜視覺需要圖片，文字與排版不必全部圖片化
商品照片、人物影像、插畫與複雜紋理，適合輸出為圖片。標題、段落、按鈕文字及一般色塊，則應優先保留為 HTML 與 CSS。
把整個區塊做成圖片，雖然容易保留設計外觀，但手機縮小後文字可能難以閱讀，也不利於內容更新、搜尋引擎理解與輔助工具使用。圖片上的重要說明，應同時在頁面提供可讀取的文字。
Logo、簡單圖示若有向量原稿，可考慮使用 SVG；照片則依畫質、透明需求與網站環境，選擇 JPEG、WebP 或其他適合的格式。
先訂顯示尺寸，再決定裁切範圍
切圖前應確認圖片放在哪個區塊、容器比例為何，以及手機版是否需要另一種構圖。
例如，商品卡片預計以正方形呈現，就先確立 1:1 比例；首頁橫幅則要考慮人物與文字的相對位置。如果桌機版主體靠右、左側預留標題空間，直接把同一張圖置中裁成直式，可能會切掉人物，因此需要額外製作手機版本。
裁切照片比例與指定大小，有什麼不同？
裁切照片比例：決定圖片的形狀
比例只描述寬度與高度的關係，不代表實際像素。1200 × 800 與 600 × 400 都是 3:2，但能承受的顯示尺寸不同。
常見的 1:1 適合整齊排列的商品卡片，4:3、3:2 常用於文章照片，16:9 適合橫向視覺；這些是實務選項，不是必須遵守的規格，仍應以版型設計為準。
裁切時可以先鎖定比例，再移動裁切框，保留人物表情、商品輪廓及必要的環境資訊，避免只對準畫面中心。
裁切照片指定大小：同時處理構圖與像素
如果網站要求 1200 × 628 像素，只有設定相同比例還不夠，輸出時也要確認實際尺寸。
「裁切」是移除畫面範圍；「縮放」是改變像素尺寸。部分工具輸入寬高後，只會建立對應大小的裁切框，不一定自動縮放，因此下載後仍應檢查檔案資訊。
假設原圖為 2400 × 1600 像素，要輸出 1200 × 628，可以先裁出相同比例的範圍，再縮小至目標尺寸。不要直接解除比例限制，把整張照片壓扁或拉長。
自由裁剪照片：適合探索構圖，不宜忽略版型限制
自由裁剪照片可以不受固定比例限制，適合去除多餘邊緣、調整主體位置。但若網站卡片尺寸固定，任意裁切容易讓圖片高低不一，影響排列。
較穩定的方式是先自由調整構圖，確認主體後再套用最終比例，兼顧視覺效果與版面一致性。
線上切圖、圖片裁切軟體與 App 怎麼選？
圖片裁切工具比較表
| 工具類型 | 適合情境 | 主要優點 | 選用時要確認 |
|---|---|---|---|
| 線上切圖工具 | 少量照片、臨時修改 | 不必安裝，操作方便 | 上傳限制、下載尺寸、浮水印與隱私政策 |
| 桌面圖片裁切軟體 | 精準修圖、複雜素材 | 便於處理圖層、遮色片與輸出設定 | 是否支援所需格式及批次流程 |
| 圖片裁切 app | 手機拍攝後快速編修 | 可直接從相簿選取照片 | 匯出是否壓縮、能否設定像素尺寸 |
| 批次影像工具 | 大量商品圖、文章縮圖 | 可統一尺寸、命名與格式 | 能否調整個別圖片的裁切焦點 |
免費裁切圖片，先確認下載條件
MyEdit、Fotor、Adobe Express 等線上服務可作為裁切工具的選項；涉及圖層、精細選取與遮色片時，則可考慮 Photoshop、GIMP 等圖片裁切軟體。
免費裁切圖片不一定代表所有輸出功能都免費。操作前先看是否需要登入、原尺寸下載是否受限，以及透明背景是否屬於額外功能，避免完成編輯後才發現無法取得需要的檔案。
涉及客戶未公開設計、證件或其他敏感影像時，宜優先使用可在本機處理的工具。線上服務是否保存上傳圖片，則應查看其隱私與檔案處理說明。
網頁切圖實作：從原圖到可交付素材
第一步：保留原檔並確認使用範圍
另存工作副本，不要覆蓋原始照片或設計稿。先確認素材的使用權，再記錄圖片用途、目標比例、輸出大小與是否需要透明背景。
設計稿若包含陰影、光暈或超出物件邊界的效果，裁切範圍要一併納入，避免輸出後邊緣被截斷。
第二步：選定比例並調整構圖
上傳或開啟圖片後，先選固定比例或自訂模式，再拖曳裁切範圍。人像應檢查頭部、手部及關節附近的切線；商品則要保留足夠邊界，避免畫面顯得擁擠。
接著設定輸出像素。若圖片預計顯示為 600 × 400 CSS 像素，可視清晰度需求提供 1200 × 800 的版本，但也要搭配壓縮與響應式圖片，避免所有裝置都下載過大的檔案。
第三步：選擇格式並控制檔案大小
照片可評估 JPEG 或 WebP；需要透明背景的素材可評估 PNG 或支援透明度的 WebP。簡單向量圖形若有原始向量資料，通常適合輸出 SVG。
不必沿用舊教學，把所有圖片一律存成 PNG-24。照片使用 PNG 可能產生較大的檔案，應在實際顯示尺寸下比較畫質與容量，選擇足夠清楚的版本。
第四步：命名、交付並檢查網頁效果
檔名應反映用途，例如 product-bag-front.webp，比沒有意義的流水號容易管理。交付時同步標示建議顯示比例、主體位置，以及是否另有手機版素材。
圖片放入網站後，還要確認不同螢幕寬度下是否失焦、變形或裁掉主體。HTML 的圖片寬高資訊可協助瀏覽器預留空間，減少載入時的版面位移；替代文字則應依圖片功能撰寫，裝飾圖片不必硬塞描述。
多張照片裁切，如何兼顧效率與一致性？
批次套用尺寸之前，先依構圖分組
多張照片裁切適合用於商品清單、文章縮圖與作品集，但「批次調整大小」不等於「批次裁切」。前者可能只縮小整張圖片，後者才會移除部分畫面，統一成指定比例。
處理前可依橫式、直式、主體靠左或靠右分組，再設定各組的裁切位置。若所有圖片都採用中央裁切，人物臉部或商品細節可能被截掉。
先試做少量，再執行整批輸出
先挑幾張構圖差異大的照片測試，確認比例、留白與輸出品質後，再處理整批檔案。完成後使用縮圖總覽檢查整體一致性，並逐張查看主體是否完整。
批次流程可以統一尺寸與格式，但不能取代構圖判斷；需要調整焦點的圖片，仍應個別修正。
不規則裁切線上怎麼做？先區分去背與顯示裁切
不規則裁切照片，通常需要選取範圍或遮色片
一般裁切工具主要保留矩形範圍。若要沿著人物、商品或多邊形輪廓處理，就需要套索、路徑、去背或遮色片功能。
不規則裁切照片後，檔案畫布通常仍是矩形，只是輪廓以外的區域變成透明。若存成不支援透明度的 JPEG，透明處就會被背景色填滿。
選擇不規則裁切線上工具時，應確認能否修整邊緣、保留透明背景，以及下載所需解析度。頭髮、玻璃與半透明材質的邊緣，尤其需要放大檢查。
只想在網頁顯示圓形，不一定要修改原圖
圓形頭像可以透過 CSS 的 border-radius 呈現，多邊形效果則可視需求使用 clip-path。這些做法改變的是顯示範圍，不會直接刪除原始圖片像素。
固定比例的照片框可搭配 object-fit: cover 填滿，再用 object-position 調整焦點；若要完整保留整張照片，可考慮 contain，但容器內可能出現留白。
結論：網頁切圖應以版面需求與閱讀體驗為核心
網頁切圖的重點不是切得越細越好，而是讓素材符合實際版型。先區分需要輸出的影像與可用程式呈現的內容，再依序處理比例、構圖、像素、格式及壓縮，最後回到網頁檢查桌機與手機效果。
少量修改可使用線上工具，精細素材適合圖層與遮色片工具，大量照片則採用批次流程搭配人工檢查。把規格訂清楚，往往比反覆裁切更能節省時間。
常見問題（FAQ）
1. 網頁切圖一定需要 PSD 檔嗎？
不一定。重點是能否取得足夠解析度、可合法使用的素材，以及清楚的版面規格。可編輯的設計原檔有助於分離物件，但實際交付格式應依團隊工具決定。
2. 手機照片可以直接拿來做首頁橫幅嗎？
可以，但要看原圖尺寸與構圖。直式照片裁成寬橫幅時會失去大量上下畫面；若主體太靠近邊緣，可能需要改用其他照片或重新安排版面。
3. 裁切完成後圖片變模糊，怎麼改善？
先檢查裁切後剩餘像素是否足夠，以及網頁是否把圖片放大。回到原圖重新輸出，並避免反覆以有損格式儲存，通常比放大低解析度成品更有效。
4. 圖片上有文字，應該一起裁掉嗎？
如果文字是後加的標題或促銷訊息，最好取得不含文字的版本，再以 HTML 呈現。若文字本來就是商品包裝的一部分，則依畫面用途保留，並在頁面補充必要資訊。
5. 桌機與手機一定要準備兩張圖片嗎？
不一定。如果同一張圖在不同比例下都能保留主體，可以共用素材。只有當構圖差異明顯、重要內容容易被切掉時，才需要另製手機版，並透過響應式圖片機制載入。
6. 網頁看起來已經裁切，為什麼下載圖片仍是完整的？
因為網站可能只用 CSS 隱藏超出容器的部分，原始檔案並未修改。若希望下載後也是裁切結果，必須先在影像工具中完成實際裁切，再輸出新的檔案。