🔬 레티나 @2x·@3x 해상도 계산기

논리 px 가로 (CSS 기준 너비)

논리 px 세로 (CSS 기준 높이)

배수별 내보낼 크기 (픽셀 수 배율은 소수 2자리)

배수	실제 크기	총 픽셀 수	@1x 대비

이 도구는 내보낼 px 크기만 계산하고 srcset·sizes 마크업은 만들지 않습니다.

레티나 @2x·@3x 해상도 계산기 사용법

고밀도 화면에서는 CSS 가 쓰는 논리 px과 화면이 실제로 켜는 물리 px이 다릅니다. 레이아웃에서 375 × 812 로 잡은 자리를 흐릿하지 않게 채우려면 이미지는 그보다 큰 크기로 내보내야 합니다. 논리 가로·세로를 넣으면 @1x·@2x·@3x 로 내보낼 실제 px 과 총 픽셀 수, @1x 대비 픽셀 수 배율을 한 표로 보여 줍니다.

계산은 단순합니다. 내보낼 가로 = 논리 가로 × 배수, 세로도 같은 방식이고, 총 픽셀 수는 두 값을 곱한 것입니다. 그래서 @2x 는 픽셀 수가 4배, @3x 는 9배가 됩니다. 길이가 2배일 때 면적이 4배가 되는 것과 같은 이치이고, 용량 체감이 배수보다 훨씬 크게 느껴지는 이유도 여기에 있습니다(2026년 10월 기준, 배수 체계는 운영체제 설정에 따라 달라질 수 있습니다).

논리 치수를 0.5 px 단위로 잡으면 @3x 에서 정수가 아닌 px 이 나오고, 이때는 경고 줄이 따로 표시됩니다. 이 도구는 srcset·sizes 마크업을 만들지 않고 실제 이미지 파일도 변환하지 않습니다. 또 기기마다 배수가 몇인지 알려주는 목록도 제공하지 않으니, 대응할 배수는 직접 정해서 쓰세요.

자주 묻는 질문

@2x 는 파일 용량도 2배인가요?

아닙니다. 가로와 세로가 함께 2배가 되므로 픽셀 수는 4배입니다. 표의 'vs @1x' 열이 그 배율을 보여 줍니다. 실제 바이트는 포맷과 압축 설정에 따라 또 달라집니다.

srcset 코드도 만들어 주나요?

만들지 않습니다. 이 페이지는 내보낼 px 크기만 계산합니다. 반응형 마크업은 별도 도구에서 다루므로 여기서는 치수 계획에만 집중했습니다.

정수가 아닌 px 이 나왔다는 경고는 무슨 뜻인가요?

논리 치수가 0.5 px 단위라 배수를 곱했을 때 소수가 남는 경우입니다. 그 상태로 내보내면 경계가 반 픽셀 걸쳐 흐려지니 논리 치수를 정수로 맞추는 쪽이 안전합니다.

🔬레티나 디스플레이 @2x·@3x 해상도 계산기

배수별 내보낼 크기 (픽셀 수 배율은 소수 2자리)

관련된 도구

배경화면(월페이퍼) 해상도 사이즈 가이드

아바타 이미지 적정 해상도 가이드

레티나 @2x·@3x 해상도 계산기 사용법

자주 묻는 질문

배수별 내보낼 크기 (픽셀 수 배율은 소수 2자리)

관련된 도구

배경화면(월페이퍼) 해상도 사이즈 가이드

아바타 이미지 적정 해상도 가이드

레티나 @2x·@3x 해상도 계산기 사용법

자주 묻는 질문

같은 카테고리 도구