[ Common ] 이미지 최적화 작업 추가 진행

[joohaem]

종류

ISSUE 종류를 선택하세요 ([ ] 안에 x 표시, [x])

• [ ] Refactor (리모델링 재개발)
• [ ] Fix (내가 해결해주지)
• [ ] Bug (삐용삐용 큰일 났어 / 질문)
• [x] Feature (제가 해냈습니다)

내용

1. 이미지 형식 결정

   • [x] webp는 높은 압축률을 통해 사이즈 절감해주지만, 모든 브라우저에서 지원하지는 않는다.
   • [x] -> picture 태그 / source 태그를 이용하여 호환성을 위해 예비 파일들을 로드한다.

2. 적절한 크기의 이미지 사용

   • [ ] srcset / sizes 속성으로써 반응형 이미지를 제공한다.
   • [ ] (Cloudflare?) Image CDN을 사용한다.

3. CLS(누적 레이아웃 변경) 개선

   • [x] width, heigth 값 명시하기

4. 메인 이미지 프리로딩하여 렌더링 시간 단축

체크리스트

• [x] 칸반보드에 있는 에픽 번호를 이슈 이름에 명시
  • EX [ {페이지명} - {세부명} ] 테스트 이슈명
• [x] Assignees / Labels / Milestone 선택
• [ ] ...todos, ...alert