투명도를 유지하며 PNG 용량 줄이는 법

PNG는 무손실 포맷이라 로고·아이콘·스크린샷, 그리고 투명 배경이 필요한 이미지에 안성맞춤입니다. 하지만 바로 그 무손실 특성 때문에 PNG 파일은 의외로 무거워질 수 있으며, 특히 사진에서 그렇습니다. 특히 스크린샷이나 배너처럼 큰 PNG는 페이지 로딩을 눈에 띄게 느리게 만들 수 있어 올바른 최적화가 중요합니다. 이미지를 망치지 않으면서 용량을 줄이는 법을 알아봅니다.

PNG가 커지는 이유

PNG는 모든 픽셀을 그대로 보존하기 때문에 JPEG나 WebP처럼 정보를 버릴 수 없습니다. 색이 적은 평면 그래픽에는 효율적이지만, 미묘한 색 변화가 수백만 개인 사진에서는 손실 포맷 대비 몇 배까지 커질 수 있습니다.

PNG를 줄이는 방법

1. 애초에 PNG가 맞는지 확인

PNG가 사실 사진이라면 거의 항상 잘못된 포맷입니다. WebP나 JPEG로 바꾸면 용량이 크게 줄어듭니다. 또렷한 경계나 투명 배경이 필요할 때만 PNG를 유지하세요.

2. 무손실 최적화 적용

도구를 이용하면 PNG의 데이터를 더 효율적으로 다시 묶고 불필요한 메타데이터를 제거하면서 픽셀은 하나도 바꾸지 않을 수 있습니다. 안전하며 PNG로 유지할 그래픽에는 늘 해둘 만합니다.

3. 무손실 WebP로 변환

무손실 WebP는 화질과 투명도를 그대로 지키면서 대개 PNG보다 작습니다. 최신 웹에서는 또렷한 경계, 알파 채널, 작은 용량이라는 세 가지를 모두 얻는 최선의 선택인 경우가 많습니다.

투명도를 지키는 법

핵심 규칙은 알파 채널을 지원하는 포맷으로만 변환하는 것입니다. PNG와 WebP는 지원하지만 JPEG는 지원하지 않습니다. 투명 이미지를 JPEG로 바꾸면 투명 영역이 단색 배경으로 채워집니다. 그러니 로고·아이콘은 PNG나 WebP를 쓰세요.

실전 워크플로우

그래픽은 PNG 유지 또는 무손실 WebP로 바꾸고 최적화를 돌리세요. PNG로 저장된 사진은 WebP나 AVIF로 변환하세요. Scrunch에서는 PNG를 올려 WebP를 고르고, 다운로드 전에 원본과 결과를 비교할 수 있습니다. 모두 브라우저 안에서요.

자주 묻는 질문

PNG를 WebP로 바꾸면 투명도가 유지되나요?

네. WebP는 알파 채널을 지원하므로 투명 배경이 그대로 유지됩니다. 반면 JPEG로 바꾸면 투명 영역이 단색으로 채워지므로, 투명 이미지는 반드시 PNG나 WebP를 쓰세요.

무손실 WebP와 손실 WebP 중 무엇을 쓸까요?

로고·아이콘처럼 경계가 또렷한 그래픽은 무손실 WebP가 안전합니다. 사진에 가까운 이미지는 손실 WebP가 훨씬 작습니다. 이미지 성격에 따라 고르세요.

PNG 최적화만으로 얼마나 줄어드나요?

무손실 최적화는 픽셀을 바꾸지 않으면서 불필요한 데이터와 메타데이터를 제거해 보통 수~수십 퍼센트를 줄입니다. 큰 절감이 필요하면 포맷 자체를 WebP로 바꾸는 편이 효과적입니다.

스크린샷은 어떤 포맷이 좋나요?

텍스트와 UI가 또렷한 스크린샷은 무손실 PNG나 무손실 WebP가 적합합니다. 다만 사진이 많이 포함된 스크린샷이라면 손실 WebP가 훨씬 작으면서도 충분히 선명할 수 있으니 두 방식을 비교해 보세요.