Mac 이미지 픽셀 크기 조정: 3가지 방법

블로그 템플릿은 CSS 너비 960 px로 히어로 이미지를 표시하지만, 디자인 내보내기 파일은 종종 2880 px입니다. 독자는 추가 픽셀을 보지 못하지만, 페이지 로드마다 이를 다운로드합니다. 압축하거나 포맷을 변환하기 전에 실제 디스플레이 크기로 조정하세요.

디스플레이 크기 규칙

모니터나 카메라의 원본 캡처 크기가 아닌, CSS 너비의 약 2배로 내보냅니다. 픽셀 차원은 DPI 메타데이터와 다릅니다. 72 또는 300 DPI로 태그된 1920 px 너비의 이미지도 레이아웃이 픽셀 너비를 사용할 때 1920 px를 차지합니다.

일괄 처리 전에 Figma 프레임, CMS 템플릿, 이메일 빌더에서 크기를 확인하세요. 크기 조정 후 포맷 선택은 Mac에서 이미지 압축하기 를 참고하세요.

방법 1: GetCompress

최적의 사용처: 혼합 폴더, 재사용 가능한 너비, 변환과 크기 조정을 한 번에 처리.

1. GetCompress 에 이미지 하나 또는 폴더를 드래그 앤 드롭합니다.
2. 최대 너비 또는 최대 높이를 설정합니다 (예: 블로그 히어로용 1920 px).
3. CMS에서 JPEG 또는 WebP를 요구할 경우 출력 포맷을 선택합니다.
4. 새 너비로 UI 스크린샷을 미리본 후 원본 옆에 내보냅니다.
5. “blog 1920px”와 같은 프리셋을 저장해 다음 번에 재사용하세요.

처리는 Mac에서 진행됩니다. 대량 폴더 워크플로우에 대해서는 Mac에서 이미지 일괄 크기 조정 을 참고하세요.

방법 2: 미리보기에서 크기 조정

최적의 사용처: 내장 도구로 하나 또는 소수의 파일 처리.

1. 미리보기에서 이미지를 엽니다.
2. **도구 → 크기 조정…**을 선택합니다.
3. 너비 또는 높이를 픽셀 단위로 설정합니다. 의도적으로 자르지 않는 한 비율 유지를 체크합니다.
4. **파일 → 내보내기…**를 선택하고 JPEG, PNG를 선택하거나 현재 포맷을 유지합니다.
5. 새 파일로 저장한 후 도구 → 정보 표시에서 차원을 확인합니다.

크기 조정 후 텍스트와 미세한 선을 확대해 확인하세요. 스크린샷을 디스플레이 너비보다 작게 줄이면 글씨가 읽기 어려워집니다.

한계: 수십 개의 파일에 걸쳐 프리셋을 저장할 수 없습니다.

방법 3: sips로 일괄 처리

최적의 사용처: JPEG 또는 PNG 폴더에 대한 터미널 루프.

mkdir out
for f in *.jpg; do sips -Z 1920 "$f" --out "out/$f"; done

정확한 너비 (높이는 비례 조정):

sips --resampleWidth 1920 input.jpg --out output.jpg

한계: PNG, JPEG, HEIC가 혼합된 폴더는 별도의 명령어나 전용 앱이 필요합니다. 온라인 크기 조정 도구는 자산을 업로드합니다. 미공개 목업의 경우 로컬에서 처리하세요. 온라인 파일 압축기는 안전한가 를 참고하세요.

종횡비와 업스케일링

JPEG를 업스케일링하고 다시 압축해 선명한 디테일을 기대하지 마세요. 파일에 없던 정보는 복원하지 못한 채 아티팩트만 추가됩니다.

미리보기로 충분할 때

새 너비가 레이아웃과 이미 일치할 때 미리보기로 단일 자산을 완료할 수 있습니다.

GetCompress는 동일한 너비가 수십 개의 파일에 걸쳐 반환되거나, 같은 과정에서 포맷도 변환할 때 유용합니다. 프로젝트 README에 선택한 픽셀 너비를 기록해 다음 사람이 4000 px 내보내기를 다시 도입하지 않도록 하세요. 크기 조정 후 WebP 제공은 Mac에서 PNG를 WebP로 를 참고하세요.