인스타그램 게시물에 풍경 사진을 업로드하거나,링크드인 링크 이미지로 키가 큰 전화 사진을 업로드하거나,X 에 스크린샷을 업로드하면,플랫폼은 사람들이 보는 부분을 조용히 결정합니다. 몇 가지 고정된 모양 중 하나에 이미지를 맞추고 맞지 않는 것은 무엇이든 다듬고,중간부터 바깥쪽으로 다듬습니다. 피사체가 가운데에 있으면,그게 작동합니다. 피사체가 프레임 상단 근처의 얼굴이거나,왼쪽에 있는 제품이거나,하단에 있는 헤드라인인 경우,플랫폼은 그것을 잘라냅니다.
수정 사항은 이미지를 직접 자르고 피드가 원하는 정확한 모양으로 만들고 어떤 부분이 살아남는지 선택하는 것입니다. 이 가이드는 주요 플랫폼이 표시하는 크기와 종횡비,작물의 기하학,초점을 선택하는 방법,작물이 품질과 파일 크기에 어떤 영향을 미치는지,사람을 잡아내는 부드럽고 확대 된 결과를 피하는 방법을 다룹니다. 작업 된 예제에서는 무료를 사용합니다 소셜 미디어 이미지 크로퍼 전체 작업을 클라이언트 측에서 수행하는 Toolz에서.
TL;DR: 소셜 미디어용 이미지를 자르려면 플랫폼 및 배치에 대한 대상 화면 비율을 선택하고 (예를 들어 Instagram 세로 게시물의 경우 1080 x 1350,링크 미리보기의 경우 1200 x 630,X 게시물 이미지의 경우 1600 x 900) 사진 내부에 맞는 모양의 가장 큰 영역을 중요한 부분에 고정 한 다음 정확한 픽셀 크기로 확장하십시오. 4:5 로 자른 4032 x 3024 전화 사진은 해당 영역의 60%를 유지; 16:9 로 자르면 75%를 유지합니다. 그만큼 소셜 미디어 이미지 자르기 9점 초점 그리드가 있는 브라우저의 캔버스에서 이 작업을 수행합니다. 무료이며 가입이 없고 업로드도 없습니다.
소셜 미디어 이미지 크롭퍼는 무엇을합니까?
소셜 미디어 이미지 자르기 프로그램은 플랫폼이 표시하는 화면 비율에 맞게 사진을 잘라 해당 platform's 픽셀 크기로 확장하므로 플랫폼에 자르기 할 것이 아무것도 남지 않습니다. 두 개의 별도 작업이 발생하며,이를 분리하는 데 도움이됩니다:
- 자르기. 원본 안에 대상 모양이 있는 사각형을 선택합니다. 외부의 픽셀은 폐기됩니다. 내부의 픽셀은 손대지 않습니다.
- 스케일. 그 직사각형의 크기를 1080 x 1350 과 같은 목표 치수로 조정합니다. 여기서 품질이 바뀔 수 있습니다. 이미지가 리샘플링되기 때문입니다.
일반 이미지 편집기는 두 가지를 모두 수행할 수 있지만 비율을 찾고,손으로 상자를 그리고,출력 크기를 기억하게 합니다. 전용 크롭퍼는 크기를 알고,유효한 가장 큰 상자를 자동으로 그리고,한 번의 클릭으로 이동하게 합니다. Toolz 버전은 또한 다운로드하기 전에 크롭 비용이 얼마인지 알려줍니다: 원래 영역의 얼마나 살아남는지,결과가 축소되었는지 또는 확대되었는지 여부.
주요 플랫폼에서는 어떤 이미지 크기를 사용합니까?
각 네트워크는 작은 화면비 세트로 피드 이미지를 렌더링하고,다른 것은 가장 가까운 것에 맞춰집니다. 표에는 자르기 도구에 내장된 15 개의 대상 크기가 나열되어 있으며,이는 각 플랫폼이 현재 다시 자르지 않고 표시하는 내용을 반영합니다. 플랫폼은 이를 수시로 수정하므로 영구 사양이 아닌 현재 지침으로 취급합니다.
| 플랫폼 | 배치 | 화소 크기 | 종횡비 | 사용되는 곳 |
|---|---|---|---|---|
| 인스타그램 | 광장 포스트 | 1080 x 1080 | 1:1 | 클래식 피드 포스트 |
| 인스타그램 | 초상화 포스트 | 1080 x 1350 | 4:5 | 피드가 허용하는 가장 높은 화면 공간 |
| 인스타그램 | 풍경 포스트 | 1080x566 | 1.91:1 | 피드가 허용되는 가장 넓은 범위 |
| 인스타그램 | 스토리 또는 릴 | 1080 x 1920 | 9:16 | 전체 화면; 위쪽과 아래쪽에서 텍스트를 250px로 유지합니다 |
| 스레드 | 광장 포스트 | 1080 x 1080 | 1:1 | 타임라인에서 자르지 않은 상태로 표시됩니다 |
| 스레드 | 초상화 포스트 | 1080 x 1350 | 4:5 | 가장 높은 스레드는 자르지 않고 표시됩니다 |
| 블루스키 | 피드 이미지 | 1200x630 | 1.90:1 | 넓은 이미지는 1.91:1 방향으로 당겨집니다 |
| 블루스키 | 정사각형 이미지 | 1080 x 1080 | 1:1 | 자르지 않은 상태로 표시됩니다 |
| 엑스 X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X | 게시물 이미지 | 1600 x 900 | 16:9 | 탭 없이 전체 표시 |
| 엑스 X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X | 요약 카드 | 1200x628 | 1.91:1 | 대형 링크 미리보기 카드 |
| 페이스북 | 피드 포스트 | 1200x630 | 1.90:1 | 또한 Open Graph 크기 |
| 링크드인 | 피드 포스트 | 1200x627 | 1.91:1 | 링크드인 피드 표준 |
| 유튜브 | 섬네일 | 1280x720 | 16:9 | HD 플레이어의 경우 최소 1280 와이드 |
| 핀터레스트 | 표준 핀 | 1000 x 1500 | 2:3 | 키가 큰 핀은 순위가 낮아집니다 |
| Open Graph | 링크 미리보기 | 1200x630 | 1.90:1 | 기본 카드 대부분의 사이트 및 채팅 앱이 렌더링됩니다 |
두 가지가 눈에 띕니다. "1.91:1" family (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.
- 소스가 더 넓기 때문에 작물은 전체 3024px 높이를 유지합니다.
- 자르기 너비: 3024 x 0.8 = 2419.2px.
- 보관 면적: 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 = 2268px.
- 유지 면적: 2268 / 3024 = 0.75이므로 75%가 생존하며 높이에서 756px가 잘립니다.
작업 예 3: Pinterest 핀에 동일한 사진을 표시합니다.
- 목표 비율: 1000 / 1500 = 0.667. 자르기 폭: 3024 x 0.667 = 2016 px.
- 보관 면적: 2016 / 4032 = 50%. 사진의 절반이 간다.
이 백분율은 도구가 "Original" 의 60%를 유지;로 보고하는 것이며,커밋하기 전에 읽을 가치가 있습니다. 프레임의 절반을 유지하는 자르기는 서식 지정 단계가 아니라 구성 결정입니다.
이미지의 어떤 부분을 유지할지 어떻게 선택합니까?
피사체를 고정하는 초점을 선택하고, 다듬어지는 축을 따라서만 중요하다는 점을 기억하세요. cropper's 9 점 그리드는 각 축에 걸쳐 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 으로 이동하고 머리를 유지합니다. 이 경우는 초점 그리드가 존재하는 이유입니다: 센터링은 합리적인 기본값이며 배너로 바뀌는 대부분의 초상화에 대한 잘못된 대답입니다.
앵커를 따기 위한 몇 가지 경험 법칙:
- 사람: 맨 윗줄, 얼굴은 일반적으로 프레임의 위쪽 3분의 1에 위치하기 때문입니다.
- 그래픽으로 구운 헤드라인 또는 캡션: 텍스트가 있는 행 또는 열.
- 제품 및 중심에서 벗어난 주제: 일치하는 모서리 또는 측면.
- 대칭 장면 및 중심 로고: 중앙에 둡니다.
자르면 화질이 떨어지나요?
자르기만으로 품질이 저하되는 것은 아니지만 스케일링 단계는 가능합니다. 프레임 외부에 픽셀을 버리면 나머지 픽셀은 그대로 유지됩니다. 대상 크기로의 크기 조정은 결과가 개선되거나 저하될 수 있는 부분입니다.
스케일 다운은 안전하고 종종 사진을 선명하게 보이게 하는데,이는 여러 소스 픽셀이 각 출력 픽셀로 평균화되기 때문입니다. cropper 는 canvas's high smoothing quality setting 으로 그려지며,the 를 사용합니다 drawImage 에 정의된 방법 WHATWG HTML 캔버스 사양니다. 스케일 업은 결코 캡처되지 않은 세부 사항을 추가 할 수 없습니다. 출력은 커지지만 더 날카로워지지 않으며 가장자리는 부드러워 보입니다.
작업 예 5: 확대된 스크린샷. X 포스트 이미지를 위해 잘린 800 x 600 스크린 샷은 전체 800 px 너비와 450 px 높이의 스트립을 75%의 영역으로 유지합니다. 그 800 x 450 영역은 각 방향에서 두 배 크기 인 1600 x 900 으로 확대됩니다. 도구는 미리보기 아래에 그렇게 말합니다: & quot;Upscaled - 소스가 대상보다 작으므로 부드러워 보일 것입니다.& quot;
빠른 테스트는 크롭 너비와 대상 너비를 비교하는 것입니다. 크롭이 대상보다 넓으면 이미지가 축소되어 괜찮아 보입니다. 좁으면 확대되고 있습니다. 사진의 경우 전화 카메라에는 거의 항상 여유 픽셀이 있습니다. 스크린 샷,오래된 이미지 및 다른 게시물에서 저장된 그림은 일반적인 업 스케일링 사례이며 유일한 실제 수정 사항은 더 큰 소스입니다.
PNG, JPEG 또는 WebP를 내보내야 합니까?
가장 작은 파일을 원하고 대상이 이를 수락하는지 알면 사진용 JPEG, 스크린샷용 PNG, 하드 에지가 있는 텍스트 및 그래픽, WebP를 내보냅니다. cropper는 무손실이므로 기본적으로 PNG로 설정되며 세 가지를 모두 제공합니다.
| 포맷 | 압축 | 위한 최고의 | 조심하세요 |
|---|---|---|---|
| PNG | 에 명시된 대로 무손실입니다 W3C PNG 표준 | 스크린샷, UI, 텍스트, 로고, 투명도 | 사진용 대용량 파일 |
| JPEG | 손실, 방법 ITU-T T.81 | 사진 | 날카로운 텍스트와 선 주변의 후광; 투명성이 없습니다 |
| 웹P | 손실 또는 무손실, 에 설명되어 있습니다 Google's WebP 문서 | 비슷한 품질의 가장 작은 파일 | 몇 가지 오래된 도구는 열 수 없습니다 |
JPEG 와 WebP 내보내기는 캔버스 인코더에서 0,92 의 품질 설정을 사용하는데,이는 압축 아티팩트가 사진에서 보기 어려울 정도로 충분히 높습니다. 다운로드한 파일은 원본과 사전 설정의 이름을 따서 명명되었으므로 team.jpg JPEG가 저장하는 동안 Instagram 세로 게시물에 대해 잘렸습니다 team-ig-portrait.jpeg.
대부분의 플랫폼은 어쨌든 업로드 한 것을 다시 인코딩하므로 사진의 무손실 PNG 는 한 번 게시 된 PNG 로 살아남지 못합니다. 주로 업로드 크기를 추가합니다. 더 깊이있는 형식을 선택하려면 이미지 포맷 변환기 가이드 더 많은 사용 사례에서 비교합니다.
단계별: 도구로 이미지 자르기
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 소셜 미디어용 이미지 자르기 네 단계가 있으며 미리보기 캔버스는 파일을 생성하는 것과 동일한 캔버스이므로 승인하는 것은 다운로드하는 것입니다.
- 이미지를 추가합니다. 파일을 삭제하거나,클릭하여 하나를 선택하거나,클립보드에서 Cmd+V 또는 Ctrl+V 로 이미지를 붙여넣습니다. 붙여넣기 리스너는 전체 페이지에 있으므로 클립보드에 복사된 스크린샷은 먼저 저장되지 않고 바로 들어갑니다. 삭제 영역은 PNG,JPEG, WebP,GIF 또는 AVIF 또는 브라우저가 디코딩할 수 있는 모든 것을 허용합니다.
- 대상 크기를 선택합니다. 대상 크기 메뉴는 플랫폼별로 15 개의 사전설정을 그룹화하고 각각 픽셀 크기와 비율로 레이블을 지정하며 크기가 사용되는 위치에 대한 한 줄 메모를 표시합니다. 기본값은 Instagram 세로 게시물입니다.
- 무엇을 보관할지 선택하세요. Keep 그리드의 9 개 포인트 중 하나를 클릭합니다. 미리보기가 즉시 다시 그려집니다.
- 숫자를 확인하고 다운로드하십시오. 미리 보기 아래에서 유지된 백분율,자르기 크기 및 결과의 축소가 확대되었는지 여부를 나타내는 줄을 읽습니다. PNG,JPEG 또는 WebP 를 선택하고 다운로드를 클릭합니다.
모든 것이 브라우저 탭의 HTML 캔버스에서 실행됩니다. 이미지가 업로드,저장 또는 기록되지 않으며 페이지가 네트워크 오프와 계속 작동합니다. 사이트의 모든 도구와 마찬가지로 다운로드 단계는 일일 사용 제한을 확인합니다.
어떤 오류에 부딪힐 수 있나요?
대부분의 문제는 파일 형식이나 소스의 크기에서 비롯됩니다. 메시지는 구체적입니다.
- "그 파일은 이미지가 아닙니다." file's 타입은 로 시작하지 않습니다
image/예를 들어 PDF 또는 비디오입니다. 메시지 이름 파일입니다. - "그 이미지를 읽을 수 없습니다. 손상되었거나이 브라우저가 디코딩하지 않는 형식 일 수 있습니다." 파일은 이미지라고 주장하지만 브라우저는 디코딩 할 수 없습니다. 일반적인 경우는 HEIC 지원없이 브라우저에서 아이폰 HEIC 사진입니다. 로 JPG 로 먼저 변환 이미지 포맷 변환기.
- "Upscaled - 소스가 대상보다 작으므로 부드러워 보일 것입니다." 오류가 아니라 경고입니다. 더 큰 원본이 있으면 사용하십시오.
- 초점 그리드는 아무 것도하지 않는 것 같습니다. 작물은 한 축을 따라서만 다듬어지므로 해당 축을 따라 있는 앵커만 작물을 움직입니다.
- 일일 한도에 도달했습니다. 일일 무료 이용 허용량이 사용되었습니다.
한 가지 더 많은 효과를 알 가치가 있습니다. 출력이 캔버스 픽셀에서 다시 인코딩되기 때문에 다운로드 한 파일은 EXIF 메타 데이터를 전달하지 않습니다: 카메라 설정,캡처 날짜 또는 GPS 위치가 없습니다. 일반적으로 개인 정보 보호 이득 인 공개적으로 게시 된 사진의 경우 EXIF 제거제 가이드 해당 메타데이터에 포함된 내용과 사진을 공유할 때 중요한 이유를 설명합니다.
자르기, 크기 조정 또는 배경에 맞추기?
자르기는 이미지를 고정된 모양으로 만드는 세 가지 방법 중 하나이며, 올바른 방법은 사진을 잃어버릴 여유가 있는지 여부에 따라 달라집니다.
| 접근 | 무슨 일이 일어나는지 | 언제 사용할 것인가 | 도구 |
|---|---|---|---|
| 비율에 자르기 | 가장자리를 다듬고 모양을 정확하게 유지합니다 | 피사체는 프레임의 일부이며 가장자리가 갈 수 있습니다 | 소셜 미디어 이미지 크로퍼 |
| 매트 위에 핏 | 전체 이미지를 컬러 또는 흐릿한 배경으로 축소합니다 | 아트워크나 단체 사진 등 아무것도 잘라낼 수 없습니다 | 매트 발전기 |
| 크기 조정만 가능합니다 | 픽셀 크기를 변경하고 원래 비율을 유지합니다 | 비율이 이미 맞거나 플랫폼이 어떤 모양이든 허용합니다 | 이미지 크기 조정 |
| 슬라이드로 분할 | 넓은 이미지를 연속적인 회전목마 슬라이드로 자릅니다 | 하나의 게시물에 비해 파노라마가 너무 넓습니다 | 회전목마 스크롤 생성기 |
문제가 모양이 아닌 파일 크기인 경우 이미지 크기 조정 가이드 왜곡 없이 치수 변경을 다룹니다. 잘린 이미지가 공개적으로 나가고 이름이 표시되어야 하는 경우 워터마커 모서리에 로고나 서명을 추가하거나 프레임 전체에 타일을 붙입니다. 게시를 위한 전체 이미지 도구 세트는 에 있습니다 소셜 미디어 도구 허브.
업로드하기 전에 자르기를 하는 이유는 무엇입니까?
왜냐하면 플랫폼 자르기는 피사체를 볼 수 없는 소프트웨어에 의해 결정되기 때문입니다. 모든 피드는 고정된 비율로 렌더링되며,다른 형태의 업로드는 일반적으로 긴 차원의 양쪽에서 균등하게 다듬어 자동으로 맞춰집니다. 그 중 Bluesky 를 포함한 일부 플랫폼은 타임라인에 표시되는 부분에만 해당 자르기를 적용하므로 전체 이미지는 존재하지만 대부분의 사람들은 결코 볼 수 없습니다.
먼저 자르면 세 가지 결정이 다시 당신에게 돌아갑니다: 프레임의 어느 부분이 보이는지,정확한 디스플레이 크기에서 결과가 얼마나 선명한지,파일이 얼마나 큰지. 이미지 당 몇 초가 걸리며 사람들이 관심을 갖는 이미지와 정확히 일치하는 경우 가장 중요합니다: 초상화,제품 샷,가장자리 근처에 텍스트가있는 그래픽의 경우 이미지를 플랫폼 크기로 자릅니다 주제에 초점을 맞추고 무료이며 가입이 없으며 파일을 업로드하면 피드가 변경될 이유가 없습니다.
