공식블로그

안녕하세요? 파일을 인터넷에 가장 빨리 올리는 방법, 에스드롭(Essedrop)입니다.

네이버 스마트 스토어에 에스드롭 이미지가 느리게 표시되는 문의가 있어서 관련내용을 포스팅합니다.

에스드롭에 올린 이미지 주소를 브라우저 URL 입력창에 입력하고 접속해보면, 이미지가 빠르게 표시되는 것을 확인해보실 수 있으실겁니다. 이렇게 빠르게 표시되는 이미지가 네이버 스마트 스토어에 입력하면 느리게 표시되는 것처럼 느끼는 가장 큰 이유는 네이버 스마트 스토어 서비스의 화면표시 순서를 살펴보면 알 수 있습니다.

네이버 스마트 스토어가 브라우저에서 표시되는 순서를 살펴보면, 네이버 스마트 스토어 관련 리소스를 모두 표시한 후에, 그 다음으로 이미지를 읽어들여 표시합니다.

이미지 표시만 한다면 빠르게 표시되지만, 네이버 스마트 스토어라는 큰 서비스를 모두 표시한 후에 이미지를 표시하기 때문에 네이버 스마트 스토어를 브라우저에서 표시하는 시간동안 이미지가 표시되는 순서를 기다리는 시간이 발생해서 이미지 표시가 느린 것처럼 보여집니다.

아마도 이미지 URL 을 입력하는 방식이 아닌 네이버 스마트 스토어 자체적으로 업로드하는 방식을 취하면 표시가 더 빠르지 않을까 생각됩니다만, 여러가지 이유로 직접 업로드 방식이 아닌 에스드롭을 이용한 이미지 호스팅 주소 입력방식을 선택하셨을거라 네이버 스마트 스토어에서 이미지를 조금이라도 빠르게 표시할 수 있는 간단한 팁을 소개합니다.

참고로 이 팁은 네이버 스마트 스토어 뿐만이 아닌 모든 사이트에서도 활용하시면 좋습니다.

이미지를 좀 더 빠르게 표시하는 팁 💁💡

1. 이미지 용량을 최대한 작게 합니다.

브라우저에는 일종의 메모리 영역이 있습니다. 이 메모리 영역은 제한된 크기를 가지고 있기 때문에, 이미지 용량이 크면 브라우저에서 이미지를 처리하는데 시간이 걸립니다. 이미지가 잘 표시되는 수준에서 최대한 이미지 용량을 작게하면 좋습니다. 보통 PNG 파일을 JPG 로 변환하거나 이미지 사이즈를 줄이는 방법으로 용량을 줄입니다.

2. 이미지 사이즈가 길다면 분할합니다.

세로 혹은 가로로 길이가 긴 이미지를 화면에 표시할 때 화면 밖으로 넘어가서 표시하지 않도록 하기 위해서 CSS 스타일을 정의합니다. 이 때 길이가 긴 이미지를 화면비율에 맞춰 표시하기 위해서 브라우저가 이미지 처리를 하게 되는데, 처리 시간이 제법 소요됩니다.

이런 경우에는, 예를 들어 세로가 긴 이미지일 경우 한 개의 이미지 파일을 가능한 범위내에서 여러개 파일로 나누어서 입력하면 속도면에서 좀 더 빠르게 표시할 수 있습니다.

<div>
    <img src="길이가 긴 이미지 URL">
</div>

위와 같은 이미지를,

<div>
    <img src="짧게 자른 이미지 URL-1">
    <img src="짧게 자른 이미지 URL-2">
    <img src="짧게 자른 이미지 URL-3">
</div>

이런 식으로 나누어서 입력하는 방법입니다.

---

위 두 가지 방법만 적절히 활용하시면 브라우저에 이미지가 표시되는 속도를 조금 더 빠르게 하실 수 있습니다.