Base64 간단정리 + Base64 이미지 html,css,JS로 사용하기

 

img의 src에 파일을 업로드 하지 않고 긴 문자형태가 들어가 있는 것을 봤는데,
  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,/+ 만을 사용하기 때문에,
문자 포맷이 달라 데이터를 손상시킬 수있는 시스템 간에 안정적으로 전송 될 수 있다.

 

base64인코딩 장단점

장점

- 서버에 이미지를 넣지 않아도 되므로 간단한 구현이 가능하다.

- 렌더시, 문서로딩과 같이 로딩되기에 끊기지 않고 불려온다.

 

단점

- 코딩시 가독성이 떨어진다.

- 용량이 커진다

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

 

이미지 파일 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

➡︎ 예시

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>

 

 

 

 

✔︎참고

---

https://velog.io/@byeol4001/Base-64%EC%99%80-base64-img-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

Base 64와 base64 img 사용하기

%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