Base64 이미지 디코더 및 뷰어 | Base64를 이미지로 변환
Base64로 인코딩된 이미지 문자열을 즉시 디코딩하고 미리 봅니다. JPEG, PNG, GIF 및 기타 일반 형식을 지원하며 잘못된 입력에 대한 오류 처리를 제공합니다.
Base64 이미지 디코더 및 뷰어
Base64로 인코딩된 이미지 문자열을 붙여넣고 디코딩하여 이미지를 봅니다.
이미지 미리보기
표시할 이미지가 없습니다. Base64 문자열을 붙여넣어 자동으로 디코드된 이미지를 확인하세요.
JPEG, PNG, GIF 및 기타 일반 이미지 형식을 지원합니다.
사용법
1. 위의 텍스트 영역에 Base64로 인코딩된 이미지 문자열을 붙여넣으세요.
2. 입력하는 동안 이미지가 자동으로 디코드되거나 '이미지 디코드' 버튼을 클릭하세요.
3. 디코드된 이미지는 아래 미리보기 영역에 나타납니다.
참고: 문자열은 최상의 결과를 위해 'data:image/'로 시작해야 하지만, 이 도구는 이 접두사가 없는 문자열도 디코드하려고 시도합니다.
문서
Base64 이미지 디코더 및 뷰어
소개
Base64는 이진 데이터를 ASCII 문자열 형식으로 표현하는 이진-텍스트 인코딩 방식입니다. HTML, CSS, JavaScript, JSON 및 이진 데이터를 직접 포함할 수 없는 기타 텍스트 기반 형식에 이미지 데이터를 직접 포함하는 데 일반적으로 사용됩니다. 이 도구를 사용하면 base64로 인코딩된 이미지 문자열을 디코딩하고 결과 이미지를 브라우저에서 직접 볼 수 있습니다.
Base64 인코딩은 원래 이진 데이터에 비해 데이터 크기를 약 33% 증가시키지만, 별도의 파일 다운로드 없이 텍스트 기반 문서에 이미지를 직접 포함할 수 있게 해줍니다. 이는 아이콘, 로고 또는 단순 그래픽과 같은 작은 이미지의 경우 포함의 편리함이 크기 증가보다 더 중요할 때 특히 유용할 수 있습니다.
우리의 Base64 이미지 디코더 도구는 base64로 인코딩된 이미지 문자열을 붙여넣고 즉시 디코딩된 이미지를 볼 수 있는 간단한 인터페이스를 제공합니다. JPEG, PNG, GIF, WebP 및 SVG를 포함한 모든 일반 이미지 형식을 지원하며, 데이터 URL 형식( data:image/...
접두사 포함) 및 원시 base64 문자열을 모두 처리할 수 있습니다.
기술 세부정보
Base64 인코딩 형식
Base64 인코딩은 이진 데이터를 64개의 ASCII 문자(A-Z, a-z, 0-9, +, /) 집합으로 변환하며, =는 패딩에 사용됩니다. 웹의 이미지에 대해 base64 데이터는 일반적으로 다음 구조의 데이터 URL로 형식화됩니다:
1data:[<media type>][;base64],<data>
2
예를 들어, base64로 인코딩된 PNG 이미지는 다음과 같을 수 있습니다:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2
이 형식의 구성 요소는 다음과 같습니다:
data:
- URL 스킴image/png
- 데이터의 MIME 타입;base64
- 인코딩 방법,
- 헤더와 데이터 간의 구분 기호- 실제 base64로 인코딩된 데이터
디코딩 프로세스
base64 이미지 문자열을 디코딩할 때 다음 단계가 발생합니다:
- 문자열을 파싱하여 데이터 URL 접두사가 포함되어 있는지 확인합니다.
- 접두사가 존재하면 MIME 타입을 추출하여 이미지 형식을 결정합니다.
- base64 데이터 부분을 분리하고 이진 데이터로 디코딩합니다.
- 이진 데이터를 Blob 또는 이미지로 표시할 수 있는 객체 URL로 변환합니다.
입력에 데이터 URL 접두사가 포함되어 있지 않으면 디코더는 이를 원시 base64 데이터로 처리하고 디코딩된 이진 헤더에서 이미지 유형을 유추하거나 기본값으로 PNG를 사용합니다.
지원되는 이미지 형식
이 도구는 모든 일반 웹 이미지 형식을 지원합니다:
형식 | MIME 타입 | 일반 사용 사례 |
---|---|---|
JPEG | image/jpeg | 사진, 많은 색상이 포함된 복잡한 이미지 |
PNG | image/png | 투명도가 필요한 이미지, 스크린샷, 그래픽 |
GIF | image/gif | 간단한 애니메이션, 제한된 색상 이미지 |
WebP | image/webp | JPEG/PNG보다 더 나은 압축을 제공하는 현대 형식 |
SVG | image/svg+xml | 벡터 그래픽, 확장 가능한 아이콘 및 일러스트레이션 |
사용 사례
Base64로 인코딩된 이미지는 웹 개발 및 그 이상에서 여러 가지 실용적인 응용 프로그램이 있습니다:
-
HTML/CSS/JS에 이미지 포함: 코딩에 이미지를 직접 포함하여 HTTP 요청을 줄이고, 작은 이미지의 경우 페이지 로드 시간을 개선할 수 있습니다.
-
이메일 템플릿: 기본적으로 외부 이미지를 차단하는 이메일 클라이언트에서 이미지가 제대로 표시되도록 보장합니다.
-
단일 파일 애플리케이션: 모든 리소스가 단일 파일 내에 포함된 자가 포함 HTML 애플리케이션을 만듭니다.
-
API 응답: 별도의 이미지 엔드포인트 없이 JSON 응답 내에 이미지 데이터를 직접 포함합니다.
-
CSS의 데이터 URI: CSS 파일 내에 작은 아이콘 및 배경 이미지를 직접 포함합니다.
-
캔버스 조작: 캔버스 이미지 데이터를 저장하고 전송하는 데 용이합니다.
-
오프라인 애플리케이션: localStorage 또는 IndexedDB에 이미지 문자열을 저장합니다.
성능 고려 사항
Base64 인코딩은 편리함을 제공하지만 몇 가지 단점이 있습니다:
- 파일 크기 증가: Base64 인코딩은 데이터 크기를 약 33% 증가시킵니다.
- 브라우저 캐싱 불가: 포함된 이미지는 외부 이미지 파일처럼 별도로 캐시될 수 없습니다.
- 파싱 오버헤드: 브라우저는 렌더링하기 전에 base64 문자열을 디코딩해야 합니다.
- 유지 관리 문제: 포함된 이미지는 참조된 파일보다 업데이트하기가 더 어렵습니다.
최적의 성능을 위해 base64 인코딩은 일반적으로 작은 이미지(10KB 이하)에 대해서만 권장됩니다. 더 큰 이미지는 별도의 파일로 제공되어 적절하게 캐시되고 최적화되는 것이 보통 더 좋습니다.
대안
다양한 사용 사례에 대해 base64 인코딩의 몇 가지 대안이 있습니다:
-
SVG 인라인 포함: 벡터 그래픽의 경우, 인라인 SVG는 base64로 인코딩된 SVG보다 더 나은 성능과 유연성을 제공합니다.
-
WebP 및 현대 이미지 형식: 이러한 형식은 base64로 인코딩된 JPEG/PNG보다 더 나은 압축을 제공합니다.
-
이미지 스프라이트: 여러 개의 작은 이미지를 하나의 파일로 결합하고 CSS 위치 지정을 사용합니다.
-
CDN(콘텐츠 전송 네트워크): 프로덕션 사이트의 경우, 최적화된 이미지를 CDN에서 제공하는 것이 더 효율적입니다.
-
데이터 압축: 대량의 이진 데이터를 전송하기 위해 gzip 또는 Brotli와 같은 전문 압축 알고리즘이 base64보다 더 효율적입니다.
코드 예제
다양한 프로그래밍 언어에서 base64로 인코딩된 이미지 작업 예제입니다:
1// JavaScript에서 이미지를 base64로 변환 (브라우저)
2function imageToBase64(imgElement) {
3 const canvas = document.createElement('canvas');
4 canvas.width = imgElement.width;
5 canvas.height = imgElement.height;
6
7 const ctx = canvas.getContext('2d');
8 ctx.drawImage(imgElement, 0, 0);
9
10 // 데이터 URL로 가져오기 (base64 문자열)
11 return canvas.toDataURL('image/png');
12}
13
14// base64 이미지 표시
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // 데이터 URL 접두사가 없는 문자열 처리
19 if (!base64String.startsWith('data:')) {
20 base64String = `data:image/png;base64,${base64String}`;
21 }
22
23 img.src = base64String;
24 document.body.appendChild(img);
25}
26
1import base64
2from PIL import Image
3from io import BytesIO
4
5# 이미지 파일을 base64로 변환
6def image_to_base64(image_path):
7 with open(image_path, "rb") as image_file:
8 encoded_string = base64.b64encode(image_file.read())
9 return encoded_string.decode('utf-8')
10
11# base64를 이미지로 변환하고 저장
12def base64_to_image(base64_string, output_path):
13 # 데이터 URL 접두사가 포함되어 있으면 제거
14 if ',' in base64_string:
15 base64_string = base64_string.split(',')[1]
16
17 image_data = base64.b64decode(base64_string)
18 image = Image.open(BytesIO(image_data))
19 image.save(output_path)
20
21# 사용 예제
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # 문자열 시작 부분 출력
24
25base64_to_image(base64_str, "output.jpg")
26
1<?php
2// PHP에서 이미지 파일을 base64로 변환
3function imageToBase64($path) {
4 $type = pathinfo($path, PATHINFO_EXTENSION);
5 $data = file_get_contents($path);
6 return 'data:image/' . $type . ';base64,' . base64_encode($data);
7}
8
9// base64를 이미지로 변환하고 저장
10function base64ToImage($base64String, $outputPath) {
11 // 데이터 URL 접두사가 포함되어 있으면 제거
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // 디코딩하고 저장
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// 사용 예제
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // 문자열 시작 부분 출력
23
24base64ToImage($base64Image, 'output.jpg');
25?>
26
1import java.io.File;
2import java.io.FileOutputStream;
3import java.io.IOException;
4import java.nio.file.Files;
5import java.util.Base64;
6
7public class Base64ImageUtil {
8
9 // 이미지 파일을 base64로 변환
10 public static String imageToBase64(String imagePath) throws IOException {
11 File file = new File(imagePath);
12 byte[] fileContent = Files.readAllBytes(file.toPath());
13 String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
14 String base64String = Base64.getEncoder().encodeToString(fileContent);
15
16 return "data:image/" + extension + ";base64," + base64String;
17 }
18
19 // base64를 이미지로 변환하고 저장
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // 데이터 URL 접두사가 포함되어 있으면 제거
22 if (base64String.contains(",")) {
23 base64String = base64String.split(",")[1];
24 }
25
26 byte[] decodedBytes = Base64.getDecoder().decode(base64String);
27
28 try (FileOutputStream fos = new FileOutputStream(outputPath)) {
29 fos.write(decodedBytes);
30 }
31 }
32
33 public static void main(String[] args) throws IOException {
34 String base64Image = imageToBase64("input.jpg");
35 System.out.println(base64Image.substring(0, 50) + "..."); // 문자열 시작 부분 출력
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
40
1using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // 이미지 파일을 base64로 변환
8 public static string ImageToBase64(string imagePath)
9 {
10 byte[] imageBytes = File.ReadAllBytes(imagePath);
11 string base64String = Convert.ToBase64String(imageBytes);
12
13 string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
14 return $"data:image/{extension};base64,{base64String}";
15 }
16
17 // base64를 이미지로 변환하고 저장
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // 데이터 URL 접두사가 포함되어 있으면 제거
21 if (base64String.Contains(","))
22 {
23 base64String = base64String.Split(',')[1];
24 }
25
26 byte[] imageBytes = Convert.FromBase64String(base64String);
27 File.WriteAllBytes(outputPath, imageBytes);
28 }
29
30 static void Main()
31 {
32 string base64Image = ImageToBase64("input.jpg");
33 Console.WriteLine(base64Image.Substring(0, 50) + "..."); // 문자열 시작 부분 출력
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
38
1require 'base64'
2
3# 이미지 파일을 base64로 변환
4def image_to_base64(image_path)
5 extension = File.extname(image_path).delete('.')
6 base64_data = Base64.strict_encode64(File.read(image_path))
7 "data:image/#{extension};base64,#{base64_data}"
8end
9
10# base64를 이미지로 변환하고 저장
11def base64_to_image(base64_string, output_path)
12 # 데이터 URL 접두사가 포함되어 있으면 제거
13 if base64_string.include?(',')
14 base64_string = base64_string.split(',')[1]
15 end
16
17 File.open(output_path, 'wb') do |file|
18 file.write(Base64.decode64(base64_string))
19 end
20end
21
22# 사용 예제
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # 문자열 시작 부분 출력
25
26base64_to_image(base64_image, 'output.jpg')
27
1' Excel VBA 함수로 파일을 base64로 인코딩
2Function FileToBase64(filePath As String) As String
3 Dim fileNum As Integer
4 Dim fileData() As Byte
5 Dim objXML As Object
6 Dim objNode As Object
7
8 fileNum = FreeFile
9 Open filePath For Binary Access Read As fileNum
10 ReDim fileData(LOF(fileNum) - 1)
11 Get fileNum, , fileData
12 Close fileNum
13
14 Set objXML = CreateObject("MSXML2.DOMDocument")
15 Set objNode = objXML.createElement("b64")
16
17 objNode.DataType = "bin.base64"
18 objNode.nodeTypedValue = fileData
19
20 FileToBase64 = objNode.Text
21
22 Set objNode = Nothing
23 Set objXML = Nothing
24End Function
25
26' Excel에서 사용:
27' =FileToBase64("C:\path\to\image.jpg")
28
HTML 구현
다음은 HTML에 base64 이미지를 직접 포함하는 방법입니다:
1<!-- HTML에 base64 이미지를 직접 포함 -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64로 인코딩된 이미지">
3
4<!-- base64 배경 이미지로 CSS 사용 -->
5<style>
6.base64-bg {
7 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8 width: 100px;
9 height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13
역사
Base64 인코딩은 1970년대 전자 메일 시스템의 개발에 뿌리를 두고 있습니다. 이진 데이터를 오직 ASCII 텍스트만 처리할 수 있는 시스템을 통해 전송하는 문제를 해결하기 위해 설계되었습니다.
인코딩 방식은 1987년에 RFC 989의 출판과 함께 공식화되었으며, 이는 개인 정보 보호 강화 메일(PEM) 표준을 정의했습니다. 이는 이후 RFC 1421 및 기타 관련 표준으로 업데이트되었습니다. "base64"라는 용어는 인코딩이 이진 데이터를 표현하기 위해 64개의 서로 다른 ASCII 문자를 사용한다는 데서 유래되었습니다.
웹 개발의 맥락에서 base64로 인코딩된 이미지는 1998년에 RFC 2397에서 처음 제안된 데이터 URI의 출현과 함께 인기를 얻었습니다. 이를 통해 이진 데이터를 HTML, CSS 및 기타 웹 문서에 직접 포함할 수 있게 되었습니다.
웹 개발에서 base64로 인코딩된 이미지의 사용은 2000년대 중반에 더욱 확산되었으며, 개발자들은 HTTP 요청을 줄이고 페이지 로드 시간을 개선할 수 있는 방법을 모색했습니다. 이 기술은 느린 모바일 연결에서 성능을 위해 요청을 최소화하는 것이 중요한 모바일 웹 개발의 부상과 함께 특히 수용되었습니다.
오늘날 base64 인코딩은 여전히 웹 개발에서 중요한 도구로 남아 있지만, 사용 방식은 더 정교해졌습니다. 현대의 접근 방식은 일반적으로 base64 인코딩을 작은 이미지에 대해 선택적으로 사용하며, 더 큰 자산에 대해서는 HTTP/2와 같은 더 효율적인 전달 방법을 활용합니다.
참고 문헌
피드백
피드백 토스트를 클릭하여 이 도구에 대한 피드백을 시작하세요.
관련 도구
귀하의 작업 흐름에 유용할 수 있는 더 많은 도구를 발견하세요.