Security & Encryption 도구 업데이트됨 5일 전

이미지를 데이터 URI / Base64로 변환기

그냥 드래그 앤 드롭하거나 기기에서 수동으로 이미지를 업로드하거나 웹에서 이미지 URL을 붙여넣어 원하는 이미지를 Base64 / 데이터 URI 텍스트 형식으로 변환할 수 있습니다. 이미지를 데이터 URI / base64 텍스트 형식으로 변환하세요.

데이터 URI / Base64를 이미지로 변환기

Image to Base64 Data URI Copy Output Browser Based

사용법 이미지를 데이터 URI / Base64로 변환기

최대 파일 크기: 20 MB
여기에 이미지를 올려주세요
또는 클릭하여 둘러보기
이미지 둘러보기
JPG, PNG, GIF, WebP, BMP, SVG, AVIF
팁: 데이터 URI에는 MIME 접두사가 포함되지만, Base64만 사용된 경우에는 원시 페이로드만 포함됩니다.
도구 링크
클립보드에 복사되었습니다.
이 도구를 개선하는 데 도움을 주세요
2.38K
소요 시간
1.83K
총 사용자 수
5+ 년
제공됨
최종 검토일: 5일 전. 사용량 수치는 정기적인 감사 과정에서 갱신됩니다. (보고 시작일: 21 Feb 2022)
불일치 신고하기

내용 읽기

이 도구의 작동 방식과 사용 시기를 알아보세요.

여러 이미지 파일을 온라인에서 무료로 데이터 URI 및 base64 형식으로 변환하세요. 

이미지를 데이터 URI / Base64로 변환기

이미지를 데이터 URI / Base64로 변환하는 도구는 웹 페이지나 기타 온라인 애플리케이션에서 사용할 수 있는 텍스트 문자열로 이미지를 빠르고 쉽게 변환할 수 있게 해주는 편리한 도구입니다. 외부 파일 호스팅 서비스를 사용하지 않고 코드에 이미지를 삽입해야 할 때 이런 변환기가 유용합니다.


 

이미지 to Base64 인코딩 시스템이란

이미지를 데이터 URL이나 base64 문자열로 변환해야 한 적이 있나요?

이미지 to Base64는 모든 이미지를 데이터 손실 없이 읽을 수 없는 텍스트 형식으로 변환하는 이미지 인코딩 시스템입니다. 생성된 Base64 인코딩 텍스트에는 더하기, 슬래시,等号, 라틴 문자 및 숫자가 포함됩니다.

Base64 인코딩은 바이너리 정보를 텍스트 형식으로 저장하는 매우 유용한 방법입니다. 그 목적은 바이너리 데이터(이미지, 소리, 비디오 클립 등)를 ASCII 문자(알파벳 문자 + 숫자)를 사용하여 표현하는 것입니다.

왜 데이터 URI / Base64인가?

이미지는 데이터 URI라고 하는 방법을 사용하여 base64 문자열로 변환할 수 있습니다. 이를 통해 웹 페이지에 포함할 수 있는 이미지용 URL을 만들 수 있습니다. 이 과정은 원본 파일을 바이트 배열(바이트 모음)로 변환하는 것을 포함합니다. 그런 다음 바이트 배열을 base64 인코딩 문자열로 인코딩할 수 있습니다.

데이터 URI는 로컬 파일에 비해 여러 이점을 제공합니다. 클라이언트(브라우저) 캐시 공간을 절약하고, 일반 이미지보다 크기가 작으며, 웹사이트가 더 적은 대역폭으로 더 큰 이미지를 제공할 수 있게 해줍니다. Base64 문자열은 일반 텍스트 편집기로 쉽게 볼 수 있어 읽기도 더 쉽습니다.

데이터 URI를 사용하면 외부 파일을 불러오지 않고도 HTML 코드에 이미지를 직접 삽입할 수 있습니다. 이는 페이지 로딩 시간을 단축시킬 수 있으며 실제로 매우 쉽게 할 수 있습니다. 이 글에서는 몇 초 만에 이미지를 데이터 URI로 변환하는 방법을 보여드리겠습니다.

몇 초 만에 이미지를 Base64 인코oded / 데이터 URI로 변환하는 방법

웹사이트에서 이미지를 더 빠르게 로딩하는 방법을 궁금해한 적 있나요? 한 가지 방법은 데이터 URI를 사용하는 것입니다. 그냥 드래그 앤 드롭하거나 기기에서 수동으로 이미지를 업로드하거나 웹에서 이미지 URL을 붙여넣어 원하는 이미지를 Base64 / 데이터 URI 텍스트 형식으로 변환할 수 있습니다.

이미지 to Base64 인코oded 예제

Base64 인코oded 이미지 출력은 다음과 같습니다 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC....

이미지 to Base64 인코oded 사용법

이미지 소스(img src):

< img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC..." />

배경 이미지 URL(background-image: url):

background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC...")

데이터 URI / Base64를 사용하는 방법

데이터 URI / Base64 변환기를 사용하려면 생성된 코드를 삽입된 이미지를 표시하고자 하는 프로젝트에 복사하여 붙여넣기만 하면 됩니다. 코드 내의 줄바꿈이나 공백을 제거하지 않도록 주의하세요. 이는 올바른 표시 형식에 필요합니다. 또한 변환된 이미지를 어떻게 사용할 계획인지에 따라 크기 변경이나 테두리/여백 추가 등 일부 설정을 조정해야 할 수도 있습니다.

댓글 (0)

사용자 토론, 예외적인 사례 및 추가 팁을 위한 공간입니다.
댓글 남기기
댓글을 제출하면 공개적으로 표시됩니다.
아직 댓글이 없습니다. 가장 먼저 댓글을 남겨보세요!
저희에게 알려주세요!
이 도구와 관련된 문제를 신고하기

발생한 문제를 자세히 설명해 주시면, 저희가 이를 조사하고 도구를 개선할 수 있습니다.

가장 도움이 되는 것은 무엇인가
입력 내용, 예상 결과, 실제 결과, 브라우저/기기 정보를 기재해 주시고, 도움이 될 경우 스크린샷도 첨부해 주세요.
스크린샷 버튼은 브라우저에 표시된 페이지를 캡처하여 생성된 이미지를 이 양식에 첨부합니다.
전체 화면 스크린샷
newisty를 통해 브라우저에서 캡처되었습니다.
아직 스크린샷을 찍지 않았습니다.
도구 보고서