이미지 변환(WebP·Base64)

이미지를 WebP·JPEG·PNG로 변환하고 data URI를 추출합니다.

이미지를 선택하거나 여기로 끌어다 놓으세요

작은 아이콘 하나 때문에 HTTP 요청이 하나 더 생기는 게 아까울 때가 있습니다. 이럴 때 이미지를 문자열로 바꿔 CSS나 HTML에 직접 넣는 방법을 씁니다.

이 도구는 이미지를 WebP·JPEG·PNG로 변환하는 동시에, 결과를 Base64 data URI로 뽑아 복사할 수 있게 해 줍니다. 크기(픽셀)는 원본 그대로 두고 형식과 품질만 바꿉니다.

어떻게 계산되나요

사용 순서

점선 영역을 눌러 파일을 고르거나 이미지를 끌어다 놓습니다. 원본 800×600, 240KB (image/png) 처럼 정보가 표시됩니다
변환 포맷을 WebP·JPEG·PNG 중에서 고릅니다
품질(JPEG·WebP) 슬라이더(10~100%, 기본 85%)를 맞춥니다
변환을 누르면 미리보기와 함께 결과 용량, 원본 대비 증감이 표시됩니다
다운로드로 파일을 저장하거나, data URI 복사로 Base64 문자열을 클립보드에 담습니다

data URI는 어디에 쓰나

data:image/webp;base64,UklGR... 형태의 문자열로, 이미지 파일 자체를 텍스트에 담은 것입니다. 별도 파일 없이 붙여넣기만으로 이미지가 표시됩니다.

.icon { background-image: url("data:image/webp;base64,UklGR..."); }

<img src="data:image/png;base64,iVBORw0KG...">

작은 아이콘, 이메일 템플릿, 단일 HTML 파일처럼 파일을 따로 두기 곤란한 곳에 적합합니다.

이때는 쓰지 마세요

Base64로 감싸면 원본보다 약 1.3배 길어집니다. 수십 KB가 넘는 사진을 이렇게 넣으면 HTML·CSS 파일이 비대해지고, 이미지와 달리 브라우저가 따로 캐시하지도 못해 오히려 느려집니다. 대략 몇 KB 수준의 작은 이미지에만 쓰는 것이 안전합니다.

포맷별 참고

WebP: 용량이 가장 작고 투명도도 유지됩니다
JPEG: 사진용. 투명 배경은 어둡게 채워질 수 있습니다
PNG: 무손실이라 선명하지만 용량이 크고, 품질 슬라이더가 적용되지 않습니다

용어 정리

data URI: 파일 내용을 URL 문자열 안에 직접 담는 방식. `data:이미지형식;base64,...` 형태로 src나 CSS url()에 바로 넣습니다.
Base64: 이진 데이터를 알파벳·숫자 문자로 바꿔 표현하는 인코딩 방식. 텍스트만 다루는 곳에 이미지를 실을 때 씁니다.
변환 포맷: 저장할 이미지 형식. 용량·투명도 지원 여부가 달라집니다.
품질(JPEG·WebP): 손실 압축 강도. 값이 낮을수록 용량이 작아지고, PNG에는 적용되지 않습니다.
원본 대비: 변환 결과가 원본보다 얼마나 작아졌는지(또는 커졌는지) 보여주는 비율입니다.

자주 묻는 질문

data URI를 복사했는데 붙여넣으면 이미지가 안 보여요.

문자열이 중간에 잘렸을 가능성이 큽니다. data URI는 매우 길어서 일부 편집기에서 잘리기도 합니다. `data:image/...;base64,`로 시작해 끝까지 온전히 들어갔는지 확인하고, 따옴표 안에 공백이나 줄바꿈이 섞이지 않았는지 보세요.

Base64로 넣으면 페이지가 빨라지나요?

아주 작은 이미지라면 요청이 하나 줄어드는 이점이 있지만, 용량이 약 1.3배로 늘고 브라우저가 별도로 캐시하지 못합니다. 수십 KB 이상이라면 일반 이미지 파일로 두고 WebP 변환으로 용량을 줄이는 편이 낫습니다.

변환 후 파일이 원본보다 커졌어요.

사진을 PNG로 바꾸거나, 이미 강하게 압축된 파일을 다시 인코딩하면 커질 수 있습니다. 사진은 WebP나 JPEG, 글씨·도형 위주 이미지는 PNG 또는 WebP가 적합합니다.

이미지 크기(픽셀)도 바꿀 수 있나요?

이 도구는 포맷과 품질만 바꾸고 해상도는 원본 그대로 둡니다. 가로·세로를 조정하려면 이미지 리사이즈·압축 도구를 이용하세요.

파일이 서버에 업로드되나요?

업로드되지 않습니다. 읽기·변환·복사·저장이 모두 브라우저 안에서 이뤄집니다.