클러스터 C5: 이미지 처리
웹 이미지 최적화 전체 워크플로
이미지 최적화는 한 번의 압축이 아니라 표시 크기, 포맷 정책, 배포 검증까지 포함한 반복 가능한 흐름입니다.
먼저 표시 제약부터 정의하세요
최적화의 시작점은 압축률이 아니라 실제 화면에서 얼마나 크게 보일지입니다. 컨테이너 폭과 비율을 먼저 정하면 불필요하게 큰 자산 전송을 줄일 수 있습니다.
히어로, 카드, 썸네일, 아이콘은 같은 규칙이 아니라 역할별 출력 정책을 가져야 합니다.
포맷 정책과 배포 게이트를 함께 두세요
- 사진은 현대적인 손실 포맷, UI 그래픽과 벡터는 무손실 또는 SVG 를 우선합니다.
- 용량 상한, 반응형 변형, 시각 점검을 배포 체크리스트에 넣습니다.
- 실패 샘플도 QA 에 포함해 기준 초과 이미지가 실제로 차단되는지 확인합니다.
실무 입력/출력 예시
입력
히어로 이미지: 3840x2160, 5.4MB PNG 카드 이미지: 1920x1080, 1.3MB JPG
출력
히어로: 1920x1080 반응형 변형 세트 카드: 800x450, 목표 <180KB