[SB] 23. Base64

최재원's avatar
Jun 10, 2025
[SB] 23. Base64
이미지를 표현하는데 사용하는 숫자 255가 아스키코드표를 사용하여 변환할 수 없기 때문에 나온방법
이미지의 비트 표현방식은 8비트, 아스키코드의 문자 표현 방식은 7비트 따라서 이미지를 6비트로 다운 시킨 다음 다시 아스키코드로 변환한다
  1. 이미지를 표현하는 숫자 255 → 아스키코드표로 변환 불가
  1. 숫자 255를 바이너리로 변환
  1. 6비트씩 자름
  1. base64표를 보고 변환
  1. 이 변환된 값을 다시 아스키코드로 변환
  1. 이 데이터를 전송
2. Base64

base64를 사용하는 목적

notion image

base64를 사용하는 예시

이미지를 문자열로 인코딩
notion image

base64를 사용 이유

모든 통신은 8비트, 1Byte로 이루어 진다 8비트로 들어온 데이터는 인간이 해석할 수 있는 문자로 변환되야 한다 이 8비트 중 7비트만 문자로 표현되고 1비트는 검증용으로 사용된다 그래서 실질적으로 7비트까지만 문자로 변환할 수 있다 이 문자변환표가 아스키코드표다 아스키 코드표는 10진수 127까지 변환할 수 있는 표다 따라서 내가 보낼 수 있는 10진수 수는 127이 최대값이다
 
이미지는 8비트를 전부 사용한다 그래서 8비트 즉 10진수 255까지 표현할 수 있다 이 이미지의 데이터를 그대로 1Byte 통신으로 보낸다면 아스키코드표를 보고 변환할 수 없는 데이터까지 보내버린다 예) 127이 넘는 숫자 127이 넘는 숫자는 8비트로 보내면 받는 쪽에서 아스키코드표를 보고 변환할 수 없다
 
그래서 나온게 base64표 다 6비트까지 표현이 가능하다 8비트 데이터를 일자로 붙여서 6비트 단위로 나눈다 이 나눠진 데이터를 base64표를 보고 변환한다 이 변환된 데이터를 다시 아스키코드로 변환한다 이 아스키코드로 변환된 데이터를 다시 8비트로 표현한다 이 8비트를 전송한다
 
픽셀 1개인 그림으로 예시를 들면
x, y, r, g, b 1, 1, 150, 200, 250
위 내용을 그냥 바로 보내면 아래와 같이 알 수 없는 숫자가 된다 그래서 문자로 바꿔서 보내야 한다
11150200250
이 그림을 바이너리로 읽는다
00000001 00000001 10010110 11001000 11111010
이 바이너리를 1자로 합친다
0000000100000001100101101100100011111010
이 데이터를 6비트로 나눈다
000000 010000 000110 010110 110010 001111 101000
이제 2진수를 10진수로 변환
0 16 6 22 50 15 40
이제 base64표를 보고 문자로 변환
A Q G W y p o
base64는 항상 4배수의 문자열을 유지해야함. 부족한 자리는 = 을 사용해서 패딩함
AQGWypo=
이 문자에 대한 숫자를 아스키코드로 변환
65 81 71 87 121 112 111 61
이걸 다시 8비트로 변환
01000001 01010001 01000111 01010111 01111001 01110000 01101111 00111101
이걸 보낸다

base64 표

notion image

아스키코드표

notion image

이미지에 base64 사용하는 법

실습

자바에서 데이터를 읽는 방법

📂 1. 텍스트 파일 읽기 (문자 기반)

방법
설명
예제
BufferedReader
줄 단위 읽기, 가장 일반적
new BufferedReader(new FileReader("file.txt"))
Scanner
토큰/줄 단위로 읽기
new Scanner(new File("file.txt"))
Files.readAllLines()
파일 전체를 List<String>으로 읽음
List<String> lines = Files.readAllLines(Paths.get("file.txt"));
FileReader
문자 단위로 읽기
new FileReader("file.txt")
Files.lines()
Java 8 Stream으로 줄 단위 읽기
Files.lines(Paths.get("file.txt")).forEach(System.out::println);

🗂️ 2. 바이너리 파일 읽기 (예: 이미지, PDF 등)

방법
설명
예제
FileInputStream
바이트 단위 읽기, 가장 기본적인 방식
new FileInputStream("file.png")
Files.readAllBytes()
파일 전체를 byte[]로 한 번에 읽기
byte[] bytes = Files.readAllBytes(Paths.get("file.png"));
BufferedInputStream
성능 향상을 위한 버퍼링된 InputStream
new BufferedInputStream(new FileInputStream("file.png"))
DataInputStream
원시 데이터 타입과 함께 사용
new DataInputStream(new FileInputStream("file.dat"))
RandomAccessFile
파일의 아무 위치에서 읽기 가능
new RandomAccessFile("file.dat", "r")

Main

import java.io.File; import java.io.IOException; import java.nio.file.Files; public class Main { public static void main(String[] args) { File imageFile = new File("src/1.png"); // 이미지파일의 프록시 객체 try { // 이미지 파일을 바이트 배열로 읽기 byte[] imageBytes = Files.readAllBytes(imageFile.toPath()); // MIME 타입 구하기 String mimeType = "image/png"; // PNG 이미지로 지정 (파일 확장자 기반) // Base64로 인코딩된 문자열 얻기 String base64Img = Base64Util.encodeAsString(imageBytes, mimeType); // 파일 이름 얻기 String filename = imageFile.getName(); // Pic 객체 생성 Pic pic = new Pic(mimeType, filename, base64Img); // 출력 System.out.println("MIME Type: " + pic.getMimeType()); System.out.println("Filename: " + pic.getFilename()); System.out.println("Base64 Encoded Image String: " + pic.getImgString()); // Base64 디코딩하여 byte[]로 변환 byte[] decodedBytes = Base64Util.decodeAsBytes(pic.getImgString()); System.out.println("Decoded byte array length: " + decodedBytes.length); // 디코딩된 byte[]의 길이 출력 } catch (IOException e) { e.printStackTrace(); } } }
notion image

Base64Util

import java.util.Base64; public class Base64Util { // image/jpeg 중에 jpeg만 return public static String getMimeType(String imgBase64) { int beginIndex = imgBase64.indexOf("/") + 1; int endIndex = imgBase64.indexOf(";"); String mimeType = imgBase64.substring(beginIndex, endIndex); return mimeType; } public static String encodeAsString(byte[] imgBytes, String mimeType) { String imgBase64 = Base64.getEncoder().encodeToString(imgBytes); imgBase64 = "data:$mimeType;base64,$imgBase64".replace("$mimeType", mimeType).replace("$imgBase64", imgBase64); return imgBase64; } public static byte[] decodeAsBytes(String imgBase64) { // 1. mimetype parsing String mimeType = getMimeType(imgBase64); //System.out.println(mimeType); // 2. img parsing int prefixEndIndex = imgBase64.indexOf(","); String img = imgBase64.substring(prefixEndIndex + 1); //System.out.println(img); // 3. base64 decode to byte[] byte[] imgBytes = Base64.getDecoder().decode(img); return imgBytes; } }

Pic

public class Pic { private String mimeType; private String filename; private String imgString; public Pic(String mimeType, String filename, String imgString) { this.mimeType = mimeType; this.filename = filename; this.imgString = imgString; } public String getMimeType() { return mimeType; } public String getFilename() { return filename; } public String getImgString() { return imgString; } }
정준씨 보고 수정 정리

"data:$mimeType;base64,$imgBase64”를 사용하는 이유

"data:$mimeType;base64,$imgBase64"Base64 인코딩된 이미지 데이터를 HTML이나 웹에서 사용할 수 있는 형식으로 변환하기 위한 문자열 형식입니다. 이 형식은 Data URI scheme이라고 불리며, 이미지와 같은 파일을 외부 링크 없이 직접 HTML 문서 내에 인라인으로 삽입하는 방법을 제공합니다.

Data URI Scheme 이해

Data URI scheme은 파일을 URL 형식으로 인코딩한 형태입니다. 이 방법은 이미지나 다른 파일을 웹 페이지의 HTML 코드 내에 직접 포함시킬 수 있도록 해줍니다. data:로 시작하는 문자열은 파일의 데이터를 바로 포함하는 형식을 의미하며, 이후 base64로 인코딩된 데이터를 포함합니다.

형식

data:[<mimeType>];base64,[<base64Data>]
  • data:: Data URI의 시작을 나타내는 부분입니다.
  • <mimeType>: 파일의 MIME 타입입니다. 예를 들어 image/png, image/jpeg 등이 될 수 있습니다.
  • base64: 이 문자열은 파일 데이터가 Base64 형식으로 인코딩되었음을 나타냅니다.
  • <base64Data>: 실제 Base64로 인코딩된 데이터입니다. 이것은 파일의 바이너리 데이터를 텍스트 형식으로 변환한 것입니다.

예시

"data:$mimeType;base64,$imgBase64"에서 $mimeTypeimage/png와 같은 파일의 MIME 타입이고, $imgBase64는 Base64로 인코딩된 이미지 파일 데이터입니다.
예를 들어, imgBase64"iVBORw0KGgoAAAANSUhEUgAAAAUA..."와 같다면, 이 문자열은 다음과 같이 변환됩니다.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...

왜 사용하는가?

  1. 웹 페이지에 이미지를 인라인으로 포함할 수 있습니다:
      • 이 방식은 이미지 파일을 별도로 로드하지 않고, HTML 코드 내에 직접 삽입할 수 있게 해줍니다. 이를 통해 웹 페이지가 요청을 별도로 보내지 않고 이미지를 표시할 수 있습니다. 특히 작은 이미지나 아이콘을 웹 페이지에 포함시킬 때 유용합니다.
  1. 서버에서 파일을 별도로 요청할 필요가 없음:
      • 파일을 서버에서 별도로 요청하지 않고, 웹 페이지에 내장된 형태로 이미지를 포함시키므로, HTTP 요청을 줄일 수 있습니다.
  1. 메일, HTML 문서 등에서 유용:
      • 이메일, HTML 이메일, 특정 웹 애플리케이션 등에서 이미지를 외부 리소스로 로딩하지 않고 바로 삽입할 수 있습니다. 이를 통해 메일을 보낼 때 수신자가 해당 이미지를 바로 볼 수 있도록 할 수 있습니다.

사용 예시

예를 들어, 웹에서 이미지 파일을 사용하려면 일반적으로 <img> 태그를 사용합니다.

파일을 외부에서 불러오는 경우 (일반적인 이미지 링크):

<img src="https://www.example.com/image.png" alt="Example Image">

Base64로 인코딩된 이미지를 포함하는 경우:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt="Example Image">

장점과 단점

장점:

  1. 파일 요청을 줄일 수 있음: 작은 이미지 파일을 서버에서 불러오는 대신 HTML에 직접 포함시켜 네트워크 요청을 줄일 수 있습니다.
  1. 독립적인 파일 포함: 별도의 이미지 파일을 업로드하거나 관리할 필요 없이 파일을 HTML 코드 내에 직접 삽입할 수 있습니다.

단점:

  1. 파일 크기 증가: Base64 인코딩된 데이터가 원본 파일보다 약 33% 더 커지므로 전체 페이지 크기가 커질 수 있습니다. 따라서 큰 파일에는 비효율적일 수 있습니다.
  1. 브라우저 캐싱 불가: HTML 내에 직접 포함된 이미지는 브라우저 캐시를 사용할 수 없기 때문에, 동일한 이미지를 여러 번 사용하면 불필요한 데이터 전송이 발생할 수 있습니다.

결론

"data:$mimeType;base64,$imgBase64"이미지 데이터를 Base64로 인코딩하여 HTML 문서 내에 직접 삽입하기 위해 사용됩니다. 이 방식은 서버 요청을 줄이고, 파일을 웹 페이지 내에 내장시켜 전달할 수 있지만, 파일 크기와 성능에 미치는 영향을 고려해야 합니다.
 
Share article

jjack1