[Responsive] 반응형 이미지 - 레티나(Retina) 이미지

레티나(retina) 이미지

• 정의 : 고해상도 디스플레이(DPR 2 이상)에서 깨지지 않도록 더 높은 해상도로 준비한 이미지
• ex) 고해상도 디스플레이 (DPR 2~3)
      - 같은 CSS 크기 (100px × 100px)지만, 실제 화면은 200px × 200px 이상의 픽셀로 그려짐
      - 그런데 이미지가 여전히 100px × 100px이면 픽셀 늘림 → 흐릿하게 보임(깨짐)
      → 2배, 3배 크기의 이미지를 준비해두면, 브라우저가 고해상도 디바이스에서 자동으로 고화질 이미지를 사용해서 선명하게 보여줌.
• .svg 이미지는 해상도에 무관하게 선명(벡터이기 때문에),  아이콘 등은 가능하면 SVG로 대체하는 게 좋음
• 사진이나 배경 이미지처럼 비트맵인 경우만 레티나 대응 필요

---

레티나 이미지 구현 방법

1. @2x, @3x 이미지 준비

css 크기	파일명	실제 크기
100px	logo.png	100×100
100px	logo@2x.png	200×200
100px	logo@3x.png	300×300

2. HTML에서 srcset 사용 (img 태그)

• 브라우저가 DPR에 따라 가장 적합한 이미지 선택해서 표시함
• width와 height는 CSS 기준 크기

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="로고"
  width="100"
  height="100"
/>

3. CSS에서 배경 이미지로 대응

• background-size를 꼭 넣어야 실제 박스에 맞게 맞춰짐
• min-resolution: 2dppx → DPR이 2 이상일 때 적용

.logo {
  width: 100px;
  height: 100px;
  background-image: url('logo.png');
  background-size: 100% 100%;
}

@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
  }
}