이미지 최적화 가이드

2025년 HTTP Archive 데이터에 따르면 웹 페이지 중간값은 2.3MB 이상이며, 이미지가 약 1.1MB로 거의 절반을 차지합니다. • 페이지 로딩 속도: Google 연구에 따르면 모바일 사용자의 53%가 3초 이상 로딩되는 사이트를 이탈합니다. 불필요한 이미지 데이터 100KB마다 4G 연결에서 약 200ms의 로딩 시간이 추가됩니다. • SEO 순위: Google의 Core Web Vitals(LCP, CLS, FID)는 사용자 경험을 직접 측정하며, 이미지는 Largest Contentful Paint(LCP)의 주요 요인입니다. • 전환율: Portent 연구에 따르면 1초 만에 로딩되는 페이지는 5초 로딩 페이지보다 전환율이 3배 높습니다.

올바른 형식 선택은 가장 영향력 있는 최적화 결정입니다: JPEG • 용도: 사진, 색상이 많은 복잡한 이미지 • 압축: 손실 — 사람이 인식하기 어려운 시각적 세부 사항 제거 • 일반적인 절감: 비압축 대비 60-80% 감소 PNG • 용도: 투명도가 필요한 그래픽, 스크린샷, 텍스트가 많은 이미지 • 압축: 무손실 — 모든 픽셀 완벽 보존 WebP (Google 개발) • 용도: 대부분의 웹 사용 — 최고의 범용 형식 • 장점: 동등한 품질에서 JPEG보다 25-35% 작음 • 브라우저 지원: 97%+ (2026년) AVIF • 용도: 최신 브라우저 지원이 허용될 때 최대 압축 • 장점: JPEG보다 50% 작음, WebP보다 20% 작음 SVG • 용도: 아이콘, 로고, 간단한 일러스트 • 특징: 벡터 형식 — 품질 손실 없이 무한 확대

효과적인 이미지 압축의 핵심은 파일 크기와 시각적 품질 사이의 최적점을 찾는 것입니다. 손실 압축은 사람의 눈이 덜 민감한 데이터를 제거합니다. JPEG의 경우 80-85% 품질에서 원본과 시각적으로 구별할 수 없으면서 50-70% 파일 크기 감소를 달성합니다. 무손실 압축은 같은 데이터를 더 효율적으로 저장하는 방법을 찾아 파일 크기를 줄입니다. 품질 손실이 전혀 없지만 감소폭은 더 제한적입니다(10-30%). 리사이징은 가장 간과되는 최적화입니다. CSS가 이미지를 800×600 픽셀로 표시한다면, 4000×3000 원본을 제공하면 96%의 픽셀이 낭비됩니다. 메타데이터 제거는 각 이미지에 10-50KB를 추가하는 EXIF 데이터를 삭제합니다.

현대 브라우저는 적절한 기기에 적절한 이미지를 제공하는 강력한 도구를 제공합니다. srcset 속성으로 다양한 해상도의 이미지 버전을 지정하면 브라우저가 화면 크기와 픽셀 밀도에 따라 최적 버전을 자동 선택합니다. 예를 들어 400px, 800px, 1200px 버전을 제공하면 브라우저가 최적 버전을 선택합니다. picture 요소는 형식 협상을 가능하게 합니다. AVIF를 지원하는 브라우저에는 AVIF, 폴백으로 WebP, 범용 폴백으로 JPEG를 제공하여 모든 사용자가 최적 형식을 받을 수 있습니다. loading='lazy' 속성으로 지연 로딩을 하면 사용자가 스크롤할 때까지 화면 밖 이미지를 연기합니다. 이미지가 많은 페이지에서 초기 로딩을 30-50% 줄일 수 있습니다. 스크롤 없이 보이는 이미지는 지연 로딩하지 마세요. aspect-ratio CSS 속성은 이미지 로딩 전 공간을 예약하여 레이아웃 이동(CLS)을 방지합니다.

이미지 최적화는 성능뿐만 아니라 Google 이미지 검색을 통한 유입에도 중요합니다. Alt 텍스트: 모든 이미지에 설명적이고 키워드가 풍부한 alt 텍스트를 작성하세요. '가을 낙엽 속에서 놀고 있는 골든 리트리버 강아지'가 '강아지'보다 훨씬 좋습니다. 파일 이름: 설명적이고 하이픈으로 구분된 파일 이름(golden-retriever-puppy-autumn.webp)을 사용하세요. 검색 엔진은 파일 이름을 관련성 신호로 사용합니다. 이미지 사이트맵: 이미지가 콘텐츠에 중요하다면 XML 사이트맵에 포함하세요. CDN(콘텐츠 전송 네트워크): 글로벌 엣지 서버가 있는 CDN에서 이미지를 제공하세요. 사용자에게 가장 가까운 서버에서 이미지를 제공하여 지연 시간을 줄입니다.