PNG를 WebP로 변환

이 변환기에 대하여

이 무료 PNG → WebP 변환기는 PNG를 최신 형식인 WebP로 바꾸면서 투명도를 그대로 유지합니다. 여기서의 절감 효과는 보통 JPG보다 훨씬 커서 60~80%가 흔하고, 사진이 담긴 PNG라면 그보다 더 클 수도 있습니다.

모든 처리는 브라우저 안에서 이루어집니다. 이미지가 서버로 업로드되는 일은 없습니다.

PNG 파일이 그토록 커지는 이유

PNG는 무손실입니다. 모든 픽셀이 있는 그대로 정확히 저장되고, 아무것도 버려지지 않습니다. 어떤 이미지에는 알맞은 선택이지만, 다른 이미지에는 매우 값비싼 선택입니다.

PNG는 반복을 찾아내어 압축합니다. 동일한 픽셀이 이어지는 구간, 되풀이되는 패턴 같은 것입니다. 이 방식은 여섯 가지 단색으로 된 로고, 입력 양식의 스크린샷, 깔끔하게 채워진 차트에서는 훌륭하게 작동합니다. 그런 이미지는 원래 크기의 아주 작은 일부까지 압축될 수 있습니다.

반대로 사진에서는 잘 작동하지 않습니다. 사진에는 완전히 똑같은 반복이 거의 없기 때문입니다. 하늘의 픽셀은 저마다 옆 픽셀과 조금씩 다르므로 묶을 것이 없고, 결국 PNG는 원본 픽셀 데이터에 가까운 것을 저장하게 됩니다. 그래서 PNG로 저장한 사진은 같은 사진의 JPG보다 흔히 5~10배 크며, 눈에 보이는 이점은 전혀 없습니다.

웹에 있는 지나치게 큰 PNG의 상당수는 그저 잘못된 형식으로 저장된 사진입니다. 스크린샷 도구가 기본값으로 PNG를 쓰기 때문에, 사진을 찍은 스크린샷인 경우가 매우 많습니다.

WebP에는 두 가지 모드가 있고, 바로 그것이 핵심입니다

이것이 바로 WebP가 특히 PNG의 대체 형식으로 뛰어난 이유입니다. WebP는 두 가지 일을 모두 할 수 있습니다.

무손실 WebP는 PNG처럼 모든 픽셀을 정확히 유지하면서도 더 잘 압축합니다. 같은 PNG보다 보통 26% 더 작습니다. 로고나 인터페이스 스크린샷이라면 아무것도 포기하지 않고 똑같은 이미지를 더 작은 파일로 얻게 됩니다.

손실 WebP는 JPG처럼 세부 정보를 버리지만, 그러면서도 투명도를 지원합니다. JPG는 한 번도 할 수 없었던 일입니다. WebP 이전에는 존재하지 않던 조합이 바로 이것입니다. 배경을 오려낸 제품 사진은 예전에는 거대한 PNG를 뜻했습니다. 사진과 알파 채널을 함께 담을 수 있는 유일한 일반 형식이었기 때문입니다. 이제는 그 일부 크기의 손실 WebP로 만들 수 있습니다.

품질 값을 높게 잡으면 무손실 또는 거의 무손실에 가깝게 동작합니다. 값을 낮추면 세부 정보를 내주고 크기를 줄이게 되며, 투명도는 그대로 유지됩니다.

어떤 경우에 어떤 품질을 고를까

알맞은 설정은 그 PNG가 어떤 종류의 이미지를 담고 있는지에 전적으로 달려 있습니다.

• 로고, 아이콘, 평면 그래픽 — 가장 높은 품질을 사용하세요. 경계가 뚜렷하고 색이 적어 원래도 잘 압축되며, 가장자리 주변의 잡티가 금방 눈에 띕니다.
• 글자가 있는 스크린샷 — 높은 품질, 90 이상. 글자는 손실 압축이 가장 나빠 보이는 곳으로, 글자 주변이 흐릿하게 뭉개집니다.
• 투명도가 있는 사진 — 80~85면 충분하며, 극적인 절감 효과가 나타나는 곳이 바로 여기입니다.
• 차트와 도해 — 높은 품질. 가는 선과 선명한 색 경계야말로 손실 압축이 흐리게 만드는 대상입니다.
• 큰 배경 이미지 — 다른 내용 뒤에 놓이므로 보통 75~85이면 충분합니다.

그 바탕에 있는 원칙은 이렇습니다. 뚜렷한 경계와 글자에는 높은 품질이 필요하고, 연속 계조에는 필요하지 않습니다.

투명도는 살아남습니다 — 다만 한 가지는 확인하세요

WebP는 PNG와 똑같이 완전한 8비트 알파 채널을 지원합니다. 부드러운 그림자, 흐릿하게 처리된 가장자리, 안티앨리어싱된 곡선, 부분 투명도가 모두 올바르게 전달됩니다. GIF의 거친 켜짐/꺼짐 방식 투명도와는 다릅니다.

낮은 품질로 변환한 뒤 확인할 만한 유일한 부분은 오려낸 부분의 가장자리입니다. 손실 압축은 색상 데이터를 대상으로 작동하기 때문에, 반투명한 가장자리 픽셀이 원본에서 그 뒤에 있던 색의 옅은 테두리를 띠게 될 수 있습니다. 품질 80 이상에서 깔끔하게 오려낸 이미지라면 보이지 않습니다. 강한 색을 배경으로 곱게 번진 가장자리를 가진, 강하게 압축된 이미지라면 보일 수도 있으니 내보내기 전에 경계를 원래 크기로 확인하세요.

사용 방법

• PNG 업로드 — 업로드 영역을 클릭하거나 .png 파일을 끌어다 놓으세요
• 품질 선택 — 높을수록 세부 정보가 더 남고, 낮을수록 파일이 작아집니다
• 다운로드 — WebP를 저장하세요

알아두면 좋은 점

• 절감 효과는 사진 PNG에서 가장 큽니다. 사진을 찍은 스크린샷은 눈에 띄는 변화 없이 90%까지 줄어들 수 있습니다.
• 아주 작은 아이콘은 줄지 않을 수도 있습니다. 몇 킬로바이트 아래에서는 형식 자체의 부가 정보가 크게 작용해 WebP가 비슷하거나 약간 더 커질 수 있습니다. 더 작은 쪽을 쓰세요.
• 변환 전에 크기를 줄이세요. 3000픽셀짜리 PNG를 300픽셀로 표시하면, 어떤 코덱으로도 되찾을 수 없을 만큼 용량을 낭비하게 됩니다.
• 파비콘은 PNG나 ICO로 두세요. WebP 파비콘 지원은 일관적이지 않고, 어느 쪽이든 파일은 아주 작습니다.
• 이메일 프로그램은 브라우저보다 뒤처져 있습니다. 아직 WebP를 표시하지 못하는 것도 있으니, 이메일 템플릿에는 PNG나 JPG를 쓰세요.
• 원본 PNG를 보관하세요. 그 이미지가 앞으로 다시 편집할 마스터 자산이라면 특히 그렇습니다.

자주 묻는 질문

WebP는 PNG보다 얼마나 작습니까?

대부분의 사람이 예상하는 것보다 훨씬 작습니다. 무손실 WebP는 픽셀 단위로 완전히 동일한 결과를 내면서도 같은 PNG보다 평균 26%가량 작습니다. PNG로는 아예 할 수 없는 손실 WebP로 바꾸면 흔히 60~80%를 절감하며, PNG로 저장된 사진이라면 90%를 넘길 수도 있습니다. 사진 요소가 많을수록 이득이 커집니다.

투명한 배경이 유지되나요?

네. WebP는 PNG와 똑같이 완전한 8비트 알파 채널을 지원하므로 부드러운 그림자, 흐릿한 가장자리, 부분 투명도가 모두 살아남습니다. 이는 투명도를 전혀 담지 못하는 JPG에 대한 WebP의 주요 장점 중 하나입니다. 품질 설정이 매우 낮을 때는 오려낸 부분의 가장자리에 옅은 색 테두리가 생기지 않았는지 살펴보세요.

손실 WebP와 무손실 WebP 중 무엇을 써야 하나요?

로고, 아이콘, 도해, 글자가 든 스크린샷에는 무손실을 쓰세요. 뚜렷한 경계나 글자가 있는 것은 압축 잡티가 눈에 보이고, 어차피 파일이 작습니다. 사진에는 손실을 쓰세요. 투명한 배경이 있는 사진도 포함되며, 절감 폭이 크고 품질 80 이상에서는 손실이 보이지 않습니다.

애초에 제 PNG는 왜 이렇게 큰가요?

거의 틀림없이 사진이 들어 있기 때문입니다. PNG는 모든 픽셀을 정확히 저장하고 반복을 찾아 압축하는데, 사진에는 완전히 똑같은 반복이 거의 없어 묶을 것이 없습니다. PNG는 평면 그래픽과 인터페이스 스크린샷에는 알맞은 선택이고, 사진 내용에는 잘못된 선택입니다.

나중에 다시 PNG로 변환할 수 있나요?

네, 투명도도 왕복 변환에서 살아남습니다. 다만 손실 WebP로 변환했다면 그 단계에서 버려진 세부 정보는 영영 사라집니다. 되돌려도 얻는 것은 압축된 이미지의 PNG이지 원본이 아닙니다. 다시 편집해야 한다면 PNG 마스터를 보관하세요.

WebP가 이메일에서 작동하나요?

믿을 만하지는 않습니다. 브라우저 지원은 이제 보편적이지만 이메일 프로그램은 한참 뒤처져 있고, 몇몇은 WebP에 대해 아무것도 표시하지 않습니다. 이메일 템플릿에는 PNG나 JPG를 쓰세요. 같은 주의가 일부 데스크톱 소프트웨어, 인쇄 작업 흐름, PNG와 JPG만 받는 업로드 양식에도 적용됩니다.

제 이미지가 서버로 전송되나요?

아니요. 변환은 전적으로 브라우저 안에서 이루어지므로 파일이 컴퓨터를 떠나지 않습니다. 이름, 주소, 계좌번호, 내부 시스템이 함께 담기는 경우가 많은 스크린샷에서는 특히 중요한 점입니다.

관련 도구

• WebP → PNG — 반대 방향, 투명도를 유지하며
• JPG → WebP — 투명도가 없는 사진용
• 이미지 압축 — 형식을 바꾸지 않고 이미지 용량 줄이기
• 배경 제거 — 애초에 투명도를 만들기