將風景照片上傳到 Instagram 帖子,將高大的手機照片上傳到 LinkedIn 連結圖像,或螢幕截圖到 X,平台會悄悄地決定人們看到它的哪一部分。它將圖像擬合到幾個固定形狀之一,並修剪任何不合適的東西,然後從中間向外修剪。如果主題位於中間,則有效。如果主題是靠近框架頂部的面孔、左側的產品或底部的標題,則平台會將其裁剪掉。
修復方法是自己裁剪影像,確定飼料所需的確切形狀,並選擇存活下來的部分。本指南涵蓋了主要平台顯示的尺寸和長寬比、作物的幾何形狀、如何選擇焦點、裁剪對品質和文件大小有何影響,以及如何避免引起人們注意的柔和、升級的結果。工作範例使用免費 社群媒體圖片裁剪器 在 Toolz 上,它完成了客戶端的整個工作。
TL;DR: 若要為社群媒體裁剪影像,請選擇平台和位置的目標寬高比(例如,Instagram 肖像貼文為 1080 x 1350,連結預覽為 1200 x 630,X 貼文圖片為 1600 x 900),採用適合照片內部形狀的最大區域,將其固定在重要的部分,然後將其縮放到精確的像素大小。 4032 x 3024 電話照片裁剪為 4:5 可保留其 60% 的面積;裁剪為 16:9 可保留 75%。這 社群媒體圖片裁剪器 在瀏覽器的畫布上執行此操作,具有九點焦點網格,免費,無需註冊,無需上傳。
社群媒體圖像裁剪器有什麼作用?
社群媒體圖像裁剪器將照片切割成平台顯示的長寬比,並將其縮放到該平台'像素大小,因此平台沒有任何東西可以裁剪。發生了兩個單獨的操作,這有助於將它們分開:
- 農作物。 選擇原件內部具有目標形狀的矩形。其外部的像素被丟棄。其內部的像素未受影響。
- 規模。 將矩形大小調整為目標尺寸,例如 1080 x 1350。這就是品質可以改變的地方,因為影像會被重新取樣。
通用圖像編輯器可以同時執行這兩種操作,但它會讓您找到比例、手動繪製盒子並記住輸出大小。專用的裁剪器知道尺寸,自動繪製最大的有效盒子,並讓您一鍵移動它。 Toolz 版本還會在下載之前告訴您裁剪成本:原始區域有多少倖存下來以及結果是否縮小或向上。
主要平台使用哪些影像尺寸?
每個網路都以一小部分縱橫比渲染饋送影像,並且任何其他內容都適合最接近的寬高比。該表列出了作物內建的 15 個目標尺寸,反映了每個平台目前顯示的內容,無需重新種植。平台會不時修改這些內容,因此將它們視為當前指南而不是永久規範。
| 平台 | 安置 | 像素大小 | 縱橫比 | 使用地點 |
|---|---|---|---|---|
| 方柱 | 1080 x 1080 | 1:1 | 經典的提要貼文 | |
| 肖像帖子 | 1080 x 1350 | 4:5 | 饋送允許的最高、大部分螢幕空間 | |
| 風景帖 | 1080 x 566 | 1.91:1 | 飼料接受的最寬範圍 | |
| 故事或捲軸 | 1080 x 1920 | 9:16 | 全螢幕;保持文字遠離頂部和底部 250 px | |
| 線程 | 方柱 | 1080 x 1080 | 1:1 | 在時間軸中顯示為未裁剪 |
| 線程 | 肖像帖子 | 1080 x 1350 | 4:5 | 最高的線程顯示,無需裁剪 |
| 藍天 | 饋送影像 | 1200 x 630 | 1.90:1 | 寬影像被拉向 1.91:1 |
| 藍天 | 方形影像 | 1080 x 1080 | 1:1 | 未裁剪 |
| X | 發布圖片 | 1600 x 900 | 16:9 | 全套顯示,無需點擊 |
| X | 總結卡 | 1200 x 628 | 1.91:1 | 大連結預覽卡 |
| 臉書 | 飼料帖 | 1200 x 630 | 1.90:1 | 還有 Open Graph 大小 |
| 領英 | 飼料帖 | 1200 x 627 | 1.91:1 | LinkedIn 來源標準 |
| 優柔寡斷 | 縮圖 | 1280 x 720 | 16:9 | 高清播放器的最小寬度為 1280 |
| 標準引腳 | 1000 x 1500 | 2:3 | 較高的銷釘排名較低 | |
| Open Graph | 連結預覽 | 1200 x 630 | 1.90:1 | 大多數網站和聊天應用程式都會呈現預設卡 |
有兩件事很突出。 "1.91:1"系列(1200 x 630、1200 x 628、1200 x 627、1080 x 566)是一種圓形略有不同的形狀,它是網路上幾乎每個連結預覽的形狀。它可以追溯到 Open Graph協定,這定義了 og:image 標籤網站用於提供預覽圖片。高格式有所不同:instagram 和 Threads 停在 4:5,Pinterest 停在 2:3,Stories 停在 9:16。一種作物並不能滿足所有這些需求。
如果您也設定網頁的預覽圖像,則 Open Graph 預覽工具 顯示 1200 x 630 影像在分享後會是什麼樣子。
裁剪矩形是如何計算的?
裁剪是適合原始影像內的目標形狀的最大矩形。如果影像比目標形狀寬,則裁剪保持整個高度並修剪側面。如果較高,則裁剪保持整個寬度並修剪頂部和底部。
以數字表示,對於寬度 W 和高度 H 的來源以及目標比率 R(寬度除以高度):
if W / H > R: crop width = H x R, crop height = H (trim the sides)
else: crop width = W, crop height = W / R (trim top and bottom)
工作範例 1:Instagram 肖像貼文的 4032 x 3024 電話照片。
- 來源比率:4032/3024 = 1.333。目標比率:1080/1350 = 0.8。
- 源更寬,因此作物保持 3024 px 的完整高度。
- 作物寬度:3024 x 0.8 = 2419.2 px。
- 保留面積:2419.2 /4032 = 0.60,因此 60% 的照片得以保留,40% 的照片從側面修剪。
- 然後作物規模從約 2419 x 3024 縮減至 1080 x 1350。
工作範例 2:X 貼文影像的相同照片。
- 目標比:1600/900 = 1.778。源比 1.333 更小,因此作物保持完整的 4032 px 寬度。
- 作物高度:4032 /1.778 = 2268 px。
- 保留面積:2268 /3024 = 0.75,因此 75% 存活,其中 756 px 從高度修剪。
工作範例 3:Pinterest 引腳的相同照片。
- 目標比率:1000/1500 = 0.667。作物寬度:3024 x 0.667 = 2016 px。
- 保留面積:2016 年/4032 = 50%。照片的一半消失了。
這些百分比是該工具報告的 "保留原件的 60%;,在提交之前值得一讀。保留一半框架的裁剪是一個構圖決策,而不是格式化步驟。
您如何選擇保留影像的哪一部分?
選擇固定主題的焦點,並記住它只對被修剪的軸很重要。作物'九點網格在每個軸上設定 0、0.5 或 1 的焦點,將作物水平固定在左邊緣、中心或右邊緣,垂直固定在頂部、中間或底部。
位置是這樣計算的,然後夾緊,這樣裁剪就不會從圖像上脫落:
crop x = focusX x W - cropWidth / 2 (clamped between 0 and W - cropWidth)
crop y = focusY x H - cropHeight / 2 (clamped between 0 and H - cropHeight)
在工作範例 1 中,僅修剪邊,因此只有水平選擇會改變任何內容:
| 錨柱 | 作物 x | 保留照片的欄位 |
|---|---|---|
| 左 | 0 | 0 至 2419 |
| 中心 | 806.4 | 806 至 3226 |
| 正確的 | 1612.8 | 1613 至 4032 |
頂部、中間和底部行為該作物提供相同的結果,因為完整高度已保留。當點擊似乎沒有任何作用時,這是一個有用的檢查:作物只能自由地朝一個方向移動。
工作範例 4:肖像電話照片作為 LinkedIn 影像。 裁剪為 1200 x 627(比例 1.914)的 3024 x 4032 照片可保持整個寬度,條帶 3024 /1.914 = 1580 px 高。即 1580/4032 = 照片的 39%。使用預設中心錨,條帶從 y = 1226 延伸到 y = 2806,在典型的頭肩肖像上,這是胸部,而不是臉部。點擊頂部中心會將條帶移動到 y = 0 到 1580 並保留頭部。這種情況是焦點網格存在的原因:居中是一個合理的預設值,對於大多數肖像來說,錯誤的答案變成了橫幅。
挑選錨點的一些經驗法則:
- 人物:頂排,因為臉通常位於框架的上三分之一。
- 烘烤成圖形的標題或標題:文字所在的行或列。
- 產品和偏離中心的主題:匹配的角落或側面。
- 對稱場景和居中標誌:將其留在中心。
裁剪會降低影像品質嗎?
僅裁剪不會降低質量,但縮放步驟可以。丟棄畫面外的像素會使剩餘像素保持原樣。調整到目標大小是結果可以改進或降低的地方。
縮小是安全的,並且通常會使照片看起來更清晰,因為每個輸出像素中平均有幾個來源像素。裁剪器使用畫布繪製'使用高平滑品質設定 drawImage 方法中定義 WHATWG HTML 畫布規格. 放大無法添加從未捕捉到的細節。輸出變大但不更清晰,邊緣看起來很柔軟。
工作範例 5:升級的螢幕截圖。 為 X 貼文影像裁剪的 800 x 600 螢幕截圖可保持完整的 800 px 寬度和 450 px 高條帶,佔面積的 75%。然後將 800 x 450 區域放大到 1600 x 900,每個方向的尺寸是其兩倍。該工具在預覽下如此說明:"升級 - 來源小於目標,因此看起來會很軟。"
快速測試是將裁切寬度與目標寬度進行比較。如果裁切比目標寬,影像就會縮小並且看起來不錯。如果它更窄,它就會放大。對於照片,手機相機幾乎總是有備用像素。螢幕截圖、舊圖像和從其他貼文中保存的圖片是常見的升級案例,唯一真正的修復是更大的來源。
您應該匯出 PNG、JPEG 或 WebP 嗎?
匯出照片的 JPEG、螢幕截圖、帶有硬邊的文字和圖形的 PNG,以及當您想要最小的檔案並知道目的地接受它時的 WebP。裁剪器預設為 PNG,因為它是無損的,並提供所有三個功能。
| 格式 | 壓縮 | 最好 | 小心 |
|---|---|---|---|
| 巴布亞紐幾內亞 | 無損,依規定 W3C PNG 標準 | 螢幕截圖、使用者介面、文字、標誌、透明度 | 照片的大文件 |
| JPEG | 有損,方法在 ITU-T T。81 | 照片 | 清晰的文字和線條周圍有光環;沒有透明度 |
| 網路P | 有損或無損,描述於 Google's WebP 文件 | 品質相似的最小文件 | 一些舊工具無法打開它 |
JPEG 和 WebP 匯出在畫布編碼器上使用 0.92 的品質設置,該設置足夠高,以至於在照片中很難看到壓縮偽影。下載的檔案以原始檔案加上預設命名,因此 team.jpg 裁剪為 Instagram 肖像帖子,JPEG 儲存為 team-ig-portrait.jpeg.
無論如何,大多數平台都會重新編碼您上傳的內容,因此照片的無損 PNG 不會像 PNG 發布後那樣保存下來。它主要增加上傳大小。為了更深入地選擇格式, 影像格式轉換器指南 在更多用例中比較它們。
逐步進行:使用工具裁剪影像
的 社群媒體上的圖像裁剪器 有四個步驟,預覽畫布與產生檔案的畫布相同,因此您批准的是下載的內容。
- 新增圖像。 放下文件,按一下選擇一個,或使用 Cmd+V 或 Ctrl+V 從剪貼簿貼上影像。貼上偵聽器位於整個頁面上,因此複製到剪貼簿的螢幕截圖會直接進入,而不會先儲存。投放區域接受 PNG、JPEG、WebP、GIF 或 AVIF,或瀏覽器可以解碼的任何其他內容。
- 選擇目標尺寸。 目標尺寸選單按平台將 15 個預設分組,每個預設都標有其像素大小和比例,並顯示一條單行註釋,說明尺寸的使用位置。預設是 Instagram 肖像貼文。
- 選擇要保留的內容。 點擊 Keep 網格中的九個點之一。預覽立即重新繪製。
- 檢查號碼並下載。 在預覽下,閱讀說明保留百分比、裁剪尺寸以及結果是否縮小或升級的行。選擇 PNG、JPEG 或 WebP,然後按一下「下載」。
一切都在瀏覽器標籤中的 HTML 畫布上運行。圖像不會上傳、儲存或記錄,頁面會繼續關閉網路。與網站上的每個工具一樣,下載步驟會檢查每日使用限制。
你會遇到哪些錯誤?
大多數問題來自文件格式或來源的大小。這些訊息是特定的。
- &引用;該文件不是圖像。&引用; 文件's 類型不以 開頭
image/,例如 PDF 或影片。該訊息命名該檔案。 - &引用;該圖像無法讀取。它可能已損壞或該瀏覽器未解碼的格式。&引用; 該文件聲稱是圖像,但瀏覽器無法對其進行解碼。常見的情況是瀏覽器中的 iPhone HEIC 照片,不支援 HEIC。首先將其轉換為 JPG 影像格式轉換器.
- &引用;升級 - 來源小於目標,因此看起來會很軟。&引用; 不是錯誤,而是警告。如果您有更大的原件,請使用更大的原件。
- 焦點網格似乎什麼也沒做。 作物僅沿著一個軸修剪,因此只有沿著該軸的錨才能移動它。
- 達到了每日限額。 已使用免費每日使用津貼。
還有一個效果值得知道。由於輸出是從畫布像素重新編碼的,因此下載的檔案不攜帶 EXIF 元資料:沒有相機設定、拍攝日期或 GPS 位置。對於公開發布的照片,這通常是隱私收益。這 EXIF 移除指南 解釋元資料包含什麼以及為什麼共享照片時它很重要。
裁剪、調整大小或適合背景?
裁剪是將影像變成固定形狀的三種方法之一,正確的方法取決於您是否有能力丟失任何圖片。
| 方法 | 發生什麼事了 | 什麼時候用它 | 工具 |
|---|---|---|---|
| 作物與比例 | 修剪邊緣,保持形狀準確 | 主題是框架的一部分,邊緣可以消失 | 社群媒體圖片裁剪器 |
| 適合霧面 | 將整個影像縮小到彩色或模糊的背景上 | 不得剪掉任何東西,例如藝術品或合照 | 霧面產生器 |
| 僅調整大小 | 改變像素尺寸,保持原始比例 | 比率已經正確,或者平台接受任何形狀 | 圖像調整大小 |
| 分成幻燈片 | 將寬影像切割成連續的旋轉木馬幻燈片 | 全景圖太寬,無法容納一篇文章 | 旋轉木馬滾動產生器 |
如果問題是文件大小而不是形狀,則 圖像調整大小指南 覆蓋物可改變尺寸而不會變形。當裁剪後的圖像公開發布並且應帶有您的名字時, 水印 在角落或畫框上添加徽標或簽名。用於發布生活的全套圖像工具 社群媒體工具中心.
為什麼要在上傳之前先裁剪?
因為平台裁切是由看不到您的主題的軟體決定的。每個提要都以固定的比例渲染,並且自動安裝任何其他形狀的上傳,通常是透過從長維度的兩側均勻修剪。有些平台(其中包括 Bluesky)僅在時間軸中顯示該裁剪,因此完整圖像存在,但大多數人從未看到它。
首先裁剪會將三個決定移回給您:框架的哪一部分是可見的、在精確的顯示尺寸下結果的清晰度以及文件的大小。每張圖像需要幾秒鐘的時間,對於人們關心的圖像來說最重要的是:肖像、產品照片和邊緣附近有文字的圖形。對於那些, 將影像裁剪為平台大小 對於該主題的焦點,免費、無需註冊和上傳文件,提要沒有理由更改。
