이미지 비율 이해하기: 1:1, 4:3, 3:2, 16:9

이미지 비율은 해상도가 아닙니다. 800×800과 2000×2000은 픽셀 수가 다르지만 둘 다 1:1입니다. 비율은 프레임의 모양을, 해상도는 그 프레임을 이루는 픽셀 수를 말합니다.

게시 위치가 정해져 있다면 먼저 비율을 맞추고, 그다음 필요한 픽셀 크기로 줄이는 순서가 안정적입니다. 반대로 숫자부터 맞추면 중요한 피사체가 잘리거나 이미지가 늘어질 수 있습니다.

비율과 픽셀 크기는 서로 다른 값입니다

비율 16:9는 너비가 16일 때 높이가 9라는 뜻입니다. 1920×1080, 1280×720, 640×360은 모두 같은 모양입니다. 하지만 큰 이미지는 더 많은 픽셀을 갖기 때문에 확대 표시나 고밀도 화면에서 여유가 있습니다.

목표 너비를 알고 있다면 높이는 너비 ÷ 비율의 가로값 × 세로값으로 구할 수 있습니다. 16:9에서 너비가 1200이면 높이는 675입니다.

비율을 유행처럼 고를 필요는 없습니다. 이미지가 들어갈 실제 프레임과 콘텐츠의 구도를 기준으로 선택하세요. 플랫폼의 권장 규격도 바뀔 수 있으므로 게시 직전에 해당 서비스의 최신 도움말을 확인하는 편이 안전합니다.

자동 중앙 자르기는 피사체가 가운데 있을 때만 잘 맞습니다. 얼굴이 한쪽에 있거나 제품 옆의 여백에 글자를 배치할 계획이라면 자르기 영역을 직접 움직여야 합니다.

작은 미리보기에서 괜찮아 보여도 모바일 카드나 둥근 프로필 마스크에서는 가장자리가 더 많이 가려질 수 있습니다. 얼굴, 로고, 자막은 안전 영역 안쪽에 두세요.

하나의 파일을 CSS로 모든 비율에 억지로 맞추면 위치마다 예상하지 못한 부분이 잘립니다. 중요한 이미지라면 정사각형, 가로형, 세로형 버전을 따로 만드는 편이 낫습니다.

파일명에 비율과 크기를 넣으면 관리가 쉽습니다. 예를 들어 product-blue-1x1-800.webp와 product-blue-16x9-1280.webp처럼 구분할 수 있습니다.

GIF 파일과 애니메이션 PNG·WebP는 입력할 수 없습니다. 출력은 새로 인코딩되며 EXIF, 위치 정보, 일부 색상 프로필 같은 메타데이터가 제거될 수 있습니다.

다른 구도가 필요할 때를 대비해 원본은 덮어쓰지 말고 별도로 보관하세요.

3000×2000 여행 사진을 1200×675 웹 헤더로 사용하며, 화면 왼쪽의 인물은 남겨야 한다고 가정합니다.

인물을 찌그러뜨리지 않고 16:9 프레임을 채운 1200×675 정지 이미지가 만들어집니다. 잘려 나간 위아래 영역은 복원할 수 없으므로 원본을 보관하세요.

16:9 이미지는 반드시 1920×1080이어야 하나요?

아닙니다. 1280×720이나 1200×675도 16:9입니다. 필요한 표시 크기와 화질에 맞춰 픽셀 수를 정하세요.

서로 다른 비율을 여백 없이 만들 수 있나요?

원본 일부를 자르면 가능합니다. 사진 전체를 유지하려면 레터박스 같은 여백이 필요합니다. 변형 없이 전체 유지와 빈틈없는 채우기를 동시에 만족할 수는 없습니다.

어떤 위치를 잘라야 할지 모르겠습니다

얼굴, 제품, 로고처럼 반드시 남길 요소부터 표시하세요. 그다음 시선 방향이나 글자가 들어갈 쪽의 여백을 남기며 틀을 움직이세요.