將圖片的四個角截成圓角，意思就是把四個角剪裁成平滑的弧形，並讓弧線外圍的區域變成透明，讓輸出檔案的寬度和高度與來源圖片相同，但四個角變成圓滑且可透視的弧形。每個弧形的大小由以像素為單位的半徑決定，而初學者最簡單的設定方式，就是用圖片較短邊的百分比來設定，這樣不論圖片是寬的、高的或正方形，結果都能保持一致。相同尺寸的 PNG 是唯一合理的輸出格式，因為透明的角落必須有地方儲存，而 JPEG 完全無法儲存透明度。整個操作完全在瀏覽器型的工具中完成——解碼檔案、在圓角矩形裁剪路徑內繪製圖片、編碼成 PNG，然後下載——整個流程都在你的電腦上進行，不會上傳到遠端伺服器。本指南將帶領第一次使用的使用者了解開始前要檢查的事項、如何為自己的圖片挑選看起來合適的半徑，以及如何使用「圓角圖片」工具產生一個乾淨、可直接使用的 PNG。
圖片上的「圓角」到底是什麼意思
在你點任何按鈕之前，先想像一下你的照片會發生什麼事。矩形有四個銳利的 90 度角，圓角矩形則是把每個銳角替換成一段平滑彎進下一條邊的四分之一圓弧。這個弧的大小就是圓角半徑:小半徑會讓照片看起來幾乎還是方形，大半徑則會把圓角往每條邊的中間推進，直到形狀接近膠囊形或圓形。
對圖片來說，「將四個角變圓」幾乎都代表把四個銳角變成透明，而不是把它們塗成白色或黑色。透明的角落可以讓圖片放在任何背景上——彩色頁面、卡片、社群媒體模板——不會讓矩形在背景後方露出來。如果你想要的是在圓角圖片後方加上純色背景，典型做法是先輸出成透明 PNG 來圓角，然後在第二步加上純色背景。
為什麼最後輸出的是 PNG
這個工具永遠會下載 PNG，即使你一開始上傳的是 JPG。原因內建在圖片格式的運作方式中:PNG 帶有 alpha 通道，也就是逐像素記錄「這個像素是透明的」的資料。JPEG 沒有 alpha 通道，所以它沒有地方可以儲存你剛剛製作的四個透明角落。
第二個原因是，原始的 JPG 本身其實沒有任何透明度需要保留——四個外角原本就是某個顏色的不透明像素。工具把你的 JPG 畫在一張全新的透明畫布上，這會強制重新編碼整張圖。即使圖片看起來一模一樣，這個重新編碼可能會讓檔案比原始 JPG 還大，因為 PNG 使用無損壓縮，而 JPG 使用有損壓縮。下載的檔案會重新命名，以 -rounded-corners.png 結尾，這樣光看檔名就能清楚知道新格式與用途。
如果你還想要更小的網頁用檔案，可以在之後把這個 PNG 送到瀏覽器型圖片壓縮工具，或是轉成更精簡的格式，前提是網站接受該格式。
開始之前:在你的檔案上要檢查的事項
第一次使用時，如果在開啟工具之前先確認檔案的三件事，整個流程會更順暢。
第一個檢查項目是格式。這個工具接受 JPG、PNG 和 WebP。如果你的照片是其他格式——iPhone 的 HEIC、BMP、TIFF、GIF、AVIF——請先轉成這三種接受的格式之一，否則檔案選擇器會顯示錯誤訊息並拒絕讀取。
第二個檢查項目是大小。檔案本身不能超過 25 MiB，解碼後的圖片每邊必須在 20,000 像素以內，總像素數必須等於或小於 4000 萬像素。現在的手機照片通常都在這些限制範圍內;很大的掃描圖或拼接的全景照片有時會超過。
第三個檢查項目是你的來源檔案原本就有什麼樣的透明度。JPG 沒有透明度，所以工具產生的每個透明角落都是新畫出來的。PNG 或 WebP 可能原本就在奇怪的位置帶有透明像素——柔邊、剪裁過的區塊、被移除的背景。這些既有的透明像素在裁剪形狀內會保持透明;工具不會自動幫你填滿。輸出畫布的寬度和高度也會與來源完全相同，所以檔案的四個角仍然在檔案的四個角上。
如何將圖片的四個角變圓
不論你處理的是大頭貼、產品縮圖還是橫幅，操作流程都一樣。
- 在你的瀏覽器分頁中開啟圓角圖片工具。
- 使用檔案選擇器從電腦中挑選 JPG、PNG 或 WebP 檔案。工具會在本機讀取檔案，並回報它讀到的尺寸。
- 把半徑控制項從 1% 調整到 50%。這個數字是圖片較短邊的百分比，不是你要手動輸入的像素值。
- 選擇「Round corners」(圓角化)。瀏覽器會解碼檔案，將它畫到一張以圓角矩形路徑裁切的透明畫布上，並顯示同尺寸的 PNG 預覽。
- 檢查預覽。四個角應該是可透視的，圖片其他部分看起來應該與來源完全一樣。
- 下載 PNG。檔案儲存時，名稱會加上 -rounded-corners，這樣你可以一眼就與原檔區分。
如果想試更柔和或更硬的圓角，只要更改半徑百分比，然後再次選擇「Round corners」。新匯出的檔案會取代前一次，你不需要重新挑選檔案。更換檔案本身也會讓前一次的結果失效，這能讓螢幕上的預覽與最近一次下載保持同步。
挑選看起來合適的半徑
半徑控制項的範圍是圖片較短邊的 1% 到 50%，百分比會四捨五入到整數輸出像素。這讓計算結果可以預期。
使用工具說明的規則來試算:
- 來源圖片:寬 400 px，高 200 px(橫向照片)。
- 較短邊:200 px。
- 選擇的百分比:25%。
- 像素半徑:200 × (25 ÷ 100) = 50 px。
所以在一張 400 × 200 的圖片上設定 25%，會產生 50 像素的圓角半徑。同樣的 25% 套在一張直向圖片上——例如 800 × 1200——會以寬度作為較短邊，得到 200 px。在正方形圖片上，兩邊相等，所以半徑就直接落在那個數字上。
| 來源形狀 | 較短邊是…… | 半徑的計算方式 |
|---|---|---|
| 橫向(寬大於高) | 高度 | 高度 × (百分比 ÷ 100) |
| 直向(高大於寬) | 寬度 | 寬度 × (百分比 ÷ 100) |
| 正方形(兩邊相等) | 兩邊 | 邊長 × (百分比 ÷ 100) |
根據經驗法則，1% 到 5% 會給出一種「幾乎看不出來」的柔化效果，大部分觀看者會認為仍是「銳利的矩形」。15% 到 25% 看起來明顯具有現代感，又不會太過圓潤。35% 到 50% 則會推向膠囊或藥丸形，通常只適合原本就接近正方形的圖片。預覽下方的結果列會顯示與來源相符的尺寸、計算出來的整數像素半徑、輸出格式，以及大約的檔案大小，讓你能確認圖片並沒有被悄悄調整大小。
這個工具不做的事
了解限制一樣重要，因為它能告訴你什麼時候該改用其他工具。圓角圖片工具只做一件事——裁剪出一張同尺寸、四個角共用同一個半徑的圓角矩形——而且它會刻意只做到這裡。
- 它不會產生圓形。如果你想要的是完整的圓形裁切，請改用為該任務設計的圓形裁切入門教學。
- 它無法為每個角設定不同的半徑。四個角共用同一個值。
- 它不會調整大小、拉伸、裁切中央區域，或加上邊框。輸出尺寸永遠與來源相同。
- 它不會在透明角落後方塗上顏色。角落就是透明的，沒有例外。
- 它不會保留 EXIF 中繼資料。下載的 PNG 是從解碼後的像素重新建立的，不帶任何相機資訊。
- 它無法批次處理。它一次只處理一張圖;每個檔案都要重複同樣的步驟。
如果你需要的是可之後編輯的分層檔案，或遮罩、陰影、各角不同半徑，還是應該在桌機上使用完整的影像編輯軟體。
第一次嘗試的疑難排解
有幾個問題相當常見，值得在第一次使用時就先認識。
「四個角是銳角的，沒有變圓。」半徑控制項可能停留在 1%，這是最低值，在一般觀看尺寸下最多只能產生一點點柔化效果。請把它調到至少 10%，然後重新匯出。
「下載的檔案比原始 JPG 還大。」這是預期中的情況。PNG 使用無損壓縮，而 JPG 使用有損壓縮，而且四個透明角落是新加入的資料。如果檔案大小比像素級完美畫質更重要，就把 PNG 送去壓縮，或之後再轉檔。
「預覽看起來沒問題，但下載的圖片看起來不一樣。」螢幕上的預覽只是為了顯示而縮放過的;實際下載的檔案是以全新畫布、以來源的原始尺寸重新算繪而成。下載的檔案至少應該跟預覽一樣清晰。
「選擇器拒絕了我的檔案。」可能是格式不是 JPG、PNG 或 WebP，或檔案是空的，或超過 25 MiB 的限制。請先重新匯出或另存成三種支援格式之一再試一次。
「輸出圖片的尺寸和來源一樣。」這是設計上的預期行為。輸出檔案的寬度和高度永遠會與來源相符，讓你可以直接放回版面，不必重新計算位置。
現在你已經知道背後的運作原理、檔案要檢查的事項、如何解讀半徑百分比，以及這個工具的適用範圍。請開啟圓角圖片工具，挑選你的第一張圖，試試 20% 的半徑——這是多數初學者試過幾次匯出後會選定的數值。
想進一步了解，請參考EXIF 線上編輯器入門:淺顯易懂的開始。