PICTURE · BASE64
Base64 변환
이미지를 넣으면 HTML·CSS에 바로 쓰는 Data URL을 만듭니다.
- 1.인코딩 / 디코딩 모드를 고릅니다
- 2.인코딩: 이미지를 끌어다 놓고 출력 형식(데이터 URL·IMG·CSS)을 선택합니다
- 3.디코딩: Base64 문자열을 붙여넣고 ‘디코딩’을 누릅니다
- 4.생성된 코드를 복사하거나 이미지를 다운로드합니다
→ 결과물: Base64 데이터 URL·HTML·CSS 스니펫(인코딩) 또는 복원된 이미지 파일(디코딩)
이미지를 넣으면 Data URL이 표시됩니다.
이 도구는
이미지를 Base64 문자열로 바꿔 `data:` URL 형태로 내보냅니다. 이미지 파일을 따로 두지 않고 HTML이나 CSS 안에 직접 박아 넣을 수 있어, 파일 하나로 끝내야 하는 곳에 쓰입니다.
이럴 때 씁니다
- —메일 템플릿처럼 외부 이미지가 차단되는 곳에 작은 아이콘을 넣을 때
- —단일 HTML 파일 안에 이미지까지 담아 통째로 전달할 때
- —요청 횟수를 줄이려고 아주 작은 아이콘을 CSS에 심을 때
알아둘 점
- —Base64로 바꾸면 용량이 약 3분의 1 늘어납니다. 큰 사진에는 적합하지 않습니다.
- —브라우저가 따로 캐시하지 못하므로, 여러 페이지에서 쓰는 이미지는 파일로 두는 편이 빠릅니다.
- —문자열이 매우 길어져 코드 가독성이 떨어지니 작은 아이콘 정도에만 쓰세요.