블로그 로딩 속도를 빠르게 - CSS Image Sprites

제 블로그 양쪽에 떠 있는 버튼들 보이시죠. 이 버튼들이 바로 CSS Image Sprites로 만든 버튼 이미지들입니다. CSS Image Sprites의 효과와 만드는 법에 대해서 알아보겠습니다.

CSS Image Sprites와 효과

CSS Image Sprites이 뭐냐면 여러 그림 파일을 하나로 합치고, 그 그림 파일을 화면에 표시할 때는 CSS의 background-position 속성을 이용하는 걸 말합니다.

그림 파일을 여러 개 사용하다 보면 페이지에 접속할 때 HTTP 서버에 그림의 개수만큼 요청을 하게 됩니다. 대신에 여러 그림 파일을 하나로 합치면 서버에 한 번만 요청해도 되겠죠. 이 요청하는 수를 줄여서 사이트 접속 속도를 빠르게 할 수 있습니다. 크기가 작은 그림이나 페이지가 바뀌더라고 계속 표시해야 하는 그림에 사용하면 좋습니다.

화면에 그림을 표시할 때 img 태그 사용하는데, 그림을 합치면 CSS의 backgroud-position을 이용해서 위치를 잡아주는 방법으로 표시하게 됩니다. CSS의 background 사용법은 다음글을 참고하세요. [CSS] background, background-image, backgroun-color

CSS를 이용하는 것이 HTML을 직접 이용하는 것보다 대체로 속도가 더 빠르다는 건 알고 계실 겁니다. 결국 CSS sprite를 적용하게 되면 두 가지 면에서 블로그 로딩 속도가 빨라지죠.

포토샵같은 이미지 편집 도구를 사용할 줄 몰라도 상관없습니다. CSS에 대해서 조금만 알면 아래 사이트를 이용하면 약간의 노력으로 쉽게 적용할 수 있습니다.

CSS Sprite Generator

CSS Sprite Generator 사용법

영문 사이트지만 아주 간단한 영어기 때문에 사용하는 데 별 무리는 없습니다.
몇 가지만 말씀드리면요.

Upload Images (ZIP): 하나로 합칠 이미지들을 zip 파일로 압축하고 이 zip 파일의 경로를 입력합니다.

Horizontal Offset: 이미지 사이의 가로 간격입니다. 사파리에서 CSS를 사용하면 background 이미지가 반복되는 버그가 있어서 가능하면 기본 값을 그대로 사용할 것을 권장하고 있습니다.

Vertical Offset: 이미지 사이의 세로 간격입니다.

Wrap columns to fix Opera bug: 오페라에서 2042px보다 큰 이미지는 제대로 보이지 않는 버그가 있어서 합쳐진 그림의 크기가 2000px보다 크면 줄 바꿈을 하는 설정입니다. 기본 값 그대로 선택하세요.

Background / Transparency Colour # (optional): 원본 그림을 여러 개 사용할 때 크기가 다르다면 크기를 맞추기 위해서 작은 그림에는 여백이 생기게 됩니다. 이 여백의 색과 원본 그림에 있는 투명영역의 색을 지정하는 설정입니다. 역시 빈칸으로 그대로 두면 됩니다.

Use Background Colour for Transparency: 위에서 설명한 것처럼 크기 차이로 생기는 여백의 색을 투명하게 하는 설정입니다. 이 설정을 사용하시는 것이 좋습니다.

Compress Image with OptiPNG: 만든 이미지를 압축해서 용량을 줄여주는 설정입니다. 결과물이 PNG 파일일 때만 사용할 수 있습니다.

그 외의 설정은 따로 설명하지 않아도 아실 겁니다.
이렇게 해서 만든 이미지 파일과 CSS 소스는 블로그에 바로 적용할 수 있습니다.
방법을 모르시는 분은 아래 링크를 따라 가시면 됩니다.

관련글

[CSS] background, background-image, backgroun-color
블로그 추천, 구독 버튼 넣기 - CSS Image Sprites
블로그 위, 아래, 이전글, 다음글 이동 단추 넣기