[CSS] 이미지 스프라이트(Image Sprite) 기법으로 레티나 대응하기

Wijeong Nam·2022년 7월 5일

🤔 글을 쓰게 된 이유

이번주부터 본격적으로 프로젝트를 시작하게 되었다.
하지만 시작부터 헷갈리는 개념들이 있어서 자꾸 브레이크가 걸리고 마는데,,,
첫번째 브레이크는 이미지 스프라이트 기법 사용하기!!
배우긴 했지만 실제로 적용해본 경험이 많지 않아서 헷갈렸고, 제대로 기억하기 위해 글로 남기려고 한다!

먼저 레티나란 무엇일까?

레티나란 특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도를 가진 애플 LCD 제품의 브랜드 이름이라고 한다.

문제점은 무엇일까?

화면을 구성하는 최소 단위인 픽셀에는 두 가지 종류가 있다.

논리픽셀 : CSS에서 표현하는 화소의 기본 단위
물리픽셀 : 디바이스가 실제로 처리할 수 있는 화소의 기본 단위

레티나와 같은 고해상도 화면은 논리픽셀과 물리픽셀의 차이가 발생한다. 그러나 브라우저는 CSS에서 정의한 픽셀만큼 이미지를 렌더링 해야하기 때문에 원래는 물리픽셀에 맞게 렌더링된 이미지가 논리픽셀 만큼 커지게 된다.
(그래서 같은 이미지여도 화질이 떨어지게 된다.)

해결 방법은 무엇일까?

2배 크기의 이미지들을 준비하여 스프라이트를 생성한다.
이 때 padding 은 기존 이미지의 패딩보다 2배로 적용해준다.
다운로드 버튼을 누르고, Spritesheet를 눌러 이미지를 저장한다.

1배 크기의 이미지들을 준비하여 스프라이트를 생성한다.
이 때 padding 은 1번의 절반인 5로 적용해줘야한다.
다운로드 버튼을 누르고 CSS를 보면 각 이미지의 위치를 알려준다. 해당 코드를 복사해둔다!
이제 이미지가 필요한 코드에 이미지 주소를 넣어준다.
(나는 가상요소로 넣어줘서 content가 추가되었다)
여기서 background-size를 따로 지정해주어야 하는데, 2배수로 만든 스프라이트 파일의 절반 크기로 지정해주면 된다! (ex. 2배수 파일 크기가 136X136 인 경우 width와 height를 68px로 지정해주면 된다)

  .tab-menu #home-link::before {
  content: '';
  display: block;
  background-image: url(images/tab-menu-sprites.png);
  background-repeat: no-repeat;
  background-position: -5px -39px;
  background-size: 68px 68px;
  width: 24px;
  height: 24px;
}