웹사이트의 이미지는 평균적으로 페이지 용량의 50% 이상을 차지해요. 이미지를 효율적으로 압축·변환하면 페이지 속도가 빨라지고 SEO 점수도 올라갑니다. 어떤 포맷을 언제 쓸지 정리해 드릴게요.
JPEG vs PNG - 가장 흔한 두 포맷
JPEG는 사진처럼 "색상이 풍부한 이미지"에 적합해요. 손실 압축이라 용량이 작지만 약간의 화질 저하가 있습니다. PNG는 "투명도가 필요한 이미지"나 "단순한 그래픽"에 적합해요. 무손실 압축이라 화질이 보존되지만 용량이 큽니다.
WebP - 현재의 표준
WebP는 구글이 개발한 차세대 포맷으로 같은 화질에서 JPEG·PNG 대비 25~35% 작은 용량이에요. 모든 모던 브라우저(크롬, 파이어폭스, 사파리)가 지원하고, 손실·무손실·투명도·애니메이션을 모두 지원합니다. 현재 가장 권장되는 "현실적인 표준" 포맷이에요. 이미지 변환 도구에서 WebP 변환이 가능해요.
AVIF - 미래의 표준
AVIF는 차세대 비디오 코덱 AV1을 기반으로 한 이미지 포맷이에요. 같은 화질에서 WebP보다 추가로 20% 작은 용량을 보여 줍니다. 단점은 인코딩 시간이 길고 브라우저 지원이 아직 100%는 아니라는 점이에요. 2025년 기준 약 90%의 사용자가 AVIF를 볼 수 있습니다.
포맷 선택 - 사용처별
사진 갤러리: WebP > JPEG. 로고·아이콘: SVG > WebP > PNG. 스크린샷: WebP > PNG. 애니메이션: WebP 애니메이션 > GIF. SVG는 벡터라 무한 확대해도 깨지지 않아 로고·아이콘에 가장 좋아요. 사용 목적에 맞는 포맷을 선택하면 용량과 화질을 모두 잡을 수 있어요.
압축률 vs 화질 균형
이미지 압축은 "품질(quality) 매개변수"를 통해 조절해요. JPEG 90~95%는 "고품질", 75~85%는 "표준", 60~70%는 "저용량"이에요. 일반 웹 이미지는 80% 정도가 화질·용량 균형이 가장 좋습니다. 사람의 눈은 10% 화질 저하를 거의 인지하지 못해요.
반응형 이미지 - srcset 활용
같은 이미지를 데스크톱은 1920px, 모바일은 750px로 다른 사이즈로 제공하면 모바일 사용자가 작은 파일을 받아 페이지가 빨라져요. HTML의 <img srcset="..." sizes="..."> 속성을 활용하면 자동으로 적절한 사이즈가 선택됩니다. 디자인·CSS 가이드에서 반응형 디자인 팁도 확인할 수 있어요.
지연 로딩 (Lazy Loading)
페이지에 이미지가 많다면 "지연 로딩"을 활용해 화면에 보이는 이미지만 우선 다운로드하세요. HTML의 loading="lazy" 속성으로 한 줄에 적용 가능해요. 첫 로딩 속도가 크게 빨라지고 사용자 경험이 개선됩니다.
SEO와 이미지
구글은 "페이지 속도"와 "이미지 최적화"를 SEO 평가 지표로 사용해요. WebP·AVIF 도입, 적절한 alt 텍스트, 이미지 사이즈 최적화는 모두 검색 순위에 영향을 줍니다. 또 alt 텍스트는 시각 약자를 위한 접근성에도 필수이니 빠뜨리지 마세요.
이미지 변환 도구
온라인 변환 도구로는 이미지 변환기, Squoosh(구글), CloudConvert가 인기예요. 일괄 변환은 ImageMagick·Sharp 같은 명령행 도구가 강력합니다. 사용 환경에 맞춰 도구를 선택하세요. 또 자동화된 빌드 파이프라인에서는 "자동 압축" 플러그인을 사용하면 매번 수동 변환할 필요가 없어요.
