상세페이지 이미지가 모바일에서 느릴 때
PC에서는 금방 뜨던 상세페이지가 휴대폰에서는 한참 동안 빈칸으로 남거나, 다 뜬 뒤에도 흐리고 깨져 보일 때가 있습니다. 대부분은 이미지의 픽셀 크기와 용량, 그리고 이미지를 나누는 방식으로 개선할 수 있습니다.
핵심 요약
- 상세 화면에 실제로 표시되는 폭에 맞게 픽셀 크기를 줄입니다.
- 한 장의 아주 긴 이미지는 장면별 여러 장으로 나눕니다.
- 크기를 줄인 뒤 마지막에 한 번만 압축합니다.
- 어두운 옷과 잔무늬 옷은 저장 후 따로 확대해 확인합니다.
- Wi-Fi가 아닌 모바일 데이터에서 직접 열어 봅니다.
휴대폰에서 느려지는 이유
상세페이지는 이미지가 많고 한 장 한 장이 큰 경우가 많습니다. 휴대폰은 PC보다 네트워크가 불안정할 때가 많고, 내려받은 이미지를 화면에 그리기 위해 메모리도 사용합니다. 그래서 같은 페이지라도 이미지의 총 용량이 크거나, 픽셀 수가 지나치게 많은 이미지가 있으면 휴대폰에서 먼저 느려집니다.
특히 휴대폰으로 찍은 원본은 상세 화면 폭보다 훨씬 큰 경우가 많습니다. 화면에는 작게 보여도 휴대폰은 원본의 픽셀을 모두 내려받고 처리해야 하므로, 크기만 맞춰 줘도 체감 속도가 달라집니다.
깨짐은 옷의 색과 옷감에 따라 달랐습니다
스마트스토어와 카페24 자사몰을 운영하면서 상세페이지 이미지가 깨지거나 느린 문제를 자주 겪었는데, 깨짐의 정도는 옷의 색상과 옷감에 따라 달랐습니다. 같은 설정으로 저장해도 어떤 상품은 멀쩡하고 어떤 상품은 손상이 눈에 띄었습니다. 그래서 상세페이지 이미지는 한 가지 설정을 모든 상품에 일괄 적용한 뒤 끝내기보다, 어두운 색이나 촘촘한 무늬의 상품을 골라 따로 확인하는 것이 좋습니다. 원리와 대처는 별도 가이드에 자세히 정리했습니다.
1단계: 표시 폭에 맞게 크기를 줄입니다
먼저 상세 화면에서 이미지가 표시되는 폭을 확인합니다. 판매처나 쇼핑몰 스킨마다 다르므로 판매자센터나 관리자 화면의 안내를 기준으로 하세요. 휴대폰 화면은 픽셀 밀도가 높아 화면에 보이는 폭보다 2~3배 정도의 픽셀이 있어야 또렷하게 보일 수 있지만, 그 이상으로 큰 원본을 그대로 올릴 필요는 없습니다.
크기를 줄일 때는 원본 비율을 유지하고, 원본에서 최종 크기로 한 번에 줄이세요. 이미 줄인 이미지를 다시 줄이면 화질 손상이 겹칩니다. 여러 장을 같은 폭으로 맞춰야 한다면 한꺼번에 처리하면 시간을 줄일 수 있습니다.
2단계: 긴 한 장 이미지는 나눕니다
상세페이지 전체를 디자인 프로그램에서 세로로 아주 긴 한 장으로 만들어 올리는 경우가 많습니다. 이렇게 하면 이미지 하나의 용량이 매우 커지고, 그 한 장이 다 내려받아질 때까지 아래 내용이 보이지 않을 수 있습니다. 또 아주 긴 이미지는 기기나 판매처에 따라 화면에 맞게 줄어들어 흐리게 보이기도 합니다.
장면이나 내용 단위로 여러 장으로 나누면 위쪽 이미지부터 차례로 보이기 시작하고, 일부만 고칠 때도 해당 조각만 교체하면 됩니다. 나눈 이미지들은 폭을 똑같이 맞춰야 이어 붙였을 때 경계가 어긋나지 않습니다.
3단계: 마지막에 한 번만 압축합니다
크기를 맞춘 다음 JPG 화질을 조절해 용량을 줄입니다. 화질을 조금 낮춰도 휴대폰 화면에서는 차이가 거의 느껴지지 않는 경우가 많지만, 어두운 영역과 잔무늬, 작은 글자는 손상이 먼저 드러납니다. 저장한 뒤 그런 부분을 확대해 비교하고, 문제가 보이면 그 이미지만 화질을 조금 올리세요. 압축된 파일을 다시 압축하면 용량은 거의 줄지 않고 화질만 떨어질 수 있으므로, 수정이 필요하면 원본에서 다시 작업하는 편이 낫습니다.
형식에 따라 무거워지는 경우
| 이미지 종류 | 무거워지는 이유 | 대처 |
|---|---|---|
| 사진을 PNG로 저장 | 무손실 저장이라 사진은 용량이 크게 늘어남 | 투명 배경이 필요 없으면 JPG로 변환 |
| 글자가 많은 안내 이미지 | 글자를 선명하게 하려고 화질을 높게 저장 | 크기를 먼저 맞추고 글자가 읽히는 선에서 화질 조절 |
| 움직이는 GIF | 여러 장면을 담아 용량이 크게 늘기 쉬움 | 꼭 필요한 곳에만 쓰고 장면 수 줄이기 |
| 휴대폰 원본 그대로 | 표시 폭보다 픽셀이 훨씬 많음 | 표시 폭에 맞게 축소 |
4단계: 실제 환경에서 확인합니다
작업용 PC와 사무실 Wi-Fi에서는 문제를 발견하기 어렵습니다. 등록을 마치면 휴대폰의 Wi-Fi를 끄고 모바일 데이터로 상세페이지를 처음부터 끝까지 스크롤해 보세요. 빈칸으로 오래 남는 이미지가 있는지, 흐리거나 깨져 보이는 이미지가 있는지 확인하고, 문제가 있는 이미지만 골라 크기와 화질을 다시 조정합니다. 판매처에 따라 업로드한 이미지를 다시 줄이거나 변환해 보여 줄 수 있으므로, 원본 파일이 아니라 등록된 화면을 기준으로 판단하는 것이 정확합니다.
자주 묻는 질문
이미지를 줄이면 확대했을 때 흐려지지 않나요?
지나치게 작게 줄이면 그렇습니다. 그래서 표시 폭보다 어느 정도 여유 있는 크기로 맞추고, 원단 디테일처럼 확대해서 볼 부분은 근접 컷을 따로 넣는 방법이 좋습니다.
WebP로 바꾸면 더 빨라지나요?
WebP는 비슷한 화질에서 JPG보다 작게 저장되는 경우가 많지만, 판매처 등록 화면이 WebP를 받는지 먼저 확인해야 합니다. 확실하지 않다면 JPG의 크기와 화질을 조절하는 것이 안전합니다.
상세 이미지는 몇 장까지 넣어도 되나요?
판매처마다 기준이 다를 수 있으므로 등록 화면의 안내를 확인하세요. 장수보다 한 장 한 장의 크기와 용량을 적절히 맞추는 것이 속도에 더 큰 영향을 줍니다.