이미지 형식 변환

이미지 형식 변환기 — 브라우저에서 PNG, JPG, WEBP를 즉시 변환

웹 성능 최적화의 핵심은 이미지 파일 크기를 줄이는 것입니다. HTTP Archive 통계에 따르면 웹 페이지 평균 전송량의 약 50%를 이미지가 차지하며, 형식 하나만 바꿔도 LCP(Largest Contentful Paint)를 수백 밀리초 단축할 수 있습니다. 이 변환기는 Canvas API를 사용해 브라우저에서 직접 처리하므로 이미지가 서버로 전송되지 않으며, 개인정보와 원본 데이터가 외부에 노출되지 않습니다.

이미지 형식별 기술 비교

JPEG는 1992년 표준화된 이후 30년 넘게 사진 이미지의 사실상 표준이었습니다. PNG는 1996년 W3C 권고로 채택되어 무손실 압축과 알파 채널 투명도가 필요한 그래픽에 사용됩니다. WebP는 2010년 구글이 발표한 차세대 포맷으로, JPEG 대비 25~35% 작은 파일 크기를 제공하면서 투명도와 애니메이션까지 지원합니다. 2023년 기준 전 세계 브라우저의 97% 이상이 WebP를 지원합니다. AVIF는 AV1 비디오 코덱 기반으로 WebP보다 추가로 20% 압축 효율이 높지만, 인코딩 속도가 느리고 브라우저 지원이 아직 확산 중입니다.

Canvas API 기반 변환 원리

이 도구는 HTML5 Canvas API의 canvas.toDataURL(mimeType, quality) 메서드를 사용합니다. 이미지를 Image 객체로 로드한 뒤 Canvas에 그리고, 원하는 MIME 타입으로 다시 내보내는 방식입니다. JPEG 변환 시에는 투명 영역이 검은색으로 바뀌는 것을 방지하기 위해 흰색 배경을 먼저 칠한 뒤 이미지를 합성합니다. 품질(quality) 파라미터는 0.0~1.0 범위이며, 0.8~0.85가 파일 크기와 화질의 최적 균형점으로 알려져 있습니다.

실전 시나리오

블로그 포스트 이미지 — 스마트폰으로 촬영한 4MB JPEG 사진을 WebP 품질 80%로 변환하면 약 800KB~1.2MB로 줄어들어 모바일 사용자의 로딩 시간을 크게 단축합니다.

쇼핑몰 상품 이미지 — 상품 사진을 JPEG 85%로 일괄 변환하면 CDN 비용을 절감하면서도 고객이 체감하는 화질 차이는 거의 없습니다.

로고 및 아이콘 — 배경 투명도가 필요한 로고는 PNG로 유지하되, 사이즈가 큰 히어로 이미지는 WebP로 변환하여 Core Web Vitals 점수를 개선합니다.

자주 하는 실수

PNG 이미지를 JPEG로 변환할 때 투명 배경이 검은색으로 변하는 현상은 알파 채널 처리 누락 때문입니다. 이 도구는 JPEG 변환 시 자동으로 흰색 배경을 합성하지만, 다른 도구를 사용할 때는 주의가 필요합니다. 또한, 이미 손실 압축된 JPEG를 다시 JPEG로 재압축하면 품질이 누적 저하(generation loss)되므로 원본 파일에서 한 번만 변환하는 것이 원칙입니다. WebP를 지원하지 않는 구형 iOS Safari(14.3 이하)를 고려해야 한다면 <picture> 태그로 JPEG 폴백을 함께 제공하세요.

관련 도구

변환된 이미지의 alt 텍스트를 SEO에 맞게 작성하려면 블로그 SEO 체커를 참고하세요. 이미지가 포함된 마크다운 문서를 작성할 때는 마크다운 에디터의 이미지 문법()을 활용합니다.

참고 자료

• Google Developers: WebP 가이드 — developers.google.com/speed/webp
• MDN: Canvas API — developer.mozilla.org/en-US/docs/Web/API/Canvas_API
• W3C PNG Specification (Second Edition) — w3.org/TR/PNG
• web.dev: Serve images in modern formats — web.dev/uses-webp-images