레티나 이미지 스프라이트 background-position 변동을 계산해보자

레티나 디스플레이에서 이미지가 물 먹는 현상을 방지하기 위해
피그마 같은 곳에서 실제 필요한 사이즈보다 2배 이상 큰 이미지를 가지고 작업을 하게 된다.

각각의 이미지 파일로 작업을 한다면 background-position 변동 걱정이 안될 것 같은데, 이미지 스프라이트를 사용하기 때문에 위치 계산을 한번 해보고 싶었다.

보통 이 사이트에서 스프라이트용 이미지를 생성한다. 이미지가 배치되는 방식은 각 이미지 사이에 여백을 10px 주고, 바이너리로 배치되는 것이 기본 세팅이다.
CSS Sprites Generator 사이트

스프라이트 할 곳은 아래 원 비율 이미지의 각 아이콘 크기인 28px*28px이다.

width: 28px;
height: 28px;
background-image: url(레티나 스프라이트 이미지);
background-size: 96px 96px

레티나 이미지를 원 크기로 맞춰주려면 길이를 절반으로 나눠줘야 한다.

google 아이콘
원 비율 이미지의 좌표 (-10px, -10px)와 같은 지점은
레티나 이미지 축소에서 (-5px, -5px)이다. (여백을 한번 지나갈때마다 +5px)

facebook 아이콘
원 비율 이미지의 좌표 (-58px, -10px)와 같은 지점은
레티나 이미지 축소에서 (-43px, -5px)이다. (x축은 여백을 3번 지나가서 +15px)

naver 아이콘
원 비율 이미지의 좌표 (-10px, -58px)와 같은 지점은
레티나 이미지 축소에서 (-5px, -43px)이다. (y축은 여백을 3번 지나가서 +15px)

kakao 아이콘
원 비율 이미지의 좌표 (-58px, -58px)와 같은 지점은
레티나 이미지 축소에서 (-43px, -43px)이다. (두축 모두 여백을 3번 지나가서 +15px)

정확하게 계산하려면 이렇게 귀찮다...
여백없이 스프라이트 이미지를 만드는 게 나을 것 같다.