웹사이트가 느린 이유, 이미지가 80%다
웹페이지 전체 용량에서 이미지가 차지하는 비중은 평균 60~80%에 달합니다. 아무리 코드를 최적화하고 서버를 업그레이드해도, 이미지 파일 자체가 무거우면 로딩 속도는 개선되지 않습니다. 특히 모바일 환경에서 대용량 이미지는 데이터 소모와 배터리 소모까지 유발합니다.
해결책은 의외로 간단합니다. 이미지 포맷을 바꾸는 것만으로도 극적인 변화를 만들 수 있습니다.
JPG와 PNG, 이제는 구시대의 유산
JPG는 1992년, PNG는 1996년에 탄생한 포맷입니다. 30년 가까이 웹의 표준으로 군림했지만, 압축 효율 면에서 한계가 명확합니다. JPG는 압축률을 높이면 눈에 띄는 화질 저하가 생기고, PNG는 투명 배경을 지원하지만 파일 크기가 지나치게 큽니다.
2024년 기준 전 세계 브라우저의 97% 이상이 WebP를 지원하고, AVIF도 90%를 넘어섰습니다. 이제 호환성 걱정 없이 차세대 포맷으로 전환할 수 있는 환경이 된 것입니다.
WebP — 구글이 만든 만능 포맷
WebP는 구글이 2010년에 공개한 이미지 포맷으로, JPG 대비 25~35% 더 작은 용량에 동일한 화질을 제공합니다. 손실·무손실 압축을 모두 지원하고, 투명 배경(알파 채널)과 애니메이션까지 가능해 사실상 JPG, PNG, GIF를 하나로 대체할 수 있습니다.
실무에서 가장 큰 장점은 변환이 쉽다는 것입니다. Squoosh, Sharp, imagemin 같은 도구로 기존 이미지를 일괄 변환할 수 있고, WordPress나 Shopify 같은 플랫폼은 업로드 시 자동 변환 기능을 기본 제공합니다.
AVIF — 넷플릭스가 선택한 차세대 표준
AVIF는 AV1 비디오 코덱에서 파생된 이미지 포맷으로, WebP보다 한 단계 더 높은 압축 효율을 자랑합니다. 같은 화질 기준 JPG 대비 용량을 최대 50~80%까지 줄일 수 있으며, 특히 고해상도 사진에서 그 차이가 두드러집니다.
넷플릭스, 구글, 애플 등 대형 기업들이 이미 AVIF를 적극 도입하고 있습니다. 다만 인코딩 속도가 WebP보다 느리기 때문에, 빌드 타임에 미리 변환해두는 전략이 효과적입니다.
실전 적용법 — picture 태그로 단계적 전환
모든 브라우저에서 완벽하게 동작하도록 하려면 HTML의 picture 태그를 활용한 단계적 폴백 전략이 가장 안전합니다. AVIF를 최우선으로 제공하고, 미지원 브라우저에는 WebP, 최종적으로 JPG를 보여주는 방식입니다.
이 방식의 장점은 기존 이미지를 삭제할 필요 없이, 새로운 포맷을 추가하는 것만으로 최적화가 완료된다는 점입니다. 리스크 없이 점진적으로 적용할 수 있어 운영 중인 사이트에도 바로 도입할 수 있습니다.
자동화가 핵심이다
이미지를 하나하나 수동으로 변환하는 것은 비현실적입니다. 실무에서는 자동화 파이프라인을 구축하는 것이 핵심입니다. CI/CD 과정에서 이미지를 자동 변환하거나, CDN 레벨에서 클라이언트 브라우저에 맞는 최적 포맷을 자동 제공하는 방법이 가장 효율적입니다.
Cloudflare, Vercel, AWS CloudFront 같은 주요 CDN은 이미 이미지 자동 최적화 기능을 제공하고 있습니다. 별도의 개발 없이 설정만으로 적용할 수 있어, 기술 리소스가 부족한 소규모 비즈니스도 충분히 활용 가능합니다.
이미지 최적화, 가장 쉬운 성능 개선
코드 리팩토링이나 서버 인프라 변경 없이, 이미지 포맷 전환만으로 페이지 로딩 속도 30~50% 개선을 기대할 수 있습니다. 이는 SEO 점수 향상, 이탈률 감소, 전환율 증가로 직결되는 변화입니다.
CYAN에서도 모든 프로젝트에 차세대 이미지 포맷 적용을 기본으로 하고 있습니다. 작은 변화 하나가 사용자 경험 전체를 바꿀 수 있다는 것을 매번 실감하고 있기 때문입니다. 웹사이트 속도가 고민이라면, 이미지 포맷부터 점검해보시길 권합니다.