PNG to base64
천둥상어
·2025. 1. 6. 22:21
반응형
웹에서 이미지는 하나의 긴 코드로 분해될 수 있다.
이것을 'base64 문자열' 이라고 한다.
해당 코드에는 이미지 정보가 모두 포함되어 있으며, png 파일을 완벽히 대체한다.
즉 base64 문자열은 모든 픽셀 위치와 색상 값이 포함되어 있다.
아래 사이트에서 png 이미지를 쉽게 base64 문자열로 변환할 수 있다.
https://onlinepngtools.com/convert-png-to-base64
이때 변환되는 문자열은 data:image/png;base64로 시작해야 한다.
그래서 옵션에서 Valid data:image URL을 꼭 체크해 주자.
(png to base64로 검색하면 이 사이트 말고도 더 나오니 편한걸 사용하면 된다.)
이제 아래와 같이 img 태그 src에 base64 문자열을 넣어주면 동일한 이미지가 렌더링 되는 것을 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>png to base64</title>
</head>
<body>
<img
src="data:image/png;base64,iV4JdEhsYe0Lr/sxFXV8SE..........................."
/>
</body>
</html>반응형
'프로그래밍 > 개발 일기' 카테고리의 다른 글
| 채용 담당자로서 서류 전형 불합격 처리하는 이유 (0) | 2024.10.09 |
|---|---|
| Parcel & 플러그인 설치 (3) | 2024.09.20 |
| [에러] 이 시스템에서 스크립트를 실행할 수 없으므로... (0) | 2024.09.11 |
| 로컬 서버에서 스파인 플레이어 실행하기 (0) | 2024.08.22 |
| [서적 구입] 개발자가 영어도 잘해야 하나요? (0) | 2024.07.06 |
