쇼핑몰 상세페이지 이미지, 크기와 용량은 어떻게 맞출까

2026.10.01 · edittool

쇼핑몰 상세페이지는 사진과 설명 이미지가 길게 이어져 있어서, 한 상품 페이지에 들어가는 이미지 용량이 수십 MB가 되는 경우가 흔합니다. 손님 대부분이 휴대폰으로 보는데, 이미지가 늦게 뜨면 끝까지 보지 않고 나갑니다. 상세 이미지는 "보이는 폭에 맞춘 크기"와 "적당한 조각 높이", "충분히 줄인 용량" 세 가지를 맞추는 것이 핵심입니다.

가로 폭은 얼마로 할까

상세페이지 본문은 PC에서도 가운데 일정한 폭으로만 보이고, 휴대폰에서는 화면 폭에 맞춰 줄어듭니다. 많은 쇼핑몰 편집기가 가로 860~1000px 정도를 기준으로 쓰기 때문에, 이 범위로 만들면 대부분의 쇼핑몰에서 선명하게 보입니다. 3000~4000px짜리 원본 사진을 그대로 넣으면 화면에서는 어차피 줄어 보이는데 용량만 수 배 커집니다.

입점한 쇼핑몰이나 오픈마켓마다 권장 폭이 다를 수 있으니, 판매자 센터의 이미지 안내를 먼저 확인하고 그 폭에 맞추세요. 이미지 크기 조절의 "가로 폭" 방식에 숫자를 넣으면 여러 장을 같은 폭으로 한 번에 맞출 수 있습니다.

긴 이미지는 나눌까, 합칠까

디자인 프로그램에서 상세페이지를 세로로 아주 길게 한 장으로 만드는 경우가 많습니다. 그런데 높이가 수만 픽셀인 이미지 한 장은 다음과 같은 문제가 있습니다.

• 이미지 한 장을 다 받아야 보이기 시작해서, 휴대폰에서 첫 화면이 늦게 뜹니다.
• 편집기나 기기에 따라 너무 긴 이미지는 올라가지 않거나 흐리게 줄여 보여줍니다.

그래서 보통은 높이 1000~3000px 정도의 조각 여러 장으로 나눠 올리는 것이 안전합니다. 반대로 상품 사진 여러 장을 한 덩어리로 보여주고 싶다면 이미지 합치기로 세로로 이어붙이되, 너무 길어지지 않게 3~5장 단위로 묶으세요. 합치기 도구는 폭이 다른 사진을 가장 좁은 폭에 맞춰 줄이므로, 미리 같은 폭으로 맞춰 두면 깔끔합니다.

용량은 얼마나 줄일까

이미지 용량 줄이기에 상세 이미지를 한꺼번에 넣고 "고화질"로 줄이면, 글자가 많은 이미지도 번지지 않고 보통 절반 이하로 줄어듭니다. 결과는 ZIP으로 한 번에 받을 수 있습니다.

상세페이지에 움직이는 이미지를 넣을 때

제품이 작동하는 모습을 GIF로 넣는 경우가 많은데, GIF는 같은 장면의 영상보다 몇 배 큽니다. 3~5초 정도로 짧게 자르고 가로 480~640px로 만들면 부담이 줄어듭니다. GIF 만들기에서 구간과 크기를 고를 수 있고, 영상을 넣을 수 있는 쇼핑몰이라면 소리를 뺀 MP4가 훨씬 가볍습니다(GIF와 MP4 비교 참고).

체크리스트

1. 가로 폭을 쇼핑몰 권장 폭(보통 860~1000px)에 맞췄나요?
2. 긴 이미지는 높이 1000~3000px 정도로 나눴나요?
3. 사진은 JPG, 한 장 200~400KB 안팎인가요?
4. 움직이는 이미지는 짧고 작게 만들었나요?