PNG를 WEBP로 변환

WebP는 Google이 개발한 차세대 이미지 형식으로, JPG와 PNG 모두를 대체하기 위해 만들어졌습니다. 2010년 출시되고 Web Hypertext Application Technology Working Group(WHATWG)에 표준화된 WebP는 뛰어난 압축 효율을 제공합니다. 같은 시각 품질을 유지하면서 보통 PNG보다 25~35% 더 작고, 같은 품질의 JPG보다 25~35% 더 작습니다. 이는 웹 우선 최적화에 이상적입니다.

Google의 자체 데이터에 따르면 PNG에서 WebP로 변환하면 평균 26%의 이미지 파일 크기 감소를 볼 수 있습니다. 이는 규모에 따라 매우 중요합니다. 1000개 이미지가 있는 웹사이트는 WebP로 변환하여 총 파일 크기에서 260MB 이상을 절약합니다. 모바일 연결이 느린 사용자에게는 매 킬로바이트가 중요합니다. 더 작은 파일은 더 빠른 페이지 로드, 낮은 대역폭 사용, 더 나은 사용자 경험을 의미합니다. 특히 대역폭이 제한되거나 비싼 신흥 시장에서 중요합니다.

Core Web Vitals과 SEO는 이미지 파일 크기에 직접 영향을 받습니다. Google의 LCP(Largest Contentful Paint) 지표는 가장 큰 보이는 페이지 요소가 표시될 때를 측정합니다. 더 빠른 LCP는 SEO 순위를 개선합니다. PNG 이미지를 WebP로 변환하면 다운로드해야 할 바이트 수를 줄임으로써 LCP를 가속화합니다. 이는 사이트를 재구성하지 않고 Core Web Vitals을 개선하는 가장 직접적이고 영향력 있는 방법 중 하나입니다.

WebP는 손실 및 무손실 압축 모드를 모두 지원합니다. 무손실 WebP는 이미지 품질을 정확하게 보존하지만(PNG처럼), 25~35% 더 작은 파일입니다. 손실 WebP는 훨씬 더 효율적입니다(JPG처럼), 가변 품질 트레이드오프를 제공합니다. 이 유연성은 WebP가 PNG와 JPG를 모두 대체할 수 있으며 종종 둘 다 능가합니다. 이미지 유형과 품질 요구 사항에 따라 변환할 때 압축 모드를 선택합니다.

WebP에 대한 브라우저 지원은 2020년 이후 상당히 성숙했습니다. Chrome, Edge, Firefox는 광범위한 WebP 지원을 가집니다. Safari는 iOS와 macOS의 Safari 16(2022년)에서 WebP 지원을 추가했습니다. 주요 예외는 구형 브라우저 버전과 여전히 작지만 실제 사용자 기반이 있는 Internet Explorer입니다. 최신 모범 사례는 HTML의 `<picture>` 요소 또는 동적 제공의 `Accept` 헤더를 사용하여 WebP를 제공하되 JPG나 PNG 폴백을 제공하는 것입니다.

WebP의 투명성 지원은 JPG보다의 큰 장점입니다. WebP의 무손실 모드는 알파 채널을 보존하므로 WebP의 우수한 파일 크기와 PNG의 투명성 이점을 얻습니다. 이는 로고, 아이콘, 그래픽에 필수적입니다. 손실 WebP도 투명성을 지원할 수 있지만 약간의 품질 트레이드오프가 있습니다. 현재 투명성을 위해 PNG를 사용하는 이미지는 웹P가 상당한 크기 개선이 될 것 같습니다.

애니메이션된 WebP는 PNG가 할 수 없는 또 다른 기능입니다. PNG는 정적 이미지만 저장할 수 있습니다(APNG를 사용하지 않으면, 지원이 제한됨). WebP는 애니메이션을 기본으로 지원하며 GIF보다 더 나은 압축을 제공합니다. 이는 작은 반복 비디오, SNS 클립, 대화형 그래픽에 이상적입니다. 이는 정적 이미지 이상의 새로운 창의적 가능성을 열어줍니다.

CDN과 캐시 최적화는 WebP 채택의 이점을 누립니다. Content Delivery Network와 캐싱 계층은 가능한 브라우저에 WebP를 제공하고 구형 클라이언트에 폴백 형식을 제공할 수 있습니다. 이 지능형 배달은 WebP의 더 작은 크기와 결합되어 성능 이득을 복합합니다. 브라우저 캐싱도 파일이 더 작을 때 더 효과적으로 작동합니다.