HTML | base64를 활용해 이미지 업로드 필요 없이 img 태그안에 이미지 정보 담는방법

HTML의 IMG 태그 내에 이미지 정보를 담는 방법을 소개하는 글이다.

HTML img base64 인코딩

IMG 태그에 이미지 정보 직접 대입

웹 페이지를 구성하면서 특정 페이지에서만 이용하는 이미지가 있을 수 있다. 이럴때도 다른 폴더에 이미지를 업로드 해놓고 사용할 수도 있지다. 하지만 아주 간단한 정적 페이지를 만드는 경우나 잦은 이동으로 이미지 파일을 잃어버릴 수 있는 상황 등 번거로운 상황을 아예 없애기 위해 이미지정보를 IMG 태그 안에 직접 담을 수 있는 방법이 있다. 방법은 이미지를 Base64를 기반으로 인코딩 하는 것이다.

Base64 인코딩이란?

Base64 인코딩은 어떤 운영체제에서도 문제 없이 사용 가능한 기본 64개의 문자를 활용해 정보를 변환하는 것이다. 기본적인 이해는 이것으로 충분하다. 사용방법은 다음 챕터를 넘기고 "Base인코딩 방법"으로 가면 된다.

64의 의미

Base64에서 64는 2의 6승을 나타낸다. 즉 6개의 비트로 나타낼 수 있는 수의 개수를 말하는 것이다.

Base64에서 사용 하는 문자

Base64에서는 64개의 문자를 사용한다. 이 문자들은 기기가 어떤 언어로 작동하던지, 어떤운영체제든지 상관없이 인식이 가능한 문자이다. 따라서 Base라고 부른 것이다. 64개의 문자는 다음의 표와 같다.

계산값	Base 문자	계산값	Base 문자	계산값	Base 문자	계산값	Base 문자
0	A	16	Q	32	g	48	w
1	B	17	R	33	h	49	x
2	C	18	S	34	i	50	y
3	D	19	T	35	j	51	z
4	E	20	U	36	k	52	0
5	F	21	V	37	l	53	1
6	G	22	W	38	m	54	2
7	H	23	X	39	n	55	3
8	I	24	Y	40	o	56	4
9	J	25	Z	41	p	57	5
10	K	26	a	42	q	58	6
11	L	27	b	43	r	59	7
12	M	28	c	44	s	60	8
13	N	29	d	45	t	61	9
14	O	30	e	46	u	62	+
15	P	31	f	47	v	63	/

계산값을 이용한 Base64문자로 변환

보통 위의 숫자를 계산값이라고 말하진 않는다. 하지만 zyn이 여기서 계산값이라고 쓴 이유는 실제로 계산한 데이터를 이 표와 참조해서 Base문자를 사용하기 때문이다. 디지털 데이터는 0과 1로 이루어져 있다. 이미지나 영상도 예외가 아니다. 이를 텍스트로 작성한다면 아래와 같은 모습일 것이다.

1010101111000000101010010000010100101010

 위와 같은 데이터를 Base64로 변환할 때는 앞에서 부터 6개씩 숫자를 분할한다. 그럼 위의 이미지는 아래와 같이 분할이 된다.

101010 111100 000010 101001 000001 010010 1010

그럼 이제 위의 수는 6개의 수로 이루어진 2진수의 수로 볼 수 있다. 이 수들을 10진수의 수들로 변환하면 아래와 같다.

42 56 2 41 1 18 40

마지막에 6글자가 되지 않으면 자동으로 뒷부분에 0을 이용해 6자리의 2진수를 완성시켜 변환한다. 이제 이 숫자들을 위의 표의 계산값 열에서 찾고 그에 대응하는 Base64 문자로 변환하면 된다.

q4CpASo

Base64 인코딩 방법

실제로 이미지를 직접 위와같이 계산할 필요는 없다. 이를 간단하게 도와주는 웹페이지들이 많이 있다.

base64 encode 검색

검색엔진에서 base64 encode를 검색하면 다양한 무료 웹변환 서비스들이 있다. 어떤 것을 사용해도 상관없다.

base64 endoce 검색

이미지 업로드

어떤 서비스를 들어가도 "Base64 Encode"를 이용해야 한다. Base64 Decode는 Base64로 작성된 데이터를 우리가 사용하는 데이터로 변환하는 반대 과정이다.

base64 인코딩

원하는 파일을 업로드한 뒤 Encode 버튼을 누른다.

base64로 변환된 데이터

그럼 위와 같이 엄청나게 긴 문자열로 변환된 결과를 얻을 수 있다. 이 문자 전체를 복사한다.

img 태그에 삽입

이제 img 태그내에 이 코드를 규칙에 맞게 붙여넣기만 해주면 된다.

<img src="data:<mediatype>;base64, "<Base64로 인코딩된 문자열>"/>
<!-- 이미지의 경우 -->
<img src="data:image/jpeg;base64, "<Base64로 인코딩된 문자열>"/>

위와 같이 작성하고 <Base64로 인코딩된 문자열> 위치에 위에서 복사한 데이터를 입력하면 된다. 입력한 모습은 아래와 비슷하다. 예시 자료로 데이터는 임의로 작성된 것을 집어넣었다.

<img src="data:image/jpeg;base64, "/9j/4AAQSkZJRgABAQEASABIAAD/4QM4RXhpZgAASUkqAAgAAAAMAAABBAABAAAAsAsAAAEBBAABAAAAsAsAAA8BAgAIAAAAngAAABABAgAJAAAApgAAABoBBQABAAAAsAAAABsBBQABAAAAuAAAACgBAwABAAAAAgAAADEBAgALAAAAwAAAADIBAgAUAAAAzAAAABMCAwABAAAAAQAAAGmHBAABAAAA4AAAACWIBAABAAAAqgIAAAAAAABzYW1zdW5nAFNNLU45ODZOAABIAAAAAQAAAEgAAAABAAAAUGhvdG9TY2FwZQAAMjAyMzowMjowNSAxODowNDoxMgAaAJqCBQABAAAAHgIAAJ2CBQABAAAAJgIAACKIAwABAAAAAgAAACeIAwABAAAAUAAAAACQBwAEAAAAMDIyMAOQAgAUAAAALgIAAASQAgAUAAAAQgIAABCQAgAHAAAAVgIAABGQAgAHAAAAXgIAAAGSCgABAAAAZgIAAAKSBQABAAAAbgIAAAOSCgABAAAAdgIAAASSCgABAAAAfgIAAAWSBQABAAAAhgIAAAeSAwABAAAAAgAAAAmSAwABAAAAAAAAAAqSBQABAAAAjgIAAAGgAwABAAAAAQAAAAKgBAABAAAAsAsA"/>

이렇게 작성하면 HTML 자체는 굉장히 길어지고 용량도 다소 증가하지만 데이터가 유실될 위험은 없어진다.