[Responsive] 반응형 이미지 작업 / CSS에서의 반응형 이미지 처리

기본 원칙

1. 이미지 크기 유연하게 설정

• 이미지는 크기(px)로 고정하지 않고, 부모 요소 크기에 따라 유동적으로 변하도록 설정해야 함
• 대표적으로 max-width: 100%; height: auto; 조합을 사용하여
  이미지가 부모 컨테이너 너비를 넘지 않고, 비율(가로/세로 비율)을 유지하며 크기가 조절됨

2. 비율 유지

• 이미지는 가로 세로 비율을 깨지 않도록 해야 함
• height: auto로 가로 크기에 맞춰 세로를 자동 조절하거나
  width: auto로 세로 기준 가로를 자동 조절
• 임의로 고정 크기(width: 100px; height: 100px;)를 주면 이미지가 찌그러질 수 있음

3. 적절한 이미지 해상도 제공

• 디바이스 해상도가 다르기 때문에 동일 이미지라도 해상도별 적절한 이미지를 준비
• 모바일 화면, 일반 데스크톱 화면, 레티나 같은 고해상도 화면 등 각각에 최적화된 이미지 제공이 필요
• 이를 통해 불필요하게 큰 이미지를 모바일에서 다운받는 비효율을 줄임

 

---

CSS에서 반응형 이미지 구현

유연한 이미지 크기 지정

img {
  max-width: 100%;  /* 부모 너비에 맞게 최대 크기 제한 */
  height: auto;     /* 비율 유지하며 세로 크기 자동 조절 */
  display: block;   /* 이미지 아래 여백 제거 */
}

• display: block은 이미지가 인라인 요소일 때 생기는 아래 여백(줄간격)을 제거함
• max-width 대신 width: 100%를 쓰면 부모 너비에 무조건 맞춰 늘어나거나 줄어든다.

---

미디어 쿼리로 이미지 크기 조절

•  특정 화면 크기에 따라 이미지 크기를 다르게 지정할 수 있음
• 필요에 따라 여러 구간으로 나누어 유연하게 조절 가능

/* 모바일에서는 화면 너비 전체를 사용하고, 데스크톱에서는 절반 크기로 설정하는 예시 */
@media (max-width: 600px) {
  img.responsive {
    width: 100%;
  }
}

@media (min-width: 601px) {
  img.responsive {
    width: 50%;
  }
}

---

object-fit으로 이미지 비율과 잘림 제어

• 이미지 크기를 지정한 박스 내에서 비율 유지하며 잘릴지, 늘릴지 결정 가능
• 주로 고정 크기 박스 안에서 이미지 배치를 컨트롤할 때 사용

[CSS] object-fit

---

 

배경 이미지 반응형 처리 (CSS 배경 이미지)

• <img> 요소가 아닌 CSS background-image는 HTML 속성으로는 반응형 처리 불가
• 대신 미디어 쿼리로 배경 이미지를 다르게 지정하거나, background-size를 조절
• 모바일에서는 작은 이미지를 로드해 데이터 절약

.hero {
  background-image: url('large.jpg');
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px) {
  .hero {
    background-image: url('small.jpg');
  }
}

---

HTML과 CSS가 결합된 반응형 이미지 처리: srcset + sizes

 

• CSS만으로는 해상도별 최적 이미지 선택을 할 수 없고, HTML 속성 srcset과 sizes을 활용하여 반응형 이미지 구현

[Responsive] 반응형 이미지 작업 / img 태그 속성(srcset, sizes, picture)