GIF를 Base64로

GIF를 Base64로 변환하는 방법

1. .gif 파일을 상자에 놓거나 파일 선택 창에서 고르세요.
2. 움직이는 GIF라면 최대 너비, 변환 형식, 메타데이터(EXIF) 제거를 건드리지 마세요.
3. 출력 형식을 고르세요: Data URI, CSS background-image, HTML <img>, Markdown, 일반 Base64.
4. 출력 복사를 누르세요. 미터에 텍스트가 파일보다 얼마나 큰지 표시됩니다.

미리보기에서 애니메이션이 재생되므로 복사하기 전에 맞는 파일인지 확인할 수 있습니다.

애니메이션과 재인코딩 옵션

출력 위의 옵션들은 이미지를 캔버스에 다시 그립니다. 캔버스에는 정지 이미지 한 장만 담기고 브라우저는 캔버스에서 GIF 파일을 만들 수 없으므로, 다시 인코딩한 GIF는 첫 프레임만 담은 PNG(직접 고르면 JPEG나 WebP)로 나옵니다. 애니메이션의 정지 썸네일이 필요할 때 유용하며, 애니메이션을 유지하려면 옵션을 꺼 두세요.

움직이는 GIF가 너무 크다면 이 도구에 넣기 전에 줄여야 합니다. GIF 편집기에서 프레임 수, 크기, 색상 팔레트를 줄이거나, 같은 클립의 GIF보다 대개 훨씬 작은 반복 재생 MP4나 WebM으로 바꾸세요.

GIF Base64의 생김새

아래의 1×1 투명 GIF는 42바이트이며, Base64로 56문자입니다.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" width="1" height="1">

예전에는 테이블 레이아웃을 채우는 데 쓰였고, 지금도 지연 로딩 이미지의 자리 표시자 src로 보입니다. 올바른 이미지라서 깨진 이미지 아이콘도, 추가 요청도 생기지 않기 때문입니다.

움직이는 GIF의 Base64 크기

GIF 압축은 요즘 기준으로 약하고, 움직이는 GIF는 모든 프레임을 저장합니다. 2초짜리 리액션 GIF도 몇 메가바이트가 되기 쉽고, Base64 텍스트로는 몇 메가바이트가 됩니다. 로딩 스피너나 작은 아이콘처럼 작은 GIF만 인라인하세요. 그보다 큰 것은 일반 파일로 두면 캐시와 지연 로딩이 가능하지만, data URI는 그것이 들어간 페이지마다 다시 내려받습니다.

이메일에는 Base64 GIF가 잘 맞지 않습니다. Gmail을 비롯한 웹메일 클라이언트는 data URI 이미지를 표시하지 않으므로, 뉴스레터의 움직이는 GIF는 호스팅된 파일로 링크합니다. 이메일 속 Base64를 참고하세요.

Node.js에서 GIF 인코딩하기

import { readFileSync } from "node:fs";

const gif = readFileSync("spinner.gif");
const uri = `data:image/gif;base64,${gif.toString("base64")}`;

스트림과 URL-safe 출력은 Node.js의 Base64에서 다룹니다. Base64 문자열을 재생 가능한 파일로 되돌리려면 Base64를 GIF로를 사용하세요.

자주 묻는 질문