이미지 최적화: 2025 이미지 포맷 가이드 -JPEG, PNG, WebP, AVIF
이미지는 웹에서 가장 중요한 요소 중 하나입니다. 빠른 로딩 속도, 뛰어난 화질, 유연한 포맷 선택은 사용자 경험과 SEO에 모두 큰 영향을 미칩니다. 오늘은 JPEG, PNG, WebP, 그리고 최신 기술인 AVIF 포맷의 역사와 성능을 비교 분석하며, 현시점 최고의 이미지 전송 전략에 대해 이야기 해보겠습니다.
1. 이미지 포맷의 역사
1-1. JPEG (Joint Photographic Experts Group)
JPEG는 1992년에 탄생한 이미지 포맷으로, 디지털 사진 압축의 표준을 정립한 포맷입니다. 이름에서도 알 수 있듯이, JPEG는 디지털 사진 전문가 그룹에 의해 개발되었습니다. 이 포맷은 손실 압축 방식을 사용하여 이미지의 파일 크기를 크게 줄일 수 있다는 점에서, 인터넷 초창기부터 널리 채택되었습니다.
JPEG의 가장 큰 장점은 작은 파일 크기와 넓은 호환성입니다. 사진과 같이 복잡한 색상 정보를 가진 이미지를 효과적으로 압축하면서도 시각적인 품질을 유지하는 데 뛰어난 성능을 보입니다. 하지만, 투명도를 지원하지 않는다는 점과, 반복적으로 저장할수록 품질이 점진적으로 저하된다는 단점이 있습니다. 그럼에도 불구하고, JPEG는 여전히 사진 중심의 디지털 콘텐츠에서 가장 많이 사용되는 포맷입니다.
1-2. PNG (Portable Network Graphics)
PNG는 1996년에 개발되었으며, GIF 포맷의 한계를 극복하고자, Thomas Boutell을 중심으로 한 개발자 그룹에서 만들어졌습니다. PNG는 무손실 압축을 제공하며, 이미지 품질을 100% 유지하면서도 비교적 효율적인 파일 크기를 제공합니다. 이와 함께, 투명도(알파 채널)를 지원하는 기능은 PNG를 로고, 아이콘, 그래픽 이미지와 같은 정밀한 디테일이 중요한 작업에 적합한 포맷으로 자리 잡게 했습니다.
PNG의 주요 장점은 투명도와 무손실 압축 덕분에 이미지 품질을 유지할 수 있다는 것입니다. 그러나 파일 크기가 상대적으로 크기 때문에, 사진보다는 그래픽 이미지나 로고 등에 주로 사용됩니다. JPEG와 달리 손실 압축 방식은 지원하지 않으므로, 이미지 품질은 유지되지만 파일 크기 문제로 웹 최적화에서는 한계를 보일 수 있습니다.
1-3. WebP(Web Picture)
WebP는 2010년 구글에서 개발한 포맷으로, JPEG와 PNG의 장점을 결합하려는 의도로 만들어졌습니다. 이 포맷은 손실 및 무손실 압축을 모두 지원하며, JPEG처럼 사진을 효율적으로 압축할 수 있고, PNG처럼 투명도도 제공합니다. WebP는 현대적인 웹사이트의 속도 최적화를 염두에 두고 설계된 포맷으로, 같은 품질의 이미지를 JPEG나 PNG보다 훨씬 작은 파일 크기로 저장할 수 있습니다.
WebP의 가장 큰 강점은 고효율 압축입니다. JPEG와 비교했을 때 약 30% 더 작은 파일 크기를 제공하면서도 품질 손실은 미미합니다. 또한, PNG의 투명도를 지원해 그래픽과 로고 등 다양한 용도로 사용할 수 있습니다. 그러나 WebP는 개발 초기 일부 오래된 브라우저에서 지원되지 않는 문제가 있었습니다. 현재는 브라우저 지원이 크게 개선되었지만, 아주 구형 브라우저를 지원해야 하는 환경에서는 제약이 있을 수 있습니다.
1-4. AVIF (AV1 Image File Format)
AVIF는 2018년에 등장한 최신 이미지 포맷으로, Alliance for Open Media(AOM)에서 개발한 AV1 비디오 코덱을 기반으로 합니다. AVIF는 현재 사용 가능한 이미지 포맷 중에서 가장 뛰어난 압축 효율을 자랑하며, HDR(High Dynamic Range)과 같은 최신 기능까지 지원합니다.
AVIF는 같은 화질의 이미지를 WebP보다 약 30% 더 작은 크기로 저장할 수 있으며, HDR 콘텐츠를 지원하기 때문에 색상과 밝기를 보다 풍부하게 표현할 수 있습니다. 이 때문에 AVIF는 앞으로의 웹 이미지를 주도할 포맷으로 주목받고 있습니다.
그러나, AVIF는 인코딩 속도가 느리다는 단점이 있습니다. 이는 이미지 생성 시간이 길어질 수 있다는 의미로, 실시간 변환이 중요한 환경에서는 제약이 될 수 있습니다. 또한, AVIF는 등장한 지 비교적 얼마 되지 않아 브라우저와 소프트웨어 지원이 아직 진행 중이라는 점도 고려해야 합니다.
HDR은 고화질의 5요소 중 밝기를 다루는 기술입니다. 다른 요소들은 HD에서 UHD로 넘어가면서 표준이 개선되었지만, 밝기는 SDR(Standard Dynamic Range)에서 변화가 없었습니다. HDR의 도입으로 이제 밝기 또한 큰 발전을 이루었으며, 인간의 눈이 인식할 수 있는 밝기의 범위를 더욱 충실히 표현할 수 있게 되었습니다. 고화질 이미지의 5요소에 대해 궁금하시다면 cgkorea의 게시글을 추천드립니다.
또한, AVIF의 브라우저 지원율도 궁금하실 텐데요. 메인 브라우저(Chrome, Firefox, Edge, Safari, Opera)를 기준으로, 대부분 2020년에서 2022년 사이부터 AVIF 지원을 시작했습니다. 현재 메인 브라우저의 시장 점유율은 2024년 1월 기준으로 데스크톱 브라우저에서 약 94%, 모바일 브라우저에서 약 89%에 달합니다. [출처]
2. 현 시점에서 최고의 이미지 전송 전략
구형 브라우저에 대한 지원을 고려하지 않는다면, AVIF가 최선의 선택입니다. AVIF는 가장 높은 압축 효율과 뛰어난 화질을 제공하며, HDR 지원으로 색상과 밝기의 표현력까지 뛰어납니다. 현재 주요 브라우저의 지원율도 높아지고 있어 최신 환경에서는 안정적이고 효율적인 옵션입니다.
구형 브라우저 지원이 필요하다면 WebP와 PNG를 대체 포맷으로 함께 사용하는 것이 적합합니다. WebP는 AVIF를 지원하지 않는 브라우저에서도 뛰어난 효율성을 제공하며, PNG는 모든 브라우저에서 확실한 호환성을 보장합니다.