이미지 로딩 속도 개선 설정을 사용하는 경우, 이미지 파일 용량 크기가 너무 크면 회색 이미지가 오래 노출돼요.
자세히 알아보기
이미지 로딩 속도 개선 설정 방법 (이미지 Lazyload 기능)
이미지 로딩 속도 개선 설정은 처음부터 모든 이미지를 로드하지 않고, 스크롤을 할 때마다 동적으로 이미지를 로드하여 '최초 로딩 시간을 단축해주는 기능' 을 알려드려요.
- 으로 이동해 주세요.
- 모바일(탭) > 기본설정 > 사용설정 화면 내 '상품 상세 이미지 로딩 속도 개선' 항목에서 '사용함' 을 선택한 후, '저장' 버튼을 클릭해 주세요.
Info
이미지 로딩 속도 개선 기능은 "스크롤 할 때마다 동적으로 이미지를 로드하는" 방식으로 동작하기 때문에, 이미지의 개수가 많고, 각 이미지의 파일 사이즈가 작은 경우에 매우 효과적이에요.
이미지 로딩 속도 개선 설정을 사용하면 회색 이미지가 나오는 이유
이미지 로딩 속도 개선 설정을 사용하면 화면 아래쪽의 이미지들은 트래픽이 거의 발생하지 않는 매우 작은 이미지로 대신 로드되며, 스크롤이 해당 이미지의 위치에 도달하면 회색 이미지가 원본 이미지로 바뀌는 방식이에요.
'상세 페이지열기 > 회색 이미지 > 스크롤 > 원본이미지 다운로드 > 원본이미지 보임' 의 단계를 거치는 과정에서 원본이미지가 다운로드 되는 동안 회색 이미지가 노출되는데요. 이 과정에서 이미지의 파일 사이즈가 클 수록 회색 이미지가 노출되는 시간이 길어지게 돼요.
'상세 페이지열기 > 회색 이미지 > 스크롤 > 원본이미지 다운로드 > 원본이미지 보임' 의 단계를 거치는 과정에서 원본이미지가 다운로드 되는 동안 회색 이미지가 노출되는데요. 이 과정에서 이미지의 파일 사이즈가 클 수록 회색 이미지가 노출되는 시간이 길어지게 돼요.
회색 이미지의 노출 시간을 줄이는 방법
회색 이미지의 노출 시간을 줄이려면, 이미지가 다운로드 되는 시간을 줄여야 되는데요.
이미지가 다운로드 되는 시간은 파일 사이즈가 클수록 길어지므로 결국 이미지의 파일 사이즈를 줄여야 한다는 것을 의미합니다.
또한 이미지 파일의 용량이 크면 그만큼 쇼핑몰 이용자의 모바일 데이터가 소진되므로 이미지를 모바일 환경에 적합한 사이즈로 줄일 것을 권장 드려요.
만약 이미지를 더 이상 줄이기 어렵다면 이미지를 여러장으로 나누어 개당 이미지의 용량만 줄이는 것도 방법이에요.
이미지 최적화 방법은 에서 확인해 주세요.
만약 이미지를 더 이상 줄이기 어렵다면 이미지를 여러장으로 나누어 개당 이미지의 용량만 줄이는 것도 방법이에요.
이미지 최적화 방법은 에서 확인해 주세요.