PNG → WebP 변환

PNG의 한계

PNG는 무손실이라 화질은 완벽하지만, 색이 많은 이미지나 사진, 그라데이션이 넓은 이미지에서는 파일이 매우 큽니다. 반투명 그림자나 흐릿한 가장자리가 포함된 UI 이미지도 마찬가지입니다. 웹페이지에 큰 PNG를 여러 개 올리면 첫 화면이 뜨는 시간이 눈에 띄게 길어지고, 모바일 데이터 환경에서는 특히 불리합니다.

WebP는 투명도를 지원한다

WebP는 알파 채널을 지원해 PNG의 투명 배경을 그대로 옮깁니다. 손실 모드로 저장하면 용량이 크게 줄고, 무손실 모드로도 PNG보다 작은 경우가 많습니다. 이 도구는 품질 슬라이더로 손실 정도를 조절합니다. 로고나 아이콘처럼 배경 위에 자연스럽게 얹혀야 하는 이미지도 투명도가 유지되므로 그대로 교체할 수 있습니다.

변환 시 화질 변화

로고·아이콘·일러스트처럼 단색 면과 또렷한 경계가 많은 그래픽은 품질을 높게(85 이상) 두어야 경계 주변 번짐과 색 뭉침을 피할 수 있습니다. 반투명 그림자가 있는 이미지도 품질을 넉넉히 주세요. 사진 계열 PNG라면 70~80으로도 충분합니다. 결과 목록에서 원본 대비 절감률과 미리보기를 확인하며 적정 값을 찾으세요.

플랫폼 사용례

웹사이트 로고, UI 아이콘 세트, 일러스트, 반투명 오버레이 이미지를 WebP로 교체하면 디자인은 유지하면서 로딩이 빨라집니다. 앱 아이콘 소스, 앱스토어 스크린샷, 인쇄용 배너처럼 PNG를 요구하는 곳에는 원본 PNG를 보관하세요. 웹과 인쇄 자산을 분리해 관리하는 편이 좋습니다.

메타데이터

변환 시 부가 메타데이터가 제거됩니다. 원본 PNG와 결과 WebP는 브라우저를 벗어나지 않으며, 파일명이나 용량도 외부로 전송되지 않습니다.

교체 작업을 안전하게 하는 법

웹사이트의 PNG를 WebP로 한꺼번에 바꿀 때는 원본 폴더를 통째로 복사해 두고 작업하세요. 이미지 태그의 파일 경로가 확장자까지 포함하는 경우가 많아, 파일만 바꾸고 경로를 그대로 두면 이미지가 깨집니다. 최근에는 <picture> 태그로 WebP를 우선 제공하고 지원하지 않는 브라우저에는 PNG를 보여주는 방식도 씁니다. 이렇게 하면 두 형식을 모두 보관해야 하므로, 변환 후 결과를 ZIP으로 받아 원본과 같은 이름 구조로 정리해 두면 관리가 쉽습니다. 아이콘처럼 작은 이미지는 절감 효과가 크지 않을 수 있으니, 용량이 큰 배경·일러스트부터 바꾸는 것이 우선순위입니다.