블로그 로딩 속도를 빠르게하는 시리즈 세 번째입니다. 블로그 로딩속도를 빠르게 - CSS Tidy, 블로그 로딩 속도 빠르게 하기 - javascript 압축
앞서 했던 두 가지는 한 번만 해놓으면 계속 그 효과를 유지할 수 있는 데 반해, 이 글에서 소개할 사진 용량를 줄이는 방법은 매 이미지마다 해줘야하는 작업이라서 약간 귀찮을 수 있어요.
하지만 효과가 가장 두르러지게 나타나는 방법이기때문에 꼭 알고 있어야 합니다. 방법이 어려지 않으니 잘 보세요.
블로그 로딩속도를 빠르게
포스트를 쓸 때마다 모든 이미지에 사용하기 어렵다면 최소한 스킨에 사용하는 이미지만이라도 아래 방법을 적용해놓으세요. 확실한 효과가 나타날 겁니다.
이미지 용량 줄이기
이미지의 화질을 떨어뜨리지 않고, 용량을 줄일 수 있다면 그렇게 하는 게 좋겠죠? 용량이 작으면 아무래도 다운받는 속도가 줄어들테니까요.
이미지의 용량을 간단한 방법으로 줄일 수 있는 사이트가 있습니다.
사용법은 간단해요. 파일을 선택해서 업로드하기만 하면 끝이에요.
과정이 다 끝나면 얼마나 용량이 줄었는지 표로 결과를 보여주니까 확인할 수 있어요. 용량을 줄인 파일을 압축파일로 다운받아서 사용하세요.
사이트 말고 여러가지 용량을 줄여주는 프로그램들이 있는데, 대부분 commandline tool이라서 사용하기가 번거롭죠. 저는 사진 용량 줄이기라는 글에 있는 걸 사용하는데, 웹사이트에 접속하는 것보다는 편하네요.
이미지 크기 줄이기, 크기 지정하기
블로그 로딩 속도를 빠르게하는 두 번째는 사진의 크기를 줄이는 거예요. 내가 필요한 사진의 크기가 100x100이라면 실제 이 크기의 사진을 사용하는 거죠. 500x500짜리 사진을 가져다가 100x100으로 줄여서 보여준다면 낭비잖아요.
사진의 크기를 줄이는 건 알씨나 XnView같은 대부분의 사진 편집 프로그램에서 제공하는 기능이므로 생략할께요.
또 img 태그를 사용할 때 사진의 크기를 지정해주면 지정해주지 않는 것보다 속도가 더 빠르다고 하네요. 사진의 크기가 100x100이라면 html 소스에 아래처럼 적는 거지요.
<img src="./images/test.png" width="100" height="100" alt="테스트 이미지" />
사진 여러 개를 하나로 묶어서 사용하는 CSS Sprites도 로딩 속도를 빠르게 해주는데, 이건 좀 어려운 거라서 따로 글을 쓸께요.
요즘에는 인터넷 속도가 빠르니까 사진을 다운받는 건 금방일 수 있어요. 하지만 모바일 버전을 고려한다면 작은 용량이라도 줄여야 하죠. 용량 줄이는 효과를 가장 많이 볼 수 있는 곳이 이미지이므로 조금만 부지런하면 좀 더 나은 블로그를 만들 수 있을 거예요.
함께 보면 좋은 글
블로그 로딩속도를 빠르게 - CSS Tidy
블로그 로딩 속도 빠르게 하기 - javascript 압축
구글 페이지랭크 (Google PageRank) 알아보기
블로그 속도 측정 - Google PageSpeed Insights
애드센스 최적화 배치 도움되는 곳