최적화 흐름

이미지 최적화 점검 순서

이미지 최적화 결과는 컴포넌트 속성만으로 나오지 않습니다. 업로드 전 원본을 정리하고, 화면 조건에 맞게 `Image` 속성을 정한 뒤, 전송 결과와 Core Web Vitals를 함께 확인해야 합니다.

01 이미지 용도 분류 첫 화면, 본문, 아이콘, 외부 이미지인지 먼저 나눕니다.

02 원본 준비 최대 표시 크기에 맞춰 리사이즈하고 적절한 파일 형식을 고릅니다.

03 Image 속성 결정 alt, width, height, fill, sizes, quality, priority를 선택합니다.

04 Next 최적화 요청 폭에 맞는 리소스와 효율적인 형식으로 전달합니다.

05 브라우저 확인 로딩 시점, 레이아웃 안정성, 전송량을 실제 화면에서 봅니다.

추가 팁을 적용하는 위치

파일 형식 사진, 로고, 아이콘의 성격에 따라 선택합니다.

자리표시자 이미지가 보이기 전 빈 구간의 체감을 완화합니다.

캐싱 CDN과 서버 설정으로 반복 요청 비용을 줄입니다.