이미지 형식 변환 — PNG ⇄ WebP ⇄ JPEG ⇄ AVIF

🔗 관련 도구

📖 자주 걸리는 지점

Canvas API 를 사용해 브라우저 안에서만 PNG / WebP / JPEG / AVIF 를 상호 변환합니다. 파일은 업로드되지 않습니다. 다만 Canvas 를 거친다는 것은 이미지를 한 번 픽셀로 펼쳐 다시 그린다는 뜻입니다. 원본 파일에 있던 촬영 일시나 위치 정보, 컬러 프로파일, 애니메이션 같은 픽셀 이외의 정보는 이 과정에서 모두 사라집니다.

사례	무슨 일이 일어나는가	어떻게 하면 되는가
스마트폰 사진의 방향이 바뀐다	스마트폰은 센서 방향 그대로 기록하고 EXIF 의 Orientation 태그로 표시할 때 돌려 달라고 전합니다. Canvas 는 그 태그를 이어받지 않으므로, EXIF 를 존중하지 않는 환경에서만 옆으로 누워 보이던 사진이 변환 후에는 모든 환경에서 누워 보입니다. 반대로 변환 전에는 바로 보였는데 변환 후에 눕는 현상도 같은 원인입니다.	변환 전에 EXIF 뷰어로 Orientation 값을 확인하고, 1 이 아니라면 이미지 회전으로 먼저 올바른 방향으로 구워 넣은 뒤 변환하세요. 순서가 반대면 회전된 결과에 회전 지시가 다시 남는 형태가 됩니다.
색이 조금 탁해지거나 어긋난다	디지털 카메라나 Adobe 도구의 내보내기는 Display P3 나 Adobe RGB 같은 광색역 프로파일을 심어 두는 경우가 있습니다. Canvas 는 원칙적으로 sRGB 로 다루므로 프로파일이 벗겨진 결과 선명한 빨강이나 초록이 살짝 가라앉아 보입니다. 나란히 비교하지 않으면 모를 정도지만 브랜드 컬러를 다루는 장면에서는 문제가 됩니다.	웹 게재용이라면 원본 단계에서 sRGB 로 변환해 두는 것이 확실합니다. 포토샵이라면 웹용으로 저장이나 프로파일 변환에서 sRGB 를 지정합니다. 인쇄용이나 광색역을 유지하고 싶은 소재는 이 변환을 거치지 말고 원본 그대로 다루세요.
큰 이미지에서 실패하거나 새까매진다	Canvas 에는 브라우저마다 면적 상한이 있습니다. 특히 iOS 사파리는 기기 메모리에 따라 엄격해서, 한 변 4,096px 또는 총 화소 1,600만~1,700만을 넘는 부근부터 예외를 던지지 않고 새까맣거나 빈 이미지를 돌려줍니다. 오류가 나지 않아 원인을 알아채기 어려운 동작입니다.	먼저 이미지 리사이즈로 긴 변을 4,000px 정도까지 줄인 뒤 변환하세요. 웹 게재가 목적이라면 2,000px 를 넘는 이미지는 거의 확실히 과잉입니다. 레티나 표시를 고려해도 실제 표시 폭의 2배면 충분합니다.

애니메이션 GIF 나 여러 프레임의 WebP 를 넣으면 첫 프레임만의 정지 이미지가 됩니다. Canvas 가 다룰 수 있는 것은 한 프레임뿐이기 때문입니다. 움직임을 유지한 채 형식을 바꾸려면 이 도구가 아니라 ffmpeg 같은 처리계가 필요합니다. 한편 촬영 장소의 GPS 정보가 떨어지는 것 자체는 웹에 공개하는 이미지에는 오히려 이점입니다. 많은 SNS 는 업로드 시 EXIF 를 제거하지만 자사 사이트에 직접 두는 이미지는 아무도 제거해 주지 않습니다.

📖 사용법

1

이미지 불러오기

드래그 앤 드롭하거나 클릭해 선택합니다. 파일은 브라우저 안에 머물며 서버로 전송되지 않습니다
2

출력 형식과 품질 정하기

WebP 와 AVIF 는 품질 슬라이더가 적용됩니다. PNG 는 무손실이라 슬라이더의 영향을 받지 않습니다
3

변환 후 다운로드

변환 전후의 파일 크기를 비교한 뒤 저장할 수 있습니다

❓ 자주 묻는 질문

WebP 와 AVIF 중 무엇을 고를까요?

같은 화질이라면 AVIF 가 20~30% 더 작지만 인코딩이 확실히 느리고 오래된 환경에서는 표시되지 않습니다. picture 요소로 AVIF → WebP → JPEG 순으로 폴백하는 것이 안전합니다.

투명 배경이 검게 변했습니다

JPEG 는 알파 채널을 가질 수 없어 투명 부분이 반드시 단색으로 채워집니다. 투명을 유지하려면 PNG · WebP · AVIF 중 하나를 고르세요.

변환했는데 용량이 늘었습니다

사진이 아닌 것을 JPEG 로 저장했거나 이미 압축된 JPEG 를 PNG 로 저장했을 때 생깁니다. 색 수가 적은 일러스트나 스크린샷은 PNG 나 WebP 가 더 작습니다.

🐛 이 도구에서 문제가 발생했나요?

무료 · 가입 불필요. 재현 절차만이라도 도움이 됩니다. 보고는 운영자에게 직접 전달되어 개선에 사용됩니다.

🔄 이미지 변환

입력

출력 미리보기

🔗 관련 도구

📖 자주 걸리는 지점

📖 사용법

❓ 자주 묻는 질문

보고 감사합니다!