[HTML/CSS]Image-sprites 기법

 

 

안녕하세요 무택입니다 :)

오늘은 알고 가면 좋을 기법인 Image sprites 기법에 대해 써보려고 합니다. 모르시는 분이라면 생소한 이름일 텐데 아래에서 자세한 내용을 만나보시죠.

스프라이트 기법이란?

여러 개의 아이콘이나 이미지를 하나의 이미지로 합쳐서 업로드한 뒤, 각각 필요한 곳에 맞게 이미지의 위치를 조정해서 맞추는 기법입니다.

출처 : 네이버 홈페이지

왜 사용하는지?

기존 방식이라면 아이콘마다 각각의 이미지가 있기 때문에 용량이 적은 파일들이라 하더라도 사이트에 들어오면 이미지들을 각각 다운받게 됩니다.

하지만 이미지 스프라이트 기법을 사용하면 하나의 이미지만 다운받으면 되기 때문에 이미지의 다운속도가 향상됩니다. 또한 용량 관리 차원에서도 미세하게나마 도움이 될 수 있습니다. 결과적으로 웹 최적화에 좋은 기능이기 때문에 사용하는 기법입니다.

단점

- 한번 뽑아낸 전체 이미지에서 하나의 아이콘만 수정하려 해도 리소스가 많이 들어갑니다.

- background-image로 처리되기 때문에 alt속성을 넣을 수 없습니다.

때문에 중요한 이미지의 경우 이 기법 사용을 추천하지 않습니다.

스프라이트 기법 활용

위 내용과는 별개로 이미지 스프라이트를 이용해서 gif 같은 모션을 구현하는 것도 가능합니다. 그러기 위해서는 애니메이션의 step을 활용해야 합니다. step 기능이 궁금하다면 이전 포스팅을 참고해 주세요.

 

 

codepen예시

See the Pen [HTML/CSS]Image-sprites 기법 by TytanLee (@TytanLee) on CodePen.

 

 

스프라이트 기법을 편하게 사용하기 위한 링크

CSS Sprites Generator Tool | Toptal®

위 링크에 들어가서 스프라이트 기법을 사용할 이미지들을 넣으면 자동으로 이미지 생성 및 코드를 생성해 줍니다. 아주 좋은 사이트죠👍

 

 

정리

스프라이트 기법이 항상 좋다. 무조건 써야 한다. 이건 아닙니다. 하지만 아이콘이나 이미지들이 변경될 일 없는 곳에 써주면 웹 최적화 면에서 좋으니 적절한 상황에 사용하면 좋은 기법이라고 알면 좋을 것 같습니다.