HTML GIF 변환, 브라우저에서 한 프레임씩

작동 방식

세 단계, 모두 브라우저에서

도구가 페이지의 시계를 넘겨받아 한 프레임씩 진행하며 그립니다. 그래서 느린 노트북에서도 빠른 컴퓨터와 똑같은 영상이 나옵니다.

1. <style>

   h1 { animation: rise 1.2s }

   @keyframes rise { … }

   </style>

   <h1>Hello</h1>

   HTMLanimation.html
   01

   붙여 넣거나 파일 끌어다 놓기

   CSS와 JavaScript가 포함된 전체 페이지, .html 파일, 또는 이미지와 글꼴이 담긴 .zip 내보내기 파일. CDN 라이브러리도 평소처럼 불러옵니다.

2. 16:9

   9:16

   1:1

   ⏱ 4.5 s · auto
   02

   형식과 크기 고르기

   MP4, GIF, WebM 또는 PNG 프레임. 16:9, 9:16, 1:1. 720p~4K, 24·30·60fps. 애니메이션에 끝이 있으면 길이가 자동으로 정해집니다.

3. 142 / 180

   →

   MP4GIF60 fps
   03

   렌더링하고 다운로드

   각 프레임을 내 컴퓨터에서 그리고 인코딩한 뒤 바로 다운로드할 수 있습니다. 화면 공유 요청도, 업로드도 없습니다.

작고 선명한 GIF 만들기

• 짧게

  2~6초면 충분합니다. GIF 용량은 프레임마다 늘어납니다.

• 한 주기만 반복

  길이를 애니메이션의 한 주기로 맞추면 반복 지점에서 튀지 않습니다.

• 15fps, 480p

  기본값은 대부분의 문서와 채팅에 맞습니다. 빠른 움직임에는 25fps, 디테일에는 720p를 쓰세요.

• 단색이 가장 잘 나와요

  GIF는 프레임당 256색이라 긴 그라데이션과 사진에는 띠가 생깁니다. 그런 경우에는 MP4가 더 작고 선명합니다.