이미지 최적화가 웹 성능에 중요한 이유
이미지는 대부분의 웹사이트에서 페이지 무게의 단일 최대 기여자입니다. HTTP Archive에 따르면 중간 웹 페이지는 900KB 이상의 이미지 데이터를 전송하며, 이는 다른 어떤 리소스 유형보다 많습니다. 최적화되지 않은 이미지는 느린 페이지 로드의 주요 원인으로, 사용자 경험과 검색 순위에 직접적으로 영향을 미칩니다.
2021년부터 검색 순위에 직접 영향을 미치는 Google의 Core Web Vitals는 가장 큰 콘텐츠 요소(보통 히어로 이미지)가 화면에 로드되는 속도를 측정하는 LCP(Largest Contentful Paint)를 포함합니다. 느리게 로드되는 이미지는 LCP를 "좋음" 기준인 2.5초를 훨씬 초과할 수 있어 검색 순위에 불이익을 줍니다. 이미지 최적화는 성능뿐만 아니라 SEO에도 필수적입니다.
올바른 이미지 형식 선택하기
올바른 형식을 선택하는 것이 가장 효과적인 최적화 결정입니다. 주요 형식으로는 JPEG, PNG, WebP, AVIF, SVG가 있으며 각각 특정 강점이 있습니다.
JPEG는 사진과 점진적인 색상 그라디언트가 있는 이미지에 이상적입니다. 손실 압축을 사용해 인지하기 어려운 시각 데이터를 버려 작은 파일 크기를 달성합니다. 품질 수준 80의 JPEG는 품질 100과 시각적으로 구분하기 어려우면서 50~70% 더 작습니다.
PNG는 투명도가 필요하거나(다양한 배경의 로고 등) 날카로운 모서리가 있는 이미지(스크린샷, 다이어그램, 텍스트가 많은 그래픽 등)에 적합합니다. 무손실 압축을 사용해 품질 손실이 없지만 파일 크기는 그에 따라 더 큽니다.
WebP는 구글이 개발한 형식으로 손실 및 무손실 압축을 모두 지원하고 PNG처럼 투명도를 처리합니다. WebP 이미지는 동일한 인지 품질에서 JPEG나 PNG보다 일반적으로 25~35% 작습니다. 모든 현대 브라우저가 이제 WebP를 지원하므로 대부분의 웹 이미지의 기본 선택입니다.
AVIF는 AV1 비디오 코덱 기반의 차세대 형식으로 WebP보다 더 높은 압축을 달성합니다. 새 프로젝트에서 현대적인 대상을 위해 AVIF를 고려해야 합니다.
SVG는 기하학적이거나 벡터 기반의 로고, 아이콘, 일러스트레이션에 적합합니다. 해상도 독립적이므로 품질 손실 없이 어떤 크기에서도 선명하게 보이며, 디스플레이 해상도에 관계없이 파일 크기가 작고 일정합니다.
압축: 손실 vs 무손실
손실 압축은 데이터를 영구적으로 제거합니다. JPEG와 손실 모드의 WebP가 이 방식을 사용해 인간의 눈으로 감지하기 어려운 정보를 버립니다. 항상 원본 고해상도 소스 파일을 보관하고 출력용으로만 압축하세요.
무손실 압축은 데이터를 버리지 않고 더 효율적으로 재구성합니다. PNG는 항상 무손실 압축을 사용합니다. OptiPNG, pngquant, Squoosh 같은 도구는 가시적인 품질 변화 없이 팔레트 최적화와 메타데이터 제거를 통해 PNG 파일 크기를 10~30% 더 줄일 수 있습니다.
반응형 이미지: 올바른 크기 제공하기
모바일 브라우저에서 400×300px로 표시될 2000×1500px 이미지는 대역폭을 낭비합니다. HTML의 srcset와 sizes 속성은 다양한 해상도의 여러 이미지 버전에 대해 브라우저에 알려줌으로써 이 문제를 해결합니다.
<picture> 요소는 크기 선택 위에 형식 기반 선택을 추가해 AVIF, WebP, JPEG를 순차적으로 제공할 수 있게 합니다. 이 점진적 향상 접근 방식은 어떤 브라우저도 깨뜨리지 않으면서 최대 최적화를 제공합니다.
지연 로딩: 화면 밖 이미지 지연
지연 로딩은 뷰포트 밖에 있는 이미지의 로딩을 사용자가 해당 이미지 근처로 스크롤할 때까지 연기합니다. 이는 초기 페이지 로드 시간을 극적으로 줄이고 폴드 이하로 스크롤하지 않는 사용자의 대역폭을 절약합니다.
모든 현대 브라우저가 지원하는 네이티브 HTML loading="lazy" 속성은 JavaScript가 필요 없습니다. 폴드 아래의 모든 <img> 태그에 loading="lazy"를 추가하기만 하면 됩니다. 히어로 이미지나 첫 번째 보이는 이미지에는 즉시 로드되도록 항상 loading="eager"를 사용하거나 속성을 생략하세요.
모든 <img> 요소에 명시적인 width와 height 속성을 지연 로딩과 결합하세요. 치수가 없으면 브라우저가 이미지가 로드되기 전에 공간을 예약할 수 없어 CLS(Cumulative Layout Shift)에 영향을 미치는 레이아웃 이동이 발생합니다.
CDN 및 캐싱 전략
콘텐츠 전달 네트워크(CDN)에서 이미지를 제공하면 각 사용자와 지리적으로 가까운 서버에서 전달되어 지연 시간이 줄어듭니다. 이미지가 거의 변경되지 않으므로 버전화된 이미지 URL에 대해 적극적인 HTTP 캐싱을 설정하세요.
지금 사용해보세요 — 무료 온라인 이미지 리사이저
UtiliZest의 이미지 리사이저를 사용하면 브라우저에서 즉시 이미지를 원하는 크기로 조정할 수 있습니다. 서버 업로드나 계정이 필요 없습니다. 픽셀 치수나 백분율로 크기를 조정하고, 비율을 유지하고, 몇 초 만에 최적화된 이미지를 다운로드하세요.