웹페이지 로딩속도를 빠르게 하기 - CSS Image Sprites

블로그스킨을 변경하면서 알게된 것들. (html, css, 워드프레스등)의 이어지는 글입니다.

웹페이지의 로딩속도가 느리지 않나요? 블로그의 로딩속도가 느리지 않나요?
너무 많은 이미지와 아이콘 때문인지도 모릅니다 !!

아래의 글은 CSS에 관한 아주~ 약간의 지식이 필요합니다.
부족한 CSS 문법은 관련 글 HTML / CSS 문법을 참고한 사이트 - w3schools을 참고하세요.

1. CSS Image Sprites란?

여러 개의 이미지나 아이콘을 하나의 이미지로 표현하는 방법입니다. 백문이 불여일견
아사마루의 블로그는 21개의 이미지와 아이콘을 사용합니다.

이 21개의 이미지와 아이콘을 아래와 같이 하나의 파일로 만드는 겁니다.

(▼ Sprite 파일의 미리 보기의 일부분)

이렇게 하나의 이미지파일로 만들고 필요한 이미지(아이콘)는 CSS 파일에서 해당 이미지(아이콘)의 좌표와 크기를 입력하여 이미지를 읽어들이는 것을 이미지 sprite라고 합니다.

2. CSS Image Sprites하는 이유는?

  a   웹페이지 로딩속도가 빨라진다.
웹페이지를 열려고 할 때 웹페이지에서 이미지들이 사용되었을 때 웹 브라우저는 그 이미지 수만큼 서버에게 이미지를 보내달라고 요청을 합니다. 

만약에 웹페이지에 10개의 이미지를 사용했다면 10번을 서버에게 요청하고 10번의 이미지다운로드 작업을 하여 자신의 컴퓨터에서 보이게 됩니다.
당연히 이미지 수가 많으면 많을수록 서버에 대한 이미지 요청 수가 많아지고 그만큼 웹페이지가 표시되는 로딩속도가 느려집니다.

아사마루의 블로그에도 CSS Image Sprites 기술을 적용하여서 이미지처리에 대해서 21번을 요청을 해야할 것을 1번으로 줄여서 블로그로딩속도가 많이 개선되어 webwait의 측정속도^[각주:1]가 평균 1초대 안팎입니다.

   b   파일관리가 깔끔해진다.
아사마루의 images폴더 안에 있는 파일의 전체수는 아래와 같이 12개뿐입니다. 작정하면 4개까지 줄일 수 있습니다.
무엇보다도 파일 수가 적어서 파일관리를 수월하게 하며 보기에도 안정되어 보입니다. *^^*

3. CSS Image Sprites의 원리

Sprites 이미지를 지정(background:url...)하고 해당 이미지가 시작되는 위치좌표(background-position)와 가로크기(width), 세로크기(height)를 정의하는 것으로 CSS Image Sprites를 사용할 수 있습니다.
어디부터 어떻게 해야 할지 뭔가 막막합니다. 걱정하지 마세요. 다음 단계로 점프해서 읽고 난 후보면 뭐야~ 이런 고야!! 할겁니다. ^^;

<아사마루 블로거의 style.css의 적용 예>
#content .box_hot {
    background:url(images/spirit_asamaru.gif) no-repeat 0 0;
    background-position: 0 -991px;
    width:60px;
    height:53px;
} /* postit_hot */

4. CSS Image Sprites를 쉽게하는 방법...

이미지(아이콘) 하나하나의 크기를 재고 하나의 Sprite 파일에 가져다 놓고 정확한 좌표를 알아내는 것은 여간 번거로운 작업이 아닙니다.
이러한 Sprite 파일을 쉽게 만들 수 있도록 도와주는 고마운 사이트가 있습니다.
CSS Sprite Generator 이라는 곳입니다. ㅠㅠ (단, 0.5M까지만 가능합니다.)
사용방법은 간단합니다.

  a   Sprite 이미지 파일로 만들 이미지와 아이콘들을 zip형식으로 압축을 합니다.
  b   CSS Sprite Generator에 접속을 합니다.
  c   "찾아보기..."를 누른 후 [ a ] 에서 압축한 파일을 올립니다.

  d   기본적인 설정을 그대로 두어도 됩니다. 아사마루는 여러 브라우저에서 무난한 GIF 파일에 65536색으로 설정으로 하였습니다. (해상도를 높으면 Sprite 이미지의 파일크기가 커집니다. )

  e   "Class Prefix "의 입력란에 " sprite- "가 자동으로 입력되어 있는데 이것을 지워줍니다. 안 지워도 되지만 파일이름을 확인하는데 불편합니다.

   f   ▲ Create Sprites Images & CSS를 클릭합니다.
   g   ▼순서대로 이미지(아이콘)파일 이름, 좌표, 가로크기, 세로크기의 CSS 내용이 나옵니다.
이 내용을 메모장이나 Notepad++ 와 같은 텍스트편집기에 붙여 놓고 저장해 놓습니다.

  h   ▲ Download Sprite Image를 클릭하여 Sprite 이미지 파일을 내려받은 후 적당한 이름으로 변경합니다.

  i   이름을 변경한 Sprite 이미지를 티스토리의 images/폴더 아래에 올린 후 style.css 파일을 [ g ]에서 적어 놓은 내용을 참고로 하여 수정하면 됩니다.

tip!!

  tip 1  

Sprite 이미지 파일을 CSS에 적용하면서 보기 편한 곳에 주석처리(/* 원래 이미지파일 이름 */)를 해 놓아두세요.

이후에 이미지나 아이콘을 수정할 일이 생기면 이미지 파일이름이 하나로 되어 있어 CSS 파일의 어느 곳을 수정해야 할지를 모르는 때가 생깁니다.

이렇게 주석처리를 해 놓으면 원래의 이미지파일이름으로 검색해서 쉽게 수정할 곳을 찾을 수 있습니다.

  tip 2  

나중에 새롭게 이미지나 아이콘을 추가할 때도 있습니다. 이럴 때 이미지나 아이콘 파일의 이름을 알파벳의 오름차순이 높은 순으로 작명하세요.

CSS Sprite Generator는 Sprite 이미지 파일을 만들 때 기본적으로 알파벳의 오름차순으로 만듭니다. 만약에 새로 추가한 이미지나 아이콘의 이름을 boys.gif로 하였다면 알파벳 b 이후의 기존 이미지나 아이콘들의 좌표들이 줄줄이 밀려납니다. 즉, 해당 이미지들의 좌표를 다시 수정해야 하는 수고가 생깁니다.

위의 이미지를 보면 /* z_01_postit_good */ 와 /* z_01_postit_new */ 라는 파일이름이 있습니다.
아사마루의 티에디션 화면을 수정하면서 새로 추가한 아이콘들인데 이러한 이유 때문에 파일이름이 이상해졌습니다만 관리하는 데에는 크게 문제가 되지 않습니다.

1. 측정속도는 인터넷환경, 시간대, 서버상태(다음 티스토리)등에 따라 다릅니다. 그때 그때 달라요. [본문으로]