긴 이미지 나누기 (상세페이지 10,000px를 나누면 빨리 뜰까? 이음새·용량·로딩 비교)
860×10,000px 상세페이지를 3~16조각으로 나눠 용량, 이음새, 휴대폰 로딩 속도를 비교하고 어디서 나눌지 정리
상세페이지나 긴 캡처를 올릴 때 "한 장이 너무 길면 나눠 올리라"는 말을 자주 듣습니다. 그런데 나누면 정말 빨리 뜰까요? 이음새가 보이거나 용량이 늘지는 않을까요? 픽레버 이미지 분할로 860×10,000px 상세페이지를 3~16조각으로 나누고, 용량·이음새·휴대폰 로딩 속도를 비교했습니다.
결론: 조각 수를 바꿔도 전체 용량은 거의 같았고, 다시 이어 붙였을 때 이음새도 보이지 않았습니다. 다만 나눈다고 빨리 뜨지는 않았습니다. 느린 회선에서 한 장 JPG는 첫 화면이 1.6초에 보였지만, 4조각은 3.6초가 걸렸습니다. 속도를 바꾼 것은 조각 수가 아니라 저장 형식이었습니다. 기본값인 PNG로 저장하면 1.3MB JPG가 5.1MB가 되어 전체 로딩이 27초로 늘었고, WebP는 857KB로 가장 빨랐습니다.
조각 수와 저장 형식별 용량
| 저장 형식 | 3조각 | 4조각 | 8조각 | 16조각 |
|---|---|---|---|---|
| 원본 (한 장 JPG) | 1.3MB | 1.3MB | 1.3MB | 1.3MB |
| PNG (기본값) | 5.1MB | 5.1MB | 5.1MB | 5.1MB |
| JPG | 1.2MB | 1.2MB | 1.2MB | 1.2MB |
| WebP | 839KB | 857KB | 861KB | 856KB |
-
조각 수는 용량에 거의 영향이 없었습니다. 3~16조각 사이 차이가 JPG 0.4%, WebP 3% 안이었습니다.
-
저장 형식 기본값이 PNG입니다. JPG 원본을 그대로 나누면 4배 무거워지니, 사진이 많은 상세페이지는 저장 형식을 JPG나 WebP로 바꾸세요.
-
JPG로 저장하면 한 번 더 압축되지만 원본과의 차이는 PSNR 42dB 이상으로 눈으로는 구분되지 않았습니다.
나눠 올리면 빨리 뜰까
| 올린 방식 | 첫 화면이 다 보일 때 | 끝까지 다 받을 때 |
|---|---|---|
| 한 장 JPG | 1.6초 | 7.2초 |
| 4조각 JPG | 3.6초 | 7.0초 |
| 16조각 JPG | 2.6초 | 7.0초 |
| 4조각 WebP | 2.6초 | 4.9초 |
| 4조각 PNG | 12.7초 | 27.2초 |
-
한 장 JPG는 위에서부터 차례로 그려져 첫 화면이 가장 빨랐습니다. 조각으로 나누면 여러 장을 동시에 받느라 회선을 나눠 써서 첫 조각이 늦게 완성됐습니다.
-
아래 조각을 나중에 받도록(지연 로딩) 설정해도 4조각 JPG의 첫 화면은 2.4초로, 한 장보다 늦었습니다.
-
끝까지 받는 시간은 조각 수와 관계없이 비슷했고, 형식을 WebP로 바꿨을 때만 7.0초에서 4.9초로 줄었습니다.
어디서 나눌까: 균등 분할과 자유 분할
| 방식 | 조각 크기 | 나뉜 위치 |
|---|---|---|
| 균등 분할 4행 | 2,500px × 4 | 사진 중간 |
| 자유 분할 (구역 경계) | 2,242 · 1,818 · 2,042 · 3,898px | 구역 사이 여백 |
| 자유 분할 기본값 그대로 | 폭 430px × 8 | 가운데 세로로도 잘림 |
-
다시 이어 붙이면 어디서 나눠도 원본과 같았습니다. PNG는 픽셀이 완전히 같았고, JPG·WebP도 이음새 근처가 다른 부분보다 더 손상되지 않았습니다.
-
균등 분할은 구역과 상관없이 자릅니다. 이 예시에서 29줄의 문구 중 8조각은 1줄, 16조각은 2줄을 가로질렀습니다. 나중에 한 구역만 고쳐 올리려면 자유 분할로 구역 사이 여백에서 나누는 편이 편합니다.
-
자유 분할을 처음 켜면 가로선과 함께 세로선(이미지 가운데)도 하나 들어 있습니다. 지우지 않으면 폭 430px짜리 조각 8장이 나오니, 세로선의 × 를 눌러 지우세요.
나눠야 하는 경우
-
한 변 4,096px 제한: 픽레버는 조각 하나를 한 변 4,096px 이하로 저장합니다. 10,000px 이미지는 1~2조각으로는 저장되지 않았고, 기본값은 4행이었습니다.
-
업로드 용량 제한: 쇼핑몰이나 게시판이 한 장 용량을 제한할 때 나눠 올리면 됩니다. 스마트스토어 기준은 스마트스토어 상세페이지 이미지 규격에 정리했습니다.
-
구역별로 자주 고칠 때: 가격이나 배송 안내처럼 바뀌는 구역만 따로 두면 그 조각만 바꿔 올리면 됩니다.
-
로딩 속도가 목적이라면: 나누기보다 WebP로 저장하거나 용량을 줄이는 쪽이 효과가 컸습니다.
실험 조건
-
표본: 상품 사진 4장과 안내 문구 29줄로 만든 860×10,000px 상세페이지(JPG 품질 92, 1.3MB)
-
픽레버 이미지 분할에서 균등 분할 3·4·5·8·16행, 자유 분할(2,242·4,060·6,102px)을 PNG·JPG·WebP로 저장한 뒤 용량, 다시 이어 붙인 이미지와 원본의 PSNR(이음새 위아래 8px 따로 계산), 분할선이 지나는 문구 줄 수를 측정 · 테스트일 2026-10-19
-
로딩: 조각을 세로로 붙인 웹 페이지를 크롬에서 휴대폰 화면 폭(390px), 1.6Mbps·지연 150ms로 제한해 3회씩 열고 중앙값 기록. 첫 화면은 화면에 보이는 부분이 최종 모습과 같아진 시점입니다. 실제 쇼핑몰은 이미지 서버와 앱에 따라 달라질 수 있습니다.
픽레버로 긴 이미지 나누기
-
이미지 분할에서 이미지 불러오기를 눌러 이미지를 올립니다(최대 20MB, 세로 30,000px).
-
같은 크기로 나누려면 균등 분할에서 행 수를 정하고 열은 1로 둡니다.
-
구역마다 나누려면 자유 분할을 고르고, 세로선은 × 로 지운 뒤 가로선을 + 추가해 위치(px)를 입력합니다.
-
저장 형식을 JPG나 WebP로 바꾸고 분할 결과 만들기를 누른 뒤 전체 ZIP 저장을 누릅니다.
자주 묻는 질문
Q. 이미지가 서버로 올라가나요?
아닙니다. 분할은 기기 안에서 처리됩니다.
Q. 파일 이름은 어떻게 붙나요?
원본명_r01_c01처럼 행·열 번호가 붙습니다. 이름순으로 정렬하면 올릴 순서와 같습니다.
Q. 여러 장을 같은 비율로 나눌 수 있나요?
여러 장 일괄 편집에서 최대 20장에 같은 행·열을 적용할 수 있고, 분할선 위치는 백분율로 지정합니다.