Mac에서 이미지를 Base64로 변환
이미지를 HTML, CSS, JSON에 바로 붙여 넣을 수 있는 Base64 데이터 URI로 바꿔요.
Mac의 이미지를 Base64로
샘플 파일을 사용한 앱 스크린샷.
이미지를 Base64로 사용 방법
- 1
이미지를 놓으세요
SVG를 포함해 이미지를 하나 이상 추가하세요.
- 2
복사할 대상 선택
데이터 URI, CSS 배경 규칙, HTML <img> 태그 또는 일반 Base64.
- 3
인코딩 클릭
각 이미지를 바이트 하나까지 있는 그대로 인코딩해요.
- 4
붙여 넣기
“클립보드에 복사”를 켜 두면 결과를 바로 붙여 넣을 수 있어요. 각 이미지의 텍스트는 이름에 “base64”가 붙은 파일로 다운로드 › OneMacTools 안의 날짜별 폴더에도 저장돼요.
이미지를 Base64로의 기능
이미지마다 데이터 URI, CSS background 규칙, HTML <img> 태그 또는 일반 Base64를 받아 클립보드에 복사하고 텍스트로 저장해요. 바이트를 있는 그대로 인코딩하므로 품질 손실이 없어요. 데이터 URI는 작은 이미지에 알맞으므로, 이미지가 크면 경고해 줘요.
이럴 때 좋아요
- CSS에 작은 아이콘을 인라인으로 넣기
- HTML 이메일에 이미지 삽입하기
- JSON이나 설정 파일에 이미지 넣기
옵션 설명
- 복사 형식
- 데이터 URI, CSS 배경, HTML <img> 또는 일반 Base64. 데이터 URI는 범용 형식이고, CSS 배경은 이를 background-image 규칙으로 감싸고, HTML <img>는 파일 이름을 대체 텍스트로 넣은 이미지 태그로 감싸며, 일반 Base64는 인코딩된 데이터만 담아요.
- 클립보드에 복사
- 기본값은 켜짐이에요. 결과를 복사해 바로 붙여 넣을 수 있어요. 이미지가 여러 개면 빈 줄로 구분해 함께 복사해요.
권장 사항
- 데이터 URI는 작은 이미지, 가능하면 약 10 KB 미만에만 쓰세요. 큰 이미지는 HTML이나 CSS를 무겁게 만들고 따로 캐시할 수도 없어요.
- 먼저 이미지를 줄이세요. 인코딩하기 전에 SVG는 SVG 최적화로, PNG는 PNG 압축으로 최적화하세요.
- SVG는 작고 어떤 크기에서도 선명하므로 CSS 아이콘용 데이터 URI로 좋아요.
- HTML <img> 출력의 대체 텍스트는 파일 이름을 그대로 두지 말고 이미지를 설명하도록 고치세요.
- PNG, JPEG, WebP, SVG처럼 브라우저가 지원하는 포맷을 쓰세요. HEIC 데이터 URI는 대부분의 브라우저에서 표시되지 않아요.
함께 쓸 수 있는 곳
- 입력
- PNG, JPEG, GIF, WebP, SVG 등의 이미지 파일.
- 출력
- 이미지마다 인코딩된 결과가 담긴 텍스트 파일, 그리고 해당 옵션을 켰다면 클립보드.
- 이미지를 다시 압축하지 않으므로 화질 손실이 없어요.
- Base64는 원본 파일보다 약 3분의 1 커요. 결과가 크면 앱이 경고해요.
- 아주 긴 결과는 앱에 표시되지 않지만, 저장된 파일과 클립보드에는 전부 들어 있어요.
이미지를 Base64로에 관한 질문
Mac에서 이미지를 Base64로 변환하려면 어떻게 하나요?
이미지를 이미지를 Base64로에 놓고 데이터 URI를 선택한 다음 인코딩을 클릭하세요. 결과가 클립보드에 복사되고 텍스트 파일로도 저장돼요.
CSS에서 Base64 이미지를 사용하려면 어떻게 하나요?
CSS 배경을 선택하세요. 데이터 URI가 담긴 완전한 background-image 규칙이 만들어져 스타일시트에 바로 붙여 넣을 수 있어요.
별도 파일 없이 HTML에 이미지를 삽입하려면 어떻게 하나요?
HTML <img>를 선택하세요. src 안에 이미지가 담긴 이미지 태그가 만들어지며 HTML이 작동하는 곳이라면 어디서나 쓸 수 있어요.
Base64 텍스트가 이미지보다 큰 이유는 무엇인가요?
Base64는 3바이트를 텍스트 4자로 바꾸므로 약 3분의 1 커져요. 그래서 작은 이미지에 알맞아요.
Base64로 변환하면 화질이 떨어지나요?
아니요. 파일의 바이트를 그대로 인코딩하므로 디코딩하면 똑같은 이미지가 나와요.
SVG를 데이터 URI로 변환할 수 있나요?
네. SVG 파일도 받으며, image/svg+xml 유형으로 인코딩되어 CSS나 HTML에 바로 쓸 수 있어요.
이미지를 Base64로이(가) 내 파일을 업로드하나요?
아니요. 이미지를 Base64로은(는) 전적으로 Mac에서 실행되므로 파일이 Mac 밖으로 나가지 않고 오프라인에서도 작동해요.
이미지를 Base64로이(가) 원본 파일을 바꾸나요?
아니요. 결과는 다운로드 › OneMacTools의 날짜별 폴더에 새 파일로 저장되고, 따로 적힌 옵션을 켜지 않는 한 원본은 그대로 남아요.
이미지를 Base64로에는 무엇이 필요한가요?
macOS 26 이상이 설치된 Mac만 있으면 돼요. 따로 설치할 것은 없어요.
다음으로 할 일
Figma, Illustrator, Inkscape SVG에 남은 편집기 흔적을 지우고 좌표를 반올림해요. 보기엔 같지만 파일은 더 작아져요.
PNG 압축색상 수를 줄여 투명도는 유지하면서 PNG를 60–80% 줄여요. 스크린샷, 로고, 아이콘에 딱 맞아요.
플레이스홀더 만들기이미지가 지연 로딩되는 동안 보여 줄 BlurHash 문자열, 아주 작은 흐린 썸네일, 평균 색상을 만들어요.
관련 이미지 도구
PNG, JPEG, HEIC, AVIF, TIFF 간에 변환해요. WebP, RAW 등도 읽을 수 있어요.
이미지 압축실시간 전후 미리보기와 함께 이메일과 웹용으로 사진을 줄여요.
WebP로 변환투명도를 유지한 채 손실 또는 무손실 방식으로 작은 웹용 WebP 이미지를 만들어요.
이미지 크기 조절긴 변, 정확한 픽셀, 비율 또는 원하는 DPI에서의 cm, mm, 인치 인쇄 크기로 크기를 조절해요.
이미지 자르기화면비나 정확한 영역으로 자르거나 단색 테두리를 자동으로 잘라내세요 — 사진 한 장이든 폴더 전체든.
이미지 회전 및 뒤집기사진을 한 번에 회전하거나 반전해요.
