이미지를 Base64 인코딩 문자열로 변환해서 HTML에 삽입하기 (Python 사용)

2022. 7. 28. 08:26[개발] 지식/Python

HTML에서 이미지를 삽입하려면 보통 <img> 태그에서 src 속성에 이미지 경로 또는 링크를 넣어 사용한다. 하지만 html 파일 하나에 이미지를 포함시키고 싶은 경우, base64 문자열로 인코딩된 이미지를 삽입할 수도 있다.

<img src="data:image/png;base64,<인코딩 문자열>" />

이런식으로 사용하는데, src 속성에 data의 종류, 형식, 인코딩 방식, 인코딩 문자열 을 넣으면 브라우저는 링크를 통해 이미지를 다운받을 필요없이 바로 출력할 수 있다. 오프라인 환경에서 html 파일을 실행해야 하는 경우 종종 사용된다.

이런 작업을 하기 위해서는 이미지를 base64 인코딩하는 작업이 필요하다. 인터넷에 변환해주는 사이트들이 있지만 솔직히 그런 사이트들을 (보안, 정보유출 등) 믿기 힘들다. 특히 회사 내 이미지를 사용하는 경우 외부 서비스에 업로드 하기 껄끄러울 수 밖에 없다. 이럴 때 Python을 이용하면 간단하게 base64 변환 문자열을 얻을 수 있다.

Python을 활용한 이미지 파일 base64 인코딩

1. base64 모듈 import

import base64

base64 모듈을 import 한다. Python 내장이므로 별도로 설치할 필요가 없다.

2. base64 인코딩

encoded = base64.b64encode(open("D:/test.png", "rb").read())

b64encode 함수를 실행해서 인코딩한다. open 함수를 통해 파일 객체를 얻어 넘겨주어야 한다. (간단)

3. img 태그에 삽입

<img src="data:image/png;base64,<인코딩 문자열>" />

2번에서 얻은 인코딩 문자열을 복사해서 <인코딩 문자열> 이라고 된 부분에 붙여넣는다. 끝.

<