본문 바로가기

2026년에도 WebP는 여전히 쓸 가치가 있을까요?

이제 브라우저 지원이 보편화되었으므로, 질문은 WebP를 사용할 수 있는지 여부에서 AVIF가 WebP를 대체했는지 여부로 옮겨갔습니다.

네, WebP는 2026년에도 여전히 사용할 가치가 있으며, 웹사이트 이미지의 가장 안전한 기본 형식으로 남아 있습니다. 브라우저 지원이 보편화되었고, 동일한 화질에서 파일 크기가 JPEG보다 25~35% 더 작으며, AV1 Image File Format (AVIF)가 이를 완전히 대체하지는 못했습니다.

과거 WebP에 대한 가장 큰 반론은 브라우저 지원 문제였으나, 그 논쟁은 이제 끝났습니다. Chrome, Firefox, Safari, Edge 모두 데스크톱과 모바일에서 이 형식을 완벽히 지원합니다. 이제 흥미로운 질문은 AVIF가 WebP를 불필요하게 만들었는가 하는 것이며, 이에 대한 대답은 '아직은 아니며, 앞으로도 완전히는 아닐 것'입니다.

WebP가 실제로 얼마나 더 작은가

WebP는 일반적으로 시각적 화질이 동일할 때 JPEG 대비 25~35%, PNG 대비 20~30%의 용량을 절감합니다. 부드러운 영역이 있는 사진이나 단색 위주의 그래픽에서 절감 효과가 가장 크게 나타납니다.

이미지 유형원본 형식WebP 변환 시절감률
제품 사진JPEG 420 KB290 KB31%
히어로 배너JPEG 850 KB560 KB34%
투명도가 있는 로고PNG 84 KB31 KB63%
텍스트가 포함된 스크린샷PNG 210 KB148 KB30%
5 KB 미만의 작은 아이콘PNG 3 KB3.4 KB더 커짐

마지막 행은 WebP가 손해를 보는 유일한 사례를 보여줍니다. 약 5 KB 미만에서는 형식 자체의 오버헤드가 압축으로 인한 이점보다 커지기 때문에, 작은 아이콘은 PNG로 그대로 두거나 벡터 그래픽으로 대체하는 것이 더 나은 경우가 많습니다.

WebP 대 AVIF

AVIF는 대형 사진에서 WebP보다 약 20~30% 더 강력하게 압축하지만, 인코딩 속도가 훨씬 느리고 10 KB 미만에서는 종종 용량이 더 큽니다. 두 형식은 서로를 대체하기보다는 서로 다른 이미지 유형에 적합합니다.

AVIF는 더 많은 컨테이너 오버헤드를 수반하므로 큰 사진에서는 확실히 유리하지만 작은 그래픽에서는 불리합니다. 인코딩 시간도 고려해야 할 사항인데, AVIF는 이미지당 몇 배 더 오래 걸릴 수 있기 때문입니다. 500개의 파일을 일괄 처리할 때 이 차이는 초 단위가 아니라 분 단위로 벌어지며, 이는 라이브러리를 반복해서 변환해야 할 때 중요한 문제가 됩니다.

상황별 적합한 형식 선택

  • 히어로 이미지 및 대형 사진. 압축 이점이 가장 큰 AVIF를 사용합니다.
  • 일반 사이트 이미지. 인코딩이 빠르고 보편적으로 지원되는 WebP를 사용합니다.
  • 투명도가 있는 로고 및 그래픽. PNG보다 용량을 대폭 줄여주는 WebP를 사용합니다.
  • 5 KB 미만의 아이콘. 최신 이미지 형식들은 오버헤드를 추가하므로 PNG나 벡터 그래픽을 사용합니다.
  • 다운로드용 또는 이메일 첨부용 파일. 브라우저 외부에서의 지원이 아직 미비하므로 JPEG나 PNG를 사용합니다.

JPEG는 할 수 없고 WebP는 할 수 있는 것

WebP는 투명도 지원과 손실 압축을 동시에 제공하며, 이는 JPEG나 PNG 모두 불가능한 기능입니다. 이 조합은 실제로 매우 유용하며 간과하기 쉽습니다.

이전에는 배경이 투명한 제품 사진을 쓸 때 무거운 PNG를 쓰거나, 뒤에 흰색 상자가 있는 JPEG를 쓰는 것 중 하나를 선택해야 했습니다. WebP는 이러한 고민을 없애줍니다. 또한 이 형식은 애니메이션도 지원하므로, 움직이는 GIF를 아주 작은 파일 크기로 직접 대체할 수 있습니다.

WebP가 여전히 문제를 일으키는 곳

WebP는 브라우저 외부, 이메일 클라이언트, 업로드 양식, 인쇄 워크플로 및 구형 디자인 소프트웨어에서 제대로 작동하지 않습니다. 브라우저 지원으로 웹 환경은 해결되었지만 그 외의 영역은 그대로 남아 있습니다.

가장 흔한 실패 사례는 프레스 키트입니다. 기자가 WebP 로고를 다운로드한 뒤 자신의 레이아웃 소프트웨어에 배치하지 못하는 경우가 발생합니다. 정부 포털도 두 번째 사례로, 이 형식을 완전히 거부하곤 합니다. 브라우저 지원 표보다는 최종 목적지를 기준으로 판단하십시오. 브라우저 문제는 수년 전에 해결되었지만 다른 영역의 문제는 그렇지 않기 때문입니다.

사이트를 WebP로 전환하는 방법

오류 없이 웹사이트를 WebP로 전환하려면 다음 6단계를 따르십시오.

  1. 대부분의 라이브러리에는 아무 곳에서도 링크되지 않은 파일들이 쌓여 있으므로, 페이지가 실제로 참조하는 이미지 목록을 작성합니다.
  2. 변환하기 전에 각 이미지를 실제 표시될 너비의 2배(고해상도 화면용) 크기로 조정합니다.
  3. 파일 크기가 작아지면서도 화질 저하가 눈에 보이지 않는 지점인 품질 80으로 WebP 변환을 진행합니다.
  4. 원본 JPEG 또는 PNG 파일을 삭제하지 말고 대체용(fallback)으로 보관합니다.
  5. picture 요소를 통해 두 형식을 모두 제공하되, WebP를 먼저 배치하고 img 태그에 원본을 넣습니다.
  6. 무언가를 삭제하기 전에 모바일과 데스크톱 브라우저에서 페이지를 확인합니다.

대부분의 콘텐츠 시스템은 이제 업로드 시 이 마크업을 자동으로 생성하므로, 직접 코드를 작성하기 전에 사용 중인 플랫폼이 이미 지원하는지 확인해 보십시오. 이미지를 변환하는 데는 몇 분밖에 걸리지 않지만, 템플릿을 다시 작성하는 데는 더 오랜 시간이 걸립니다.

어떤 품질 설정을 사용해야 할까

품질 80은 WebP의 가장 적절한 기본값입니다. 이 형식은 동일한 설정 값에서 JPEG보다 디테일을 더 잘 유지하기 때문입니다. 품질 80의 WebP 파일은 품질 85 이상의 JPEG와 시각적으로 비슷해 보입니다.

70 미만으로 내려가면 특히 큰 이미지에서 인물의 얼굴이나 부드러운 그라데이션에 화질 저하가 나타나기 시작합니다. 품질 90을 넘어가면 시각적인 이점은 거의 없는 반면 파일 크기는 급격히 늘어납니다. 일괄 변환을 시작하기 전에 대표적인 이미지 하나를 세 가지 설정으로 테스트해 보십시오. 적절한 수치는 게시하는 이미지의 종류에 따라 다릅니다.

WebP가 검색 순위에 도움이 될까

WebP는 검색엔진이 이 형식 자체를 선호해서가 아니라, 순위 결정 요소인 페이지 속도를 개선함으로써 간접적으로 도움을 줍니다. 어떤 검색엔진도 특정 파일 확장자 자체에 가산점을 주지는 않습니다.

그 경로는 Core Web Vitals를 거치게 되는데, 여기서 Largest Contentful Paint 측정값은 대개 단 하나의 히어로 이미지에 의해 결정됩니다. 이 이미지의 용량을 3분의 1로 줄이면 측정값이 즉시 개선됩니다. 또한 Lighthouse는 '차세대 형식을 사용하여 이미지 제공하기' 경고를 표시하는데, 이는 WebP나 AVIF를 사용하면 해결되며 통과하기 비교적 쉬운 감사 항목 중 하나입니다.

기존 라이브러리를 변환할 가치가 있을까

이미지가 페이지 용량의 대부분을 차지하는 경우 변환하십시오. 이는 거의 모든 콘텐츠 사이트와 온라인 쇼핑몰에 해당합니다. 페이지가 이미 가볍거나 이미지가 적고 크기가 작다면 건너뛰어도 좋습니다.

결정하기 전에 확인해 보십시오. 개발자 도구를 열고 Network 탭으로 이동한 뒤, 이미지로 필터링하고 일반적인 페이지를 새로고침합니다. 이미지 총용량이 1 MB 이상이라면 변환 시 눈에 띄는 개선 효과를 볼 수 있습니다. 총용량이 200 KB 수준이라면 그 노력은 페이지의 다른 부분을 개선하는 데 쓰는 것이 좋습니다.

손실 및 무손실 WebP는 서로 다른 모드입니다

WebP에는 두 가지 별도의 압축 모드가 있으며, 잘못 선택하면 원본보다 더 큰 파일이 생성될 수 있습니다. 손실(lossy) 모드는 사진에 적합하고, 무손실(lossless) 모드는 스크린샷, 로고 및 단색 그래픽에 적합합니다.

대부분의 도구는 품질 설정에 따라 모드를 선택하며, 품질 100에서는 무손실을 적용하고 그 미만에서는 손실을 적용합니다. 이 기본값은 사진에는 잘 작동하지만 그래픽에서는 실패합니다. 스크린샷을 손실 WebP로 변환하면 텍스트 주변에 번짐 현상이 생기면서도 무손실 버전보다 용량이 더 커질 수 있습니다. 변환된 그래픽이 대체하려던 PNG보다 크게 나온다면 도구가 어떤 모드를 사용했는지 확인해 보십시오.

WebP 도입 시 흔히 하는 실수

  • 크기 조정을 먼저 하지 않고 변환하는 것. 이미지 해상도가 파일 크기를 크게 좌우하므로, 4000 픽셀 크기의 WebP는 여전히 너무 무겁습니다.
  • 원본을 삭제하는 것. 대체용 이미지 제공 및 향후 재내보내기 모두 무손실 원본이 필요하므로 원본을 보관하십시오.
  • 이미 압축된 JPEG를 변환하는 것. 그 결과물은 한 번이 아니라 두 번의 손실 과정을 거치게 되어 화질이 더 나빠집니다.
  • 다운로드용 파일에 WebP를 사용하는 것. 프레스 키트, 템플릿 및 인쇄용 파일은 JPEG나 PNG로 유지해야 합니다.
  • 아주 작은 아이콘을 변환하는 것. 5 KB 미만에서는 형식 오버헤드로 인해 파일이 오히려 더 커집니다.

한 번에 라이브러리 변환하기

손실 압축 단계를 거칠 때마다 디테일이 손실되므로, 중간 형식을 거치지 말고 원본 형식에서 직접 변환하십시오. HEIC에서 JPEG를 거쳐 WebP로 가면 한 번이면 될 손실 과정을 두 번 거치게 됩니다.

최대 500개의 파일을 한 번에 넣거나 ZIP 압축 파일을 직접 끌어다 놓으면, 지원되는 모든 이미지가 한 번에 변환됩니다. 이 작업은 서버로 파일을 전송하지 않고 사용자 브라우저 내의 자체 프로세서에서 실행됩니다. 따라서 고객 라이브러리를 계약 하에 다루는 대행사의 경우, 정보 유출 우려를 줄이는 수준을 넘어 원천적으로 방지할 수 있습니다.

블로그로 돌아가기