실제 상황: 쇼핑몰 상품 사진과 투명 로고를 각각 저장하기
배경이 꽉 찬 1600×1200 상품 사진은 세부 색이 많고, 로고는 단색 글자 주변이 투명합니다. 둘을 모두 JPEG로 만들면 로고의 투명 영역에 배경색이 들어갑니다.
판단 결과: 상품 사진은 JPEG 또는 WebP 품질을 비교하고, 로고는 PNG나 무손실 WebP로 저장합니다. 업로드 관리자에서 WebP를 받지 않으면 호환성이 넓은 JPEG·PNG를 선택합니다.
단계별로 적용하는 방법
- 이미지가 사진 중심인지, 글자·아이콘·스크린샷 중심인지 구분합니다.
- 투명 픽셀이 필요한지 확인하고 JPEG로 바꿀 경우 합성할 배경색을 정합니다.
- 최종 업로드 위치나 편집 프로그램이 WebP를 허용하는지 확인합니다.
- 손실 형식은 여러 품질 값을 만들어 글자 가장자리와 미세한 질감을 확대 비교합니다.
- 용량뿐 아니라 색상, 투명도와 실제 사용처의 표시 결과를 확인한 뒤 저장합니다.
비교해서 선택하기
| 형식 | 압축 | 투명도 | 잘 맞는 콘텐츠 |
|---|---|---|---|
| JPEG | 손실 | 지원하지 않음 | 일반 사진·작은 공유 파일 |
| PNG | 무손실 | 알파 투명도 | 로고·스크린샷·선명한 글자 |
| WebP | 손실·무손실 | 지원 | 현대 웹의 사진·투명 이미지 |
| GIF 입력 | 팔레트 기반 | 제한적 | 초기 도구에서는 첫 정지 프레임만 처리 |
| HEIC 입력 | 효율적 압축 | 구현별 차이 | 브라우저 직접 지원이 불안정해 필수 제외 |
주의할 점
- 확장자를 바꾸는 것만으로 형식이 변환되지 않으며 Canvas로 디코딩하고 새 데이터로 인코딩해야 합니다.
- 투명 PNG를 JPEG로 바꾸기 전에 배경색을 선택하지 않으면 검정이나 흰색 등 의도하지 않은 결과가 생길 수 있습니다.
- Canvas 재저장은 EXIF 촬영 날짜·위치와 일부 색상 프로필을 유지하지 않을 수 있습니다.
기술적 한계와 브라우저 차이
- JPEG·PNG 디코딩은 매우 넓게 지원되지만 CMYK JPEG, 거대한 치수나 손상된 청크는 브라우저별로 실패할 수 있습니다.
- WebP 출력은 canvas.toBlob 지원 결과를 실제로 확인하며, 지원되지 않으면 해당 선택을 비활성화해야 합니다.
- 움직이는 GIF나 애니메이션 WebP는 초기 버전에서 프레임 애니메이션을 보존하지 않습니다.
FAQ
JPEG, PNG와 WebP의 차이 FAQ
PNG를 JPEG로 바꾸면 더 작아지나요?
사진에서는 대체로 크게 줄지만 단색 도형이나 글자에서는 경계가 번지고 기대만큼 줄지 않을 수 있습니다. 투명도도 사라집니다.
WebP는 모든 브라우저에서 열리나요?
현대 주요 브라우저 지원은 넓지만 오래된 앱, 문서 프로그램과 특정 업로드 시스템은 받지 않을 수 있어 최종 사용처를 확인해야 합니다.
JPEG 품질 100은 원본과 완전히 같은가요?
아닙니다. 높은 품질의 손실 인코딩이며 원본 픽셀과 완전히 같음을 보장하지 않습니다. 파일도 예상보다 클 수 있습니다.
투명 배경을 유지하려면 무엇을 고르나요?
PNG 또는 투명도를 지원하는 WebP를 선택하세요. JPEG 출력에서는 지정한 단색 배경과 합쳐집니다.
HEIC 사진은 왜 바로 변환할 수 없나요?
브라우저별 디코딩 지원이 일정하지 않고 추가 코덱이 필요할 수 있어 초기 필수 범위에서 제외했습니다. 기기의 사진 앱에서 JPEG로 내보낸 뒤 사용할 수 있습니다.