블로그·쇼핑몰 본문 사진은 가로 몇 픽셀이 알맞을까요? 800·1200·1600px 비교

작성 2026-10-27 · 갱신 2026-10-27 · 운영자(개인)

블로그 글이나 상품 상세 페이지에 사진을 넣을 때, 휴대폰 원본을 그대로 올리면 페이지가 무거워지고 너무 작게 줄이면 화면에서 흐릿해 보입니다. 알맞은 폭은 사진이 보이는 본문 폭과 화면의 배율로 정해져요. 이 글은 같은 사진을 네 가지 폭으로 저장하고, 실제 브라우저가 1배·2배·3배 화면에 그린 모습을 비교합니다.

화면 배율부터 알아 두면 쉽습니다

웹페이지의 720px은 화면의 화소 720개와 같지 않을 수 있습니다. 요즘 노트북과 휴대폰은 CSS 1px을 화소 2개나 3개로 그려요. 그래서 본문 폭 720px짜리 블로그는 2배 화면에서 1440화소, 본문 폭 360px인 휴대폰은 3배 화면에서 1080화소를 씁니다. 사진의 가로 픽셀이 이 화소 수보다 작으면 브라우저가 늘려서 그리기 때문에 흐려지고, 크면 줄여서 그립니다.

같은 사진을 네 폭으로 저장했습니다

3200×2133 크기의 그림을 직접 만들었습니다. 상품 라벨처럼 크고 작은 글자, 가는 세로줄, 자잘한 질감이 들어 있어요. 이미지 크기 조절로 가로 800·1200·1600·2400px을 만들고 화질 85로 저장했습니다. WebP 용량은 20.1KB, 61.0KB, 119.4KB, 284.2KB였어요. 폭을 두 배로 늘리면 용량은 네 배 넘게 늘었어요. JPEG은 24.5KB, 64.6KB, 135.3KB, 273.2KB로, 2400px에서는 오히려 WebP보다 조금 작았습니다.

그다음 Edge에서 각 파일을 본문 폭에 맞춘 이미지로 띄우고, 화면 배율을 바꿔 실제 화소를 캡처했습니다. 비교는 원본을 그 화소 수로 정밀하게 줄인 모습과의 글자 SSIM입니다. 1에 가까울수록 같은 모습이에요.

1배 화면이라면 1200px로 충분했습니다

본문 720px, 1배 화면에서는 800px도 0.962로 나쁘지 않았고, 1200px이 0.984, 1600px이 0.985였습니다. 1200px부터는 거의 차이가 없어요. 화면에 필요한 화소가 720개뿐이라 그보다 큰 사진은 줄여서 그려지기 때문입니다.

2배 화면에서는 800px이 번졌습니다

같은 본문을 2배 화면으로 보면 1440화소가 필요합니다. 800px은 글자 SSIM이 0.916으로 떨어졌고, 1600px에서 0.80화소 안에 끝나던 검은 상자의 경계가 2.18화소에 걸쳐 번졌어요. 1200px은 0.968로 조금 부드러웠고, 1600px은 0.989, 2400px은 0.994였습니다. 1600px과 2400px은 비교 그림에서 거의 구분되지 않지만, 용량은 119.4KB와 284.2KB로 두 배가 넘게 차이 납니다. 비교 그림을 보면 800px에서는 28px 크기의 작은 글자가 뭉개져 읽기 어렵고, 큰 글자의 획 가장자리도 번져 보여요. 1200px은 글자는 읽히지만 획 가장자리가 살짝 부드럽습니다.

본문 360px인 3배 휴대폰 화면(1080화소)은 사진 폭이 1080보다 작으면 늘려 그려야 하는 자리입니다. 여기서는 800px이 0.926, 1200px이 0.977, 1600px이 0.988, 2400px이 0.989였어요. 휴대폰에서도 1200px부터 크게 나아지고 1600px 뒤로는 거의 같습니다.

글 한 편의 무게로 생각해 보기

사진이 한 장일 때는 몇십 KB 차이가 작아 보여도, 글 한 편에 열 장을 넣으면 달라집니다. 이번 결과로 계산하면 1600px WebP 열 장은 약 1.2MB, 2400px은 약 2.8MB, 3200px 원본 크기 그대로 WebP로 저장하면 장당 503.6KB라 약 4.9MB예요. 2배 화면에서 1600px과 2400px의 글자 SSIM 차이는 0.005였으니, 그 차이를 위해 두 배 넘는 데이터를 쓰는 셈입니다. 휴대폰 데이터로 글을 여는 독자에게는 이 차이가 기다리는 시간으로 돌아옵니다.

미루킷에서 맞추는 순서

1. 이미지 크기 조절에서 사진을 엽니다. 여러 장이면 한 번에 고를 수 있어요.
2. ‘가로·세로’를 고르고 ‘가로 (px)’에 1600을 넣습니다. ‘가로·세로 비율 유지’가 켜져 있으면 세로는 저절로 맞춰집니다.
3. 세로 사진이 섞여 있다면 ‘최대 크기’를 골라 ‘최대 크기 (px)’에 1600을 넣으세요. 큰 쪽이 1600에 맞춰집니다.
4. ‘파일 설정’에서 WebP나 JPEG를 고르고 미리보기의 용량을 확인한 뒤 저장합니다.

용량이 꼭 작아야 하는 쇼핑몰이라면 1200px이 좋은 절충입니다. 2배 화면에서 조금 부드럽지만 1600px의 절반 정도 용량이에요. 반대로 사진을 화면 가득 넓게 보여 주는 디자인이라면 그 폭에 화면 배율을 곱해 다시 계산하세요.

미루킷으로 직접 확인한 결과

직접 그린 3200×2133 그림(글자·가는 선·자잘한 질감)을 이미지 크기 조절과 같은 processImage로 가로 800·1200·1600·2400px, 화질 85의 WebP와 JPEG로 저장했습니다. 그다음 Edge에서 본문 폭(CSS 720px·360px)에 맞춘 img로 띄우고 화면 배율 1·2·3에서 실제 화소로 캡처했습니다. 글자 SSIM은 원본을 그 화소 수로 정밀하게(lanczos3) 줄인 이상적인 모습과 비교한 값입니다.

실측 원시 기록 보기

공식 출처

• MDN: Window.devicePixelRatio

출처 확인일 2026-10-27