html에 img의 src에 url이 아닌 숫자와 문자로 구성된 긴 코드가 들어간 경우가 있었는데 data:image/png;base64와 같은 형태였다.
검색 후 아래와 경우에는 이미지를 base64인코딩 방식으로 사용한다는것을 알았다.

1. 크기가 작은 이미지를 이미지 파일없이 html에 만들어 넣는다거나
2. 간단한 페이지를 작성해 임시로 이미지를 사용하는 경우
3. 메일을 html으로 작성해서 보내는 경우
   
   

그렇다면, base 64는 무엇일까?🥸

base 64

Base 64 는 데이터를 64진법 으로 나타내는 것으로,
0부터 63까지 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ 으로 나타낸다.

A-Z,a-z,0–9,/+ 만을 사용하기 때문에,
문자 포맷이 달라 데이터를 손상시킬 수있는 시스템 간에 안정적으로 전송 될 수 있다.

Data URI scheme

DataURL 은 작은 이미지 같은 파일을 문서 (Html, JS, CSS) 에 인라인으로 작성할 수 있는데, 작성된 이미지와 같은 정보는 이미 문서에 포함되어 있기때문에, 서버에 요청하지 않고도 이미지를, 사용할 수 있다.

이미지 파일 base64로 인코딩하기

https://www.base64-image.de/
위의 사이트에 이미지를 업로드 후 ,

결과를 복사해 아래처럼 붙여넣어 사용하면 된다.

base64 사용하기

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

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

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

JavaScript ➡︎ 예시

<script>
var img = new Image();
img.addEventListener('load', () => {
    // 캔버스에 그리기
    var ctx = document.querySelector('canvas').getContext('2d');
    ctx.drawImage(img, 0, 0);
});
img.src ="data:image/<이미지확장자>;base64,<data코드>"
</script>

base64인코딩 장단점

장점

• 서버에 이미지를 넣지 않아도 되므로 간단한 구현이 가능하다.
• 렌더시, 문서로딩과 같이 로딩되기에 끊기지 않고 불려온다.

단점

• 코딩시 가독성이 떨어진다.
• 용량이 커진다
  256가지를 표현할 수 있는 바이트를 printable한 64가지를 사용해서 표현하니 당연하다.
  다시 말해, 8비트를 6비트로 표현하는 것이다.
  3개의 8비트는 4개의 6비트로 표현할 수 있다.
  따라서 Base64 인코딩을 사용하면 원본보다 33%의 크기 증가가 발생한다.
  

---

✓ Reference
https://medium.com/@pks2974/base-64-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-da50fdfc49d2
https://hsmtree.wordpress.com/2016/05/05/data-uris%EB%A1%9C-image-%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0/
https://devday.tistory.com/entry/Base64%EB%A1%9C-%EC%9D%B8%EC%BD%94%EB%94%A9-Encoding-%EC%8B%9C-%ED%81%AC%EA%B8%B0-Size-%EC%A6%9D%EA%B0%80
https://devfunpj.tistory.com/16