이미지와 관련하여 로딩속도 올리기

컴퓨터 사양이 점점 더 좋아지고 있는 관계로 로딩 속도를 올리기 위해 등장했던 다양한 팁들도 이젠 한물간 이야기가 되고 있다. 하지만 빠른 로딩 속도를 보여주는 웹 사이트는 여전히 매력적이다. 페이지 로딩 속도와 관련한 요소에는 여러 가지만 있지만 이 시간엔 이미지에 한정지어 요즘에도 로딩 속도에 긍정적인 영향을 줄 수 있는 몇 가지 방법을 살펴보겠다. 

다음 페이지의 이미지를 미리 받아두자!

다음 페이지로 연결되어 있는 페이지에서 다음 페이지의 이미지를 미리 받아두면 그 다음 페이지를 읽을 때 캐시 메모리에 저장된 이미지를 읽게 되므로 로딩 속도가 빨라진다.

즉, 현재 페이지의 제일 하단 부에 다음 페이지에 나와 있는 이미지를 미리 다음과 같이 읽어 들인다.

....

....

본문 끝 부분...

....

<img src="next.gif" width="0" height="0">

</body>

</html>

 

여기서 현제 페이지의 제일 하단부에 위치시키는 것은 사용자가 콘텐츠를 읽는 시간 동안 불러오게 하기 위함이다. 더불어 width와 height는 각각 "0"으로 설정하여 보이지 않게 만든다. 이렇게 하면 다음 페이지를 읽을 때 이미 next.gif를 캐시 메모리에 저장하였으므로 그 만큼의 로딩 속도를 줄일 수가 있다.

캐시 메모리를 적극 이용하자!

"다음 페이지의 이미지를 미리 받아두자!"와 같이 캐시 메모리를 적극 사용하자는 것인데, 사이트 내에서 자주 사용하는 이미지는 여러 폴더에 두지 말고, 즉 서로 다른 페이지에서 동일한 이미지를 두고 매번 그 이미지를 불러 오게 하지 말고, 하나의 특정 폴더에 저장/관리하여 한 페이지에서 읽었으면 다른 페이지에서 그 이미지를 읽을 때 캐시 메모리에서 가지고 올 수 있도록 하자.

여러 사람이 공동 작업을 할 경우 동일한 이미지인데 서로 다른 환경에서 개발하다보니 필요할 때마다 자신이 사용하기 편한 폴더에 저장하여 사용하는 경우가 종종 있다. 이런 이유로 동일한 이미지인데도 서로 다른 폴더에서 읽어들이는 문제가 종종 발생하는 것이다. 그러므로 프로젝트를 진행할 때 그 웹 사이트에서 자주 사용하는 이미지는 별도로 정의하여 특정 폴더에서 공동 관리하는 것이 효과적이다.

이미지의 크기는 반드시 지정해 주자!

img 태그를 사용할 때 width와 height 속성을 반드시 지정해주자. 만일 width와 height 속성을 지정해 주지 않으면 브라우저가 해당 이미지를 읽어오기 위해 width와 height를 계산해야 하기 때문이다. 그러므로 img 태그를 사용할 때는 width와 height 속성을 적어주자.

이미지 사이즈를 줄여주자!

다른 무엇보다 이미지 크기를 줄여주는 것이 좋다. 이미지 크기를 줄이는 가장 효과적인 방법으로는 이미지 색상을 적절히 줄이는 것이다. 굳이 256 색상을 모두 사용할 필요가 없으므로 포토샵을 이용하여 색상 수를 줄여 저장하도록 하자.

만일 포토샵을 어느 정도 사용할 수 있다면 다음과 같은 글도 많은 도움을 줄 수 있을 것이다. 참고하기 바란다.

출처: 셀클럽 - http://sellclub.co.kr

다른곳에서 이용할시에는 꼭 출처를 같이 복사이용 바랍니다.