Base64.imBase64 온라인 인코딩 및 디코딩(가장 유용한 Base64 온라인 도구)
Base64.im 사용법 튜토리얼
1. Base64 인코딩을 사용하는 이유는 무엇입니까?
Base64 인코딩은 이진 데이터(예: 이미지 파일)를 텍스트 형식으로 변환하는 방법이며 다음 시나리오에 이상적입니다.
- 작은 이미지의 빠른 로드: HTML 또는 CSS 파일에 Base64 이미지를 삽입하여 추가 HTTP 요청을 방지하고 로드 속도를 높입니다.
- HTML 이메일 서명: 이메일 클라이언트에서 '이미지 표시' 경고가 발생하지 않도록 Base64 인코딩을 통해 이미지를 삽입하세요.
- 단일 파일 데모: 외부 리소스가 필요하지 않은 클라이언트를 위한 단일 파일 모형 또는 데모 페이지를 만듭니다.
2. 지원되는 이미지 형식
이 도구는 .jpeg, .png, .gif, .webp, .svg, .BMP 및 .bmp와 같은 일반적인 이미지 형식의 인코딩을 지원합니다.
3. base64.im을 사용하여 이미지를 변환하는 방법
이미지 업로드: 이미지 파일을 브라우저 창으로 드래그하거나 업로드 버튼을 클릭하여 인코딩하려는 이미지를 선택합니다.
결과 보기: 파일이 업로드되면 아래에서 Base64 문자열을 볼 수 있습니다.
업로드 제한: 한 번에 최대 20개의 파일을 업로드할 수 있습니다.
4. Base64로 인코딩된 이미지를 HTML 이미지 소스로 사용
Base64 문자열은 HTML에서 `img` 태그의 `src` 속성 값으로 사용할 수 있습니다. 예는 다음과 같습니다.
<img src="data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA..." width="100" height="50" alt="base64 test">
사용법 단계:
① 도구에서 제공하는 복사 버튼을 클릭하여 Base64 문자열을 클립보드에 복사합니다.
②. 브라우저가 직접 복사를 지원하지 않는 경우 대화 상자에서 문자열을 수동으로 복사할 수 있습니다.
3. HTML 파일의 `src` 속성에 문자열을 붙여넣습니다.
CodePen에서 base64 이미지 데모를 볼 수 있습니다.
5. Base64로 인코딩된 이미지를 CSS 배경으로 사용
Base64 문자열은 배경 이미지를 정의하기 위해 CSS `배경` 속성의 값으로 사용될 수도 있습니다. 예는 다음과 같습니다.
.my-class {
background: url('data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...');
}
사용법 단계:
① 도구의 복사 버튼을 클릭하여 Base64 문자열을 클립보드에 복사합니다.
②. 복사 버튼을 사용할 수 없는 경우 대화 상자에서 문자열을 수동으로 복사할 수 있습니다.
3. CSS 파일의 `url()` 매개변수에 문자열을 붙여넣습니다.
CodePen에서 base64 CSS 데모를 볼 수 있습니다.
6. 참고 사항
Base64 인코딩은 작은 이미지에 적합합니다. 큰 파일은 파일 크기를 늘릴 수 있습니다. 대용량 이미지나 자주 로드해야 하는 리소스에는 권장되지 않습니다.
인코딩된 문자열이 프로젝트 요구 사항을 충족하고 다른 장치에서 올바르게 표시되는지 확인하세요.
위 단계를 통해 Base64 도구를 쉽게 사용하여 이미지 인코딩 작업을 완료하고 개발 효율성을 높일 수 있습니다!