웹사이트용 이미지 최적화 방법
이미지는 일반적으로 페이지 무게의 대부분을 차지합니다. 다섯 가지 결정으로 대부분을 해결할 수 있습니다.
2026년 9월 1일 업데이트됨
이미지는 대부분의 사이트에서 페이지 무게에 가장 큰 영향을 미치며, 대부분의 페이지에서 Largest Contentful Paint 요소는 이미지입니다. 이미지를 최적화하는 것은 가장 효과적인 성능 작업이며, 대부분은 도구보다는 결정에 달려 있습니다.
가장 큰 효과부터 가장 작은 효과 순으로 중요한 순서입니다.
단계
- 1
1. 올바른 크기 제공
이미지가 차지하는 가장 큰 CSS 너비를 측정하고 고밀도 디스플레이를 위해 약 두 배 크기로 내보냅니다. 1200 CSS 픽셀의 히어로 이미지는 6000px 카메라 원본이 아닌 2400px 소스가 필요합니다. 이 한 단계만으로도 일반적으로 다른 모든 것을 합친 것보다 효과가 좋습니다.
- 2
2. WebP 사용, 가능한 경우 AVIF 사용
WebP는 동일한 품질에서 JPEG보다 25~35% 작으며 모든 곳에서 지원됩니다. AVIF는 더 나아가지만 인코딩 속도가 더 느립니다. 매우 오래된 클라이언트를 지원해야 하는 경우 JPEG 대체 이미지를 유지하세요.
- 3
3. 습관이 아닌 콘텐츠에 따라 품질 설정
사진의 경우 75~85. 압축 아티팩트가 더 잘 보이는 날카로운 가장자리가 있는 그래픽의 경우 더 높게 설정합니다. 실제 디스플레이 크기에서 결과를 확인하세요.
- 4
4. 항상 너비와 높이 설정
명시적인 크기를 사용하면 브라우저가 이미지가 로드되기 전에 공간을 예약할 수 있어 레이아웃 이동을 방지합니다. 이는 비용이 들지 않는 누적 레이아웃 이동(CLS) 수정입니다.
- 5
5. 스크롤 아래 부분은 지연 로드하고, 스크롤 위 부분은 절대 지연 로드하지 마세요.
페이지 아래쪽에 있는 이미지에 loading="lazy"를 추가하세요. LCP 이미지에는 지연 로딩을 사용하지 마세요. 측정 대상이 지연됩니다.
내보낼 때 메타데이터 제거
EXIF 및 내장 색상 프로필은 웹에서 렌더링 이점 없이 용량을 추가합니다.
로고 및 아이콘에 SVG 사용
벡터 로고는 일반적으로 몇 킬로바이트에 불과하며 모든 크기와 밀도에서 선명도를 유지합니다.