CSS 이미지 스프라이트(Image Sprite) 정리

CSS 이미지 스프라이트(Image Sprite)

웹페이지의 첫 로딩 속도를 줄여주는 여러 방법 중 하나로 서버로의 요청 횟수를 최소화해줘서 모바일환경과 같이 한정된 자원을 사용하는 플랫폼의 최적화 요소 중에서도 실제 적용하기에 아주 손쉬운 방법입니다.

 

원리는 아이콘이나 버튼과 같은 반복되서 표시되지 않는 그림들처럼 독립된 여러 그림을 하나의 그림으로 합쳐놓고 CSS의 background-position속성을 이용해 이미지의 특정 부분만 노출되도록 하는 것이다. 이렇게 하면 서버로의 요청 횟수를 줄여주면서 사이트 로딩 속도를 줄여주고 내려받는 이미지의 크기까지 줄여줄 수 있는 효과를 얻을 수 있다.

 

예제 이미지스트라이프 원본

일일이 그래픽 프로그램에서 여러 개의 그림을 하나의 이미지로 합치고 CSS적용을 위한 그림의 좌표값을 얻기란 번거로울수 있다. 그래서 이런 작업을 자동화해 주는 도구들이 개발돼서 하나둘씩 생겨나고 있다.

 

---

이미지 스프라이트 자동화1

1-1. CSS Sprite Generator

CSS Sprite Generator, Editor, and Code

CSS Sprite Generator 사용법

 

1-2. toptal CSS Sprite Generator

CSS Sprites Generator

toptal CSS Sprite Generator 사용법

1-3. Sprite pad

SpritePad

 

단점

그런데 작업하다 보면 여러 가지 문제가 발생할 수 있다.

1. 개별 스트라이프 크기(width, height) 

이미지의 특정 부분을 노출하기 위해서는 스프라이트 이미지의 시작점과 크기에 대한 정보가 필요하다.

크기(width, height)를 알기 위해서는 포토샵 같은 그래픽툴을 사용해서 개별 스프라이트의 시작점과 끝점을 알아내 직접 크기를 구해야 할 것이다.

네모반듯한 이미지라면 간단하지만 형태가 복잡한 이미지이거나 투명도나 그림자가 있는 이미지라면 이미지의 경계가 제대로 확인되지 않을 수 도있어 상황이 좋지 않다.

 

2. 개별 이미지의 위치(position)

css로 스프라이트에 대한 정보를 기술할 때 크기에 대한 정보는 width, height로 나타내고 위치에 대한정보는 background-position에 음수값으로 나타낸다.

스프라이트 이미지에서의 위치에 대한정보는 스프라이트 이미지 자체의 정보이기 때문에 이 작업을 일일이 그래픽툴을 열고 픽셀값을 확인하는 작업을 해야 한다.

 

해결방법

위의 문제점들은 규칙을 정함으로써 어느 정도 해결할 수 있다.

1. 원본 이미지를 관리한다. ==> 이미지 사이즈 문제에서 해방
2. 수정이 잦은 이미지는 스프라이트기법을 적용하지 않는다. ==> 관리를 조금 편하게 해 준다
3. 반복패턴의 이미지는 스프라이트 기법을 적용하지 않는다. ==> 가장 좋은 방법은 패턴이미지의 사용을 최소화하는 것이다.

 

---

이미지 스프라이트 자동화 2

이런 스프라이트 이미지를 수작업으로 만들 수 있지만 이미지 사이의 간격 등 귀찮고 번거로운 작업을 일일이 하기엔 시간이 너무 많이 걸리는 작업이다. 따라서 gulp, grunt를 사용하여 명령어 한 번으로 이미지 스프라이트를 만들 수 있다.

 

2-1. gulp.spritessmith(이미지 스프라이트 만들기)

[걸프(Gulp)] 5. gulp.spritesmith (이미지스프라이트 만들기)

2-2. grunt-spritesmith로 CSS Sprite 자동화하기

grunt-spritesmith로 CSS Sprites 자동화하기 :: Outsider's Dev Story

 

 

---

참고

•  TCP School.com
•  미남이의 이러쿵저러쿵
•  Sprite pad
•  CSS Sprites: What They Are, Why They’re Cool, and How To Use Them