이미지를 표현하는데 사용하는 숫자 255가 아스키코드표를 사용하여 변환할 수 없기 때문에 나온방법
이미지의 비트 표현방식은 8비트, 아스키코드의 문자 표현 방식은 7비트 따라서 이미지를 6비트로 다운 시킨 다음 다시 아스키코드로 변환한다
- 이미지를 표현하는 숫자 255 → 아스키코드표로 변환 불가
- 숫자 255를 바이너리로 변환
- 6비트씩 자름
- base64표를 보고 변환
- 이 변환된 값을 다시 아스키코드로 변환
- 이 데이터를 전송
base64를 사용하는 목적

base64를 사용하는 예시
이미지를 문자열로 인코딩

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 표

아스키코드표

이미지에 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();
}
}
}

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"
에서 $mimeType
은 image/png
와 같은 파일의 MIME 타입이고, $imgBase64
는 Base64로 인코딩된 이미지 파일 데이터입니다.예를 들어,
imgBase64
가 "iVBORw0KGgoAAAANSUhEUgAAAAUA..."
와 같다면, 이 문자열은 다음과 같이 변환됩니다.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
왜 사용하는가?
- 웹 페이지에 이미지를 인라인으로 포함할 수 있습니다:
- 이 방식은 이미지 파일을 별도로 로드하지 않고, HTML 코드 내에 직접 삽입할 수 있게 해줍니다. 이를 통해 웹 페이지가 요청을 별도로 보내지 않고 이미지를 표시할 수 있습니다. 특히 작은 이미지나 아이콘을 웹 페이지에 포함시킬 때 유용합니다.
- 서버에서 파일을 별도로 요청할 필요가 없음:
- 파일을 서버에서 별도로 요청하지 않고, 웹 페이지에 내장된 형태로 이미지를 포함시키므로, HTTP 요청을 줄일 수 있습니다.
- 메일, 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">
장점과 단점
장점:
- 파일 요청을 줄일 수 있음: 작은 이미지 파일을 서버에서 불러오는 대신 HTML에 직접 포함시켜 네트워크 요청을 줄일 수 있습니다.
- 독립적인 파일 포함: 별도의 이미지 파일을 업로드하거나 관리할 필요 없이 파일을 HTML 코드 내에 직접 삽입할 수 있습니다.
단점:
- 파일 크기 증가: Base64 인코딩된 데이터가 원본 파일보다 약 33% 더 커지므로 전체 페이지 크기가 커질 수 있습니다. 따라서 큰 파일에는 비효율적일 수 있습니다.
- 브라우저 캐싱 불가: HTML 내에 직접 포함된 이미지는 브라우저 캐시를 사용할 수 없기 때문에, 동일한 이미지를 여러 번 사용하면 불필요한 데이터 전송이 발생할 수 있습니다.
결론
"data:$mimeType;base64,$imgBase64"
는 이미지 데이터를 Base64로 인코딩하여 HTML 문서 내에 직접 삽입하기 위해 사용됩니다. 이 방식은 서버 요청을 줄이고, 파일을 웹 페이지 내에 내장시켜 전달할 수 있지만, 파일 크기와 성능에 미치는 영향을 고려해야 합니다.Share article