Base 64

'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxN0QyOTY2NjI0MzAxMUU4OENCMTkwNTRGOTUzNkNGMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxN0QyOTY2NzI0MzAxMUU4OENCMTkwNTRGOTUzNkNGMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE3RDI5NjY0MjQzMDExRTg4Q0IxOTA1NEY5NTM2Q0YxIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE3RDI5NjY1MjQzMDExRTg4Q0IxOTA1NEY5NTM2Q0YxIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+B9qswwAAAJNJREFUeNrs1jEKQjEQBNDZIKROYfFLwU5yEK/gXTzCr2xsvFQ6IVYBLxBEAsE4OcQKwg7Mst1ju5WU0hHAjV2glze7xhjPQvAZQlgYNa21hpwzROTg5mWa2Iz3Hs5NCjuHH8dAAw000EADDTTQwD8Ax4Yjl1L2fIbVlN47xhgfrvcJnmqtF3areNmLvfLVf3wFGABm2ybAqw1QMAAAAABJRU5ErkJggg==',

img의 src가 위와 같은 긴 코드가 들어간 경우는 base64 인코딩 방식을 사용하는 것

 

Base64는 데이터 64진법을 나타내는 것.

 

작은 이미지 파일을 인라인으로 작성하므로 서버에 요청하지 않고 이미지를 사용 할 수 있음. 

 

이미지 파일을 base64로 인코딩 후, 결과를 복사해 사용하면 됨.

 

// 기본 형태
data:[<mediatype>][;base64],<data>

// HTML ➡︎ img태그 src  
<img src="data:image/<이미지확장자>;base64,<data코드>")

// CSS ➡︎ background-image  
background-image: url('data:image/<이미지확장자>;base64,<data코드>')

 

장점 : 간단한 구현, 빠른 로딩속도

단점 : 코딩 라인 증가, 용량이 커짐