사용 방법
- GIF를 드롭 영역에 끌어다 놓거나, 클릭해서 선택하거나, 이미지를 붙여넣습니다.
- 애니메이션을 유지하려면 ‘변환 형식’은 ‘원본 유지’로, ‘최대 너비’는 ‘원본 크기’로 둡니다.
- 원본 크기와 인코딩 후 크기를 확인합니다. 애니메이션 GIF는 크기가 빠르게 커집니다.
- img 태그나 CSS 배경 이미지 출력을 복사하거나, data URI, 순수 Base64, Markdown 버전 중 필요한 것을 사용합니다.
GIF 형식 소개
GIF(Graphics Interchange Format, MIME 유형 image/gif)는 1987년에 등장했습니다. 각 프레임은 최대 256색 팔레트를 사용하며 LZW로 무손실 압축됩니다. 투명도는 완전히 투명하거나 완전히 불투명한 두 가지뿐입니다. 팔레트 항목 하나를 투명으로 지정할 수는 있지만 반투명은 지원하지 않습니다. 한 파일에 프레임별 지연 시간과 반복 횟수를 지정한 여러 프레임을 담을 수 있어, GIF는 짧은 애니메이션의 대표 형식이 되었습니다.
GIF의 Base64는 흔히 쓰이는 GIF89a 버전이면 R0lGODlh로, 이전 버전인 GIF87a이면 R0lGODdh로 시작합니다.
애니메이션 유지하기
원본 형식을 유지하면 도구가 파일 바이트를 그대로 인코딩합니다. 따라서 data URI는 <img> 태그에서든 CSS 배경에서든 원본 파일과 똑같이 움직입니다.
PNG, JPEG, WebP로 변환하거나 ‘최대 너비’를 설정하면 브라우저에서 이미지를 다시 그리므로 첫 번째 프레임만 남습니다. 애니메이션의 정지 미리 보기가 필요할 때는 유용하지만, 움직이는 버전을 원한다면 두 옵션을 모두 사용하지 마십시오.
GIF data URI가 여전히 유용한 경우
- CSS에 넣는 작은 로딩 스피너와 애니메이션 상태 아이콘
- 플레이스홀더
src로 쓰는 고전적인 1x1 투명 픽셀(수십 바이트에 불과하며 Base64로도 100자에 한참 못 미침) - GIF로 작게 저장할 수 있는, 색이 적은 단순한 선화
큰 애니메이션에는 맞지 않습니다. 2MB짜리 리액션 GIF는 따로 캐시할 수 없는 약 2.7MB의 텍스트가 됩니다. 호스팅한 동영상 파일이나 애니메이션 WebP가 훨씬 가볍습니다.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">자주 묻는 질문
Base64로 인코딩한 뒤에도 GIF가 움직입니까?
예. 원본 형식을 유지하고 크기를 조정하지 않는다면 움직입니다. Base64에는 모든 프레임과 반복 설정을 포함한 파일 전체가 저장됩니다.
변환한 뒤 GIF가 움직이지 않는 이유는 무엇입니까?
PNG, JPEG, WebP로 변환하거나 크기를 조정하면 첫 번째 프레임으로 이미지를 다시 렌더링합니다. 이 도구는 애니메이션 PNG나 WebP 파일을 만들 수 없으므로, 움직임을 유지하려면 원본 GIF를 그대로 두십시오.