html에 img의 src에 url이 아닌 숫자와 문자로 구성된 긴 코드가 들어간 경우가 있었는데
data:image/png;base64
와 같은 형태였다.
검색 후 아래와 경우에는 이미지를 base64인코딩 방식으로 사용한다는것을 알았다.- 크기가 작은 이미지를 이미지 파일없이 html에 만들어 넣는다거나
- 간단한 페이지를 작성해 임시로 이미지를 사용하는 경우
- 메일을 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%의 크기 증가가 발생한다.
✓ Referencehttps://medium.com/@pks2974/base-64-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-da50fdfc49d2https://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%80https://devfunpj.tistory.com/16