더 빠른 페이지를 위한 PNG WebP 변환기

PNG는 선명한 그래픽과 투명도에 훌륭하지만 무겁습니다. 전체 너비 스크린샷 하나가 몇 MB가 될 수 있어, 페이지를 느리게 하고 모바일 데이터를 쓰는 방문자에게 부담을 줍니다. WebP는 같은 모습을 훨씬 적은 공간에 담도록 Google이 설계했으며, 2020년부터 모든 주요 브라우저가 지원합니다.

크기를 바꾸거나 자르지 않고 PNG 파일 용량을 줄이고 싶다면, 형식을 바꾸는 것이 가장 큰 효과를 내는 경우가 많습니다. 평면 색 그래픽과 PNG로 저장한 사진은 50~80% 줄어드는 경우가 흔하며, 화면에서는 차이를 알아보기 어렵습니다.

두 형식 비교

WebP와 PNG를 비교하면, 둘 다 투명도를 지원하고 무손실 모드를 제공합니다. PNG는 오래된 데스크톱 소프트웨어와 인쇄 작업에서 더 널리 받아들여집니다. WebP는 선택형 손실 모드를 더하며, 절감 대부분이 여기서 나옵니다. 애니메이션도 다룹니다. 브라우저에 표시되는 것이라면 WebP가 대개 더 나은 전달 형식입니다.

브라우저가 각 PNG를 디코딩해 알파 채널을 그대로 둔 채 숨겨진 캔버스에 그리고, 고른 설정으로 그 캔버스를 WebP로 인코딩합니다. 이 모든 것이 탭 안에서 일어납니다. 어떤 서버도 이미지를 받지 않으므로 대기열이 없고, 기기 메모리 외에는 파일 수 제한도 없습니다.

Chrome, Edge, Firefox는 모두 이 방식으로 WebP 파일을 만들 수 있습니다. 일부 Safari 버전은 WebP를 표시할 수는 있지만 인코딩하지 못하므로, Mac의 Safari를 쓰고 있다면 도구가 알려 주고 다른 브라우저를 권합니다.

PNG를 WebP로 일괄 변환

폴더 전체를 처리해야 하나요? 최대 50개 파일을 한 번에 고르거나 놓으세요. 진행 막대와 함께 차례로 처리되며, 결과는 하나씩 또는 함께 저장할 수 있습니다. 이름이 유지되어 header.png는 header.webp가 되므로 프로젝트에 바로 바꿔 넣기 쉽습니다.

손실 품질 설정

슬라이더는 PNG WebP 품질을 50~100 범위로 조절합니다. 기본값 85는 대부분의 사진과 일러스트에 맞습니다. 작은 글자가 있는 스크린샷은 90 이상이면 글자가 선명합니다. 큰 메인 사진은 75~80이면 화면에서는 똑같아 보이면서 훨씬 가볍습니다. 크기 열을 보며 미리보기를 비교해 마음에 드는 균형을 찾으세요.

PNG를 WebP 무손실로

픽셀 아트, UI 목업, 다시 편집할 이미지처럼 모든 픽셀이 그대로 남아야 할 때는 ‘무손실’을 체크하세요. 무손실 WebP는 보통 최적화된 PNG보다 약 4분의 1 작습니다. 손실 모드만큼 줄지는 않지만 버려지는 것이 없습니다.

투명한 부분 유지하기

로고, 아이콘, 잘라 낸 제품 사진은 투명 배경에 의존합니다. 이 도구는 손실과 무손실 모드 모두에서 투명도를 유지한 채 PNG를 WebP로 변환하므로, 결과를 어떤 페이지 색 위에도 깔끔하게 올릴 수 있습니다. 반대로 오픈마켓용 단색 배경이 필요하다면 배경 도구가 도움이 됩니다.

웹사이트용으로 PNG를 WebP로 바꾸려면 같은 파일명을 유지하고 HTML이나 CSS의 확장자만 바꾸는 것이 가장 쉽습니다. 많은 개발자가 WebP 소스와 원래 PNG를 대체로 두는 picture 요소를 쓰지만, 현재 브라우저 지원 수준에서는 대체가 필요한 경우가 드뭅니다.

WordPress용 PNG WebP라면 변환한 파일을 미디어 라이브러리에 바로 올리세요. WordPress는 호스트의 이미지 라이브러리가 지원한다면 5.8 버전부터 WebP를 받습니다. Shopify, Wix, Squarespace를 비롯한 대부분의 최신 사이트 빌더도 WebP 업로드를 받습니다.

이메일, SNS, 문서

WebP는 브라우저를 위해 만들어졌으니 웹 밖에서 쓰기 전에 한 번 더 생각하세요. 여러 이메일 클라이언트, 오래된 오피스 프로그램, 일부 SNS는 여전히 이를 변환하거나 거부하고, 인쇄소는 보통 JPG, PNG, PDF를 기대합니다. 그런 곳에는 원래 PNG를 쓰거나 변환기로 JPG 사본을 만드세요. WebP는 빛나는 곳, 즉 내가 관리하는 페이지와 앱에서 쓰세요. 그곳에서는 줄인 1KB마다 모든 기기와 연결의 모든 방문자에게 더 빠른 경험이 됩니다.

Core Web Vitals에 도움이 될까요?

이미지는 페이지에서 가장 큰 요소인 경우가 많아, 가벼운 파일은 LCP 점수를 돕고 모바일 방문자의 데이터 사용량을 줄입니다. 형식 변경과 함께 올바른 width와 height 속성, 그리고 스크롤 아래 이미지의 지연 로딩을 쓰면 가장 흔한 속도 경고 두 가지가 사라집니다.

크기 조정 먼저, 변환은 다음

형식은 이야기의 절반일 뿐입니다. 800픽셀 열에 표시되는 4,000픽셀 스크린샷은 WebP여도 대역폭을 낭비합니다. 고밀도 화면에서도 선명하도록 표시될 너비의 약 두 배로 줄인 뒤 변환하세요. 이미지 크기 조정 도구가 첫 단계를 같은 비공개 브라우저 방식으로 처리합니다.

글자와 가는 선 확인

손실 압축은 가는 선과 작은 글자를 부드럽게 만들 수 있습니다. 스크린샷, 차트, 다이어그램을 변환한 뒤 미리보기를 확대해 원본과 비교하세요. 윤곽이 흐려 보이면 슬라이더를 5~10 올리거나 무손실로 바꾸세요. 사진은 훨씬 너그러워서 기본값 이상이 필요한 경우가 드뭅니다.

파일 이름은 알기 쉽게

검색 엔진은 파일 이름을 관련성의 작은 단서로 읽고, 사람들은 이미지를 다운로드할 때 이름을 봅니다. 그래서 IMG_2041.webp보다 red-running-shoes.webp처럼 내용을 알 수 있는 이름이 좋습니다. 변환 전에 PNG 이름을 바꾸면 새 파일이 그 이름을 물려받아 나중에 고칠 것이 없습니다. 페이지에 이미지를 넣을 때는 의미 있는 대체 텍스트를 달고, 로딩 중 레이아웃이 튀지 않도록 width와 height를 지정하세요.

파일이 변환되지 않을 때

파일이 거부된다면 정말 PNG인지 확인하세요. 도구는 확장자만이 아니라 파일 서명을 확인합니다. 일부만 다운로드되었거나 손상된 이미지는 디코딩할 수 없으니 다시 받으세요. 모든 파일이 실패한다면 브라우저가 WebP를 인코딩하지 못하는 것이니, Chrome, Edge, Firefox로 바꾸면 해결됩니다.

Mac에서 PNG를 WebP로 바꾸려면 Chrome, Edge, Firefox에서 이 페이지를 열고 Finder에서 파일을 바로 드래그하세요. Windows와 크롬북에서도 같은 브라우저로 아무것도 설치하지 않고 됩니다. Android에서 PNG를 WebP로 바꾸려면 Chrome에서 페이지를 열고, 놓기 영역을 탭해 갤러리나 파일에서 이미지를 고른 뒤, 결과를 다운로드 폴더에 저장하세요.

WebP가 PNG보다 작을까요? 거의 항상 그렇고, 특히 손실 모드에서 그러며, PNG로 저장한 사진에서 차이가 가장 큽니다. 드문 예외는 PNG가 이미 잘 압축하는 아주 작은 평면 아이콘입니다. 그런 경우 크기 열에 표시되니 원본을 그대로 쓰면 됩니다.

WebP와 AVIF는요? AVIF는 더 작을 수 있지만, 인코딩이 느리고, 만들기 위한 브라우저 지원이 고르지 않으며, 많은 CMS 플랫폼과 이메일 클라이언트가 아직 거부합니다. WebP는 믿을 만한 중간 지점입니다. 널리 지원되고, 빨리 만들 수 있고, PNG보다 훨씬 가볍습니다. 나중에 편집하거나 인쇄할 경우를 대비해 원래 PNG 파일은 마스터로 보관하세요.