투명 PNG를 WebP로 변환할 때 주의할 점
로고, 아이콘, 누끼 이미지의 투명 배경을 유지하면서 파일 용량을 줄이는 방법입니다.
투명 PNG는 로고, 아이콘, 상품 누끼 이미지에 자주 쓰입니다. 하지만 사진처럼 복잡한 누끼 이미지를 PNG로 저장하면 용량이 매우 커질 수 있습니다. 이때 투명도를 지원하는 WebP를 비교해보면 더 작은 결과를 얻을 수 있습니다.
중요한 점은 투명 배경이 필요한 이미지를 JPG로 변환하면 안 된다는 것입니다. JPG는 알파 채널을 지원하지 않아 배경이 흰색 또는 다른 색으로 채워질 수 있습니다. 투명도를 유지하려면 PNG 또는 WebP를 선택해야 합니다.
로고와 아이콘은 경계가 선명해야 하므로 압축 후 가장자리에 번짐이나 색 번짐이 생기지 않는지 확인하세요. 작은 아이콘은 용량 차이가 크지 않을 수 있으므로, 품질보다 선명도를 우선하는 판단도 필요합니다.
상품 누끼 이미지는 배경과 상품 경계가 구매 신뢰에 영향을 줍니다. WebP 변환 후 투명 영역이 유지되는지, 흰 배경과 어두운 배경에서 모두 자연스럽게 보이는지 확인하면 실수를 줄일 수 있습니다.
- 투명도가 필요하면 JPG 변환을 피합니다.
- PNG와 WebP 결과의 용량과 가장자리 품질을 비교합니다.
- 로고는 선명도, 상품 누끼는 경계 자연스러움을 확인합니다.
- 밝은 배경과 어두운 배경에서 모두 미리 봅니다.
- 작은 아이콘은 무리하게 압축하지 않아도 됩니다.
투명 PNG를 WebP로 바꿀 때 가장 먼저 확인할 곳은 파일 크기가 아니라 알파 가장자리입니다.
이 비교에서 파일 크기는 24.5% 줄었습니다. 어두운 배경 위에 올렸을 때 흰 테두리가 생기면 무손실 쪽을 다시 검토하세요. 위 이미지는 웹 표시용 미리보기이며, 표기한 용량은 원본 파일 기준입니다.
투명도는 용량보다 먼저 확인합니다
로고, 아이콘, 누끼 이미지는 배경이 투명하게 유지되는지가 핵심입니다. JPG는 투명도를 지원하지 않으므로 이런 이미지에는 적합하지 않습니다. WebP 결과가 작더라도 밝은 배경과 어두운 배경에서 가장자리가 자연스럽게 보이는지 먼저 확인해야 합니다.
작은 그래픽은 압축 이득이 작을 수 있습니다
아이콘처럼 이미 작은 파일은 변환 후 절감 폭이 크지 않을 수 있습니다. 이런 경우에는 작은 용량 차이보다 가장자리 선명도와 브랜드 색상 유지가 더 중요합니다. 결과가 원본보다 커지면 원본 포맷을 유지하는 것이 더 나은 선택입니다.
상품 누끼 이미지는 배경별로 검수합니다
상품 누끼 이미지는 흰 배경에서는 괜찮아 보여도 어두운 배경에서 가장자리 번짐이 드러날 수 있습니다. 쇼핑몰 카드, 상세 페이지, 광고 소재처럼 서로 다른 배경에 쓰일 수 있다면 여러 배경색에서 미리 확인하는 것이 좋습니다.
투명 그래픽은 절감률보다 가장자리입니다
관찰한 결과
투명 그래픽 고정 자산은 품질 80 WebP에서 24.5% 작아졌습니다. 절감 폭이 사진보다 작기 때문에 로고와 누끼 이미지는 용량보다 투명도와 가장자리 품질을 우선해야 합니다.
실패하기 쉬운 경우
투명 PNG를 JPG로 바꾸면 알파 채널이 사라집니다. 작은 아이콘은 WebP로 바꿔도 절감 이득이 작고, 오히려 가장자리 번짐이 더 눈에 띌 수 있습니다.
이 페이지의 판단 기준
투명도 유지가 필요한 이미지는 PNG와 투명 WebP를 비교하고, 밝은 배경과 어두운 배경에서 모두 검수한 뒤 더 안정적인 결과를 사용합니다.
원본과 결과 파일은 압축 테스트 결과 페이지에서 직접 비교할 수 있습니다. 이미지 파일명과 alt 텍스트는 페이지 맥락에 맞게 설명적으로 작성하는 것을 권장합니다. Google 이미지 SEO 가이드
WebP로 변환했더니 투명 배경이 검은색으로 바뀌었어요. 왜인가요?
WebP도 투명도를 지원하지만, 변환 과정에서 알파 채널이 제대로 전달되지 않거나 손실 압축 설정이 투명 영역을 다르게 처리할 수 있습니다. 투명 PNG를 WebP로 변환한 결과에 검은 배경이 생긴다면 원본 PNG를 그대로 유지하거나, PNG 압축 결과와 비교해 더 적합한 쪽을 선택하세요.
로고 파일은 PNG와 WebP 중 무엇이 더 좋나요?
단순한 벡터 스타일 로고는 WebP 무손실 압축이 PNG보다 작을 수 있습니다. 하지만 외부 플랫폼, 인쇄물 업체, 협업 도구에 전달하는 원본 로고는 PNG로 유지하는 것이 일반적으로 더 안전합니다. 웹사이트 게시용과 배포용 파일을 분리해 두는 것이 좋습니다.