[Responsive] 반응형 이미지 작업 / 기본

이미지 사이즈와 용량 최적화

1. 적절한 해상도 선택

• 화면 크기 및 해상도에 따라 다른 크기의 이미지를 제공
• 큰 이미지를 무조건 로드하면 성능 저하 → 용량이 크고 로딩 속도 느림

2. 압축과 최적화

• 상황에 따른 압축방식 사용
• 이미지 최적화 도구(예: TinyPNG, ImageOptim) 활용

구분	손실 압축 (Lossy)	무손실 압축 (Lossless)
품질	일부 손실, 품질 저하 가능	품질 변화 없음, 완전 동일 복원 가능
용량 감소	크고 강력한 압축 가능	상대적으로 적음
재압축	품질 악화 가능	반복 압축해도 품질 유지
주용도	사진, 복잡한 이미지	아이콘, 로고, 텍스트, 선명한 그래픽
대표 포맷	JPG, WebP (lossy), HEIC	PNG, GIF, SVG, WebP (lossless), TIFF

3. 포맷 선택

• 웹에서 쓰기 좋은 포맷 선택 (WebP 권장)

4. 레티나, 고해상도 디스플레이 대응

• 2배, 3배 해상도 이미지 제공 (예: @2x, @3x 이미지)

---

이미지 접근성과 SEO 고려

1. alt 속성

• 이미지 설명을 넣어 스크린 리더 지원 및 SEO 최적화
• 너무 길게 쓰지 말고 핵심만 간결하게
• 중요한 정보가 이미지에 있다면 반드시 설명 포함
• SEO에도 긍정적으로 작용, 구글 등 검색엔진이 이미지의 맥락을 이해 가능

2. 웹 접근성(Accessibility)

• 장식용 이미지에는 alt="" 빈 문자열로 설정
• 의미있는 이미지에는 정확한 대체 텍스트 작성

---

Lazy Loading(지연 로딩)

• 페이지 내 이미지가 많거나 크기가 클 경우, 한 번에 모두 불러오면 초기 페이지 로딩 속도가 느려짐
• 사용자 경험 저하 및 SEO에도 악영향
• 페이지 로딩 속도 최적화를 위해 화면에 보여질 때 이미지 로드
• 화면에 보이기 전까지 이미지를 로드하지 않고, 필요할 때(스크롤해서 이미지가 화면에 들어올 때) 로드하는 기법
• 초기 로딩 속도를 대폭 개선 가능
• HTML 속성 loading="lazy" 사용 (모던 브라우저 지원)
• JavaScript 라이브러리 활용 가능 (예: Intersection Observer API)

---

이미지 CDN과 자동 변환

• CDN(Content Delivery Network) 사용으로 빠른 이미지 전송
• CDN이 자동으로 크기 조절, 포맷 변환(WebP 변환 등)을 지원하는 경우가 많음
• Netlify, Cloudflare, Imgix, Cloudinary 등이 대표적

---

반응형 디자인 내에서 이미지 배치 고려

• 이미지가 포함된 레이아웃이 유연하게 변하도록 설계
• Flexbox, Grid 등 CSS 레이아웃 기술과 함께 이미지 크기, 위치 조정
• 이미지 비율 유지 중요
• 너무 작게 줄이면 이미지가 흐려질 수 있으니 적정 크기 유지
• 텍스트와 겹치는 영역에서 가독성 고려