"LCP 점수가 낮다면?" 프론트엔드 이미지 최적화 가이드

"웹사이트 로딩 속도의 80%는 이미지에서 결정됩니다."
고해상도 이미지를 쓰면서도 사용자 경험을 해치지 않는 실전 이미지 최적화 기법 3가지를 소개합니다.

1. 차세대 이미지 포맷 사용 (WebP, AVIF)

JPG나 PNG 대신 WebP나 AVIF 형식을 사용하세요. 같은 화질 대비 용량이 30% 이상 줄어듭니다. 대부분의 최신 브라우저에서 지원하며, 호환성이 걱정된다면 <picture> 태그를 사용해 브라우저가 지원하는 포맷을 선택하게 할 수 있습니다.

2. 레이지 로딩 (Lazy Loading)

화면에 보이지 않는 아래쪽 이미지를 미리 불러올 필요는 없습니다. loading="lazy" 속성 하나만 추가해도 브라우저는 사용자가 스크롤을 내려 이미지가 보일 시점에 로딩을 시작합니다. 초기 로딩 속도(First Contentful Paint)를 비약적으로 높여주는 꿀팁입니다.

💡 실무 노트

최적화도 중요하지만 **CLS(Cumulative Layout Shift, 레이아웃 흔들림)**를 방지하는 것도 잊지 마세요. 이미지 용량을 줄여도 이미지 높이/너비 값을 명시하지 않으면 이미지가 로드될 때 화면이 덜컥거리며 내려가는데, 이는 사용자에게 매우 나쁜 경험을 줍니다.

팁: 이미지 태그에 width와 height를 명시적으로 적어주거나, CSS의 aspect-ratio를 활용해 이미지가 들어올 공간을 미리 확보해 두세요. 구글 검색 순위(SEO)에도 큰 영향을 주는 핵심 포인트입니다.

"빠른 서비스가 최고의 UI입니다."