이 포스팅은 [HTML/CSS] 이미지 스프라이트 기법 ✂️, [CSS] 이미지 스프라이트 기법 을 참고하여 게시하였습니다. 도움이 되어 감사합니다.
이미지 스프라이트(Image Sprite)란 🔎?
스프라이트(Sprite)란 컴퓨터 그래픽스에서 작은 2차원 비트맵이나 애니메이션을 합성하는
기술을 의미하는데, 웹의 경우에는 여러개의 이미지를 하나의 이미지로 만들어 놓는것을 의미한다고 한다.
즉 여러 개의 배경 이미지를 하나의 파일로 제작한 후 background-position 속성을 이용하여 이미지를 배치하는 방법이다.
쉽게 말하면 각각의 이미지를 개별적으로 다운받는 것이 아닌, 하나의 파일만 업로드하여 필요 부분만 개별적으로 사용하는 것이다.
👆 네이버에 메인페이지에서는 스프라이트 기법을 이용해서 아이콘이나 이미지들을 활용하는데에 쓰이고 있는 것을 알 수 있다.
이미지 스프라이트 사용법? 🤔
이미지 스프라이트는 img 태그를 사용해서 이미지를 삽입하는 것이 아닌 CSS의 background 속성을 이용하여 삽입한다. 그런데, 스프라이트 기법이 적용된 이미지를 일일이 붙여서 만들면
시간 소요가 생각보다 될 것이다. 오차가 발생할 수도 있고 이미지 적용이 생각보다 위치 잡는 데에 번거로울 수 있기 때문에 만들어주는 사이트를 사용하는것이 유용하다.
아래 링크는 CSS Sprites Generator라는 프로그램이다.
사용할 이미지들을 넣어주면 자동으로 스프라이트 이미지를 생성해준다.
https://www.toptal.com/developers/css/sprite-generator/
원하는 아이콘, 이미지의 위치값까지 (background-position) 복붙해서 사용하니 편리하다.
스프라이트 기법을 사용하기 위해서는 필수적으로 작성해줘야할것들
width, height : 삽입할 이미지의 크기를 결정한다.
background-image : 삽입할 이미지의 경로를 설정한다.
background-position : 이미지에서 사용할 이미지의 위치를 설정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
a::after {
content: "";
display: block;
width: 28px;
height: 28px;
background-image: url(./css_sprites.png);
}
.css::after {
width: 120px; height: 170px;
background: url('css_sprites.png') -10px -10px;
}
.js::after {
width: 120px; height: 170px;
background: url('css_sprites.png') -290px -10px;
}
.html::after {
width: 120px; height: 170px;
background: url('css_sprites.png') -150px -10px;
}
</style>
<body>
<a href="#" class="css">CSS</a>
<a href="#" class="js">JS</a>
<a href="#" class="html">HTML</a>
</body>
</html>스프라이트된 이미지를 background-image를 통해 ::after에 적용하고,
background-position을 통해 위치를 잡아주었다.
브라우저에는 아래와 같이 적용된 모습을 볼 수 있다.
이미지 스프라이트 기법의 장점
1. 이미지 로딩 속도 향상(최적화)된다.
일반적으로 이미지태그를 이용해 하나씩 삽입할때보다
브라우저의 로딩 속도가 향상된다.
각각의 이미지를 가져오는것에 비해 스프라이트 이미지를 하나만 받아야하는
브라우저의 입장에서는 스프라이트 이미지 한장을 불러오는것이 더 빠를 수 밖에 없다.
2. html 마크업이 간결해지고 스크린 리더의 탐색 속도가 향상된다.
css로 작업하지 않고 일일이 html img 태그에 적용을 시킨다면, 텍스트 양도 늘어나고,
img 태그로 인해 스크린 리더가 하나씩 읽게 될 것이다.
이미지 스프라이트 기법을 통해 이미지를 background 속성으로 적용하게 된다면
스크린리더가 읽을 필요가 없는 '배경이미지'로 인식하게 되어 탐색 속도가 빨라지게 될 수 있다.
(css 로 조절되기 때문에 alt 속성을 지정해 줄 수 없다.)
따라서 이미지 스프라이트 기법은 되도록 의미가 없고 디자인을 목적으로 하는 이미지를 위해 사용하는것이 적합하다.
3. 하나의 파일만 관리하면 된다.
이미지 스프라이트 기법은 여러 이미지를 관리하는 것보다 하나의 이미지를 관리하기 때문에 간편하다. 하지만 관련된 이미지들로만 묶어 합쳐 놓는 것이 좋다.
여러 이미지로 혼합하여 묶을 시에는
여러개의 이미지를 하나의 이미지 파일에 관리하는 것이기 때문에
번거로움이 그대로 유지 될수 있기 때문이다.
이미지 스프라이트 기법의 단점
1. 유지 보수 어려움
장점에서는 파일관리가 쉽기 때문에 유지보수가 잘될 수 있다고 하였지만,
만약 웹페이지가 업데이트, 리뉴얼 됨에 따라 이미지가 추가 된다고 하면,
스프라이트 이미지를 다시 제작 해야한다.
이미 만들어진 이미지는 각각의 포지션 값이 정해져있기 때문에, 이미지 파일을 바꾸면
이전에 적용되었던 위치값들이 변경되기 때문에 전부 바꿔줘야하는 어려움이 발생한다.
만약 이미지가 수정이 빈번한 이미지라면 개별적인 이미지 파일로 관리하는것이 적합하겠다.
2. 데이터 관리에 문제가 생길경우 이미지 로딩이 불가능
여러 개의 이미지 파일을 이용하여 각각의 이미지를 삽입했을 때에는
하나의 이미지가 문제가 발생한다면 문제가 생긴 하나의 이미지 파일만 수정을 하면 된다.
하지만 스프라이트 이미지는 여러개의 이미지가 합쳐져 있기 때문에 스프라이트기법을 적용한 이미지 파일에 문제가 생긴다면 이미지를 볼 수 없는 상황이 발생한다.
