HTML GIF 변환

Q: 채팅 앱에 올릴 만큼 GIF 용량을 줄이려면 어떻게 합니까?

**HTML 페이지 너비**를 좁히거나 첫 페이지만 변환하십시오. 그래도 한도를 넘는다면 [디스코드용 GIF 압축](/compress-gif-for-discord)으로 업로드 한도에 맞게 줄일 수 있습니다.

HTML 파일을 브라우저 엔진으로 렌더링해 GIF로 저장합니다. 이메일 서명, 오래된 커뮤니티, 구형 CMS 입력란처럼 아직 이 형식을 요구하는 곳을 위한 기능입니다. 창 너비와, 긴 그림 한 장으로 받을지 페이지 크기 프레임을 이어 붙인 형태로 받을지를 직접 고릅니다.

또는 DOC, DOCX, DOCM … 파일을 여기에 끌어다 놓으세요 ·

파일당 최대 95 MB· 최대 20개 파일· 30분 뒤 삭제

출력

변환할 형식

해상도

이미지

파일은 UltKit 서버에서 처리되며 30분 뒤 삭제됩니다.

사용 방법

1
HTML 업로드
.html, .htm, .mhtml 파일을 한 번에 최대 20개, 파일당 95 MB까지 추가합니다. 페이지를 웹 페이지, 단일 파일로 저장하면 이미지와 스타일이 함께 담깁니다.
2
너비와 레이아웃 선택
HTML 페이지 너비는 1280 px입니다. 이메일 템플릿이라면 600 px를 쓰십시오. 이미지는 긴 이미지 한 장, 즉 정지 GIF 한 장으로 설정되어 있습니다. 페이지 크기 프레임을 차례로 보여 주려면 페이지마다 한 장으로 바꾸십시오.
3
GIF로 변환
GIF로 변환을 누릅니다. GIF를 색이 있는 배경 위에 올려야 한다면 고급 설정에서 투명 배경을 켜십시오.

HTML GIF 변환은 페이지가 어떻게 움직이는지가 아니라 어떻게 보이는지를 담습니다. 브라우저가 지정한 너비로 페이지를 그리고, 결과는 정지 GIF 한 장이거나 페이지 크기 프레임 여러 장을 담은 파일 하나입니다.

HTML을 GIF로 변환하는 원리

먼저 HTML을 일반 웹 페이지처럼 배치합니다. 너비는 설정한 HTML 페이지 너비로, 320부터 3840 px까지 고를 수 있습니다. 파일 안의 스타일과 이미지가 적용되고, 불러올 수 없는 글꼴은 비슷한 글꼴로 대체됩니다. 그런 다음 렌더링된 페이지를 캡처합니다.

이미지를 긴 이미지 한 장으로 두면 머리글부터 바닥글까지 페이지 전체가 정지 GIF 한 장이 됩니다. 페이지마다 한 장으로 두면 페이지 크기 조각으로 잘리고, 그 조각들이 GIF 하나의 프레임이 되어 순서대로 재생됩니다. 긴 뉴스레터나 여러 섹션으로 된 랜딩 페이지를 스크롤 없이 미리 볼 때 편리합니다.

한계는 형식이 정합니다. GIF는 1987년 CompuServe가 처음 내놓았고, 1989년 GIF89a 개정에서 프레임 지연과 투명색이 추가되었으며, 지금도 모든 뷰어가 지원하는 것은 이 사양입니다. 프레임마다 팔레트가 256색으로 제한되므로 변환기는 페이지의 색을 찾을 수 있는 가장 좋은 팔레트에 대응시킵니다. 텍스트, 아이콘, 버튼, 단색 브랜드 색상은 깔끔하게 나오고, 사진과 부드러운 그림자가 가장 많이 손실됩니다.

렌더링한 웹 페이지에 영향을 주는 GIF의 한계

프레임당 색상 수: 256
픽셀 단위 투명도, 부드러운 가장자리 없음: 켜짐/꺼짐
페이지를 녹화하지 않고 캡처: 정지
한 번에 HTML 파일 20개, 파일당 95 MB: 20

HTML GIF 변환: 기대할 수 있는 것

오해페이지를 GIF로 만들면 마우스오버 효과와 애니메이션이 보인다.

사실상호작용 상태와 움직임은 사람이나 스크립트가 일으켜야 합니다. 캡처에는 멈춰 있는 페이지가 담깁니다.

오해GIF는 웹 페이지를 담기에 가장 작은 이미지 형식이다.

사실사진이 있는 페이지라면 대개 JPG나 WebP가 훨씬 작습니다. GIF는 단순한 단색 그래픽에서만 유리합니다.

오해웹사이트 주소만 있으면 GIF가 페이지를 가져온다.

사실변환기는 업로드한 HTML 파일로 작업합니다. 먼저 브라우저에서 페이지를 저장하십시오. 가능하면 MHTML 단일 파일이 좋습니다.

오해프레임을 많이 쓰면 GIF가 더 선명해진다.

사실프레임은 길이와 파일 용량을 늘릴 뿐 디테일을 더하지 않습니다. 선명도는 페이지 너비와 색상 팔레트가 결정합니다.

HTML

하이퍼텍스트 마크업 언어(HTML)

HTML은 웹의 마크업 언어로, 1990년대 초 Tim Berners-Lee가 처음 기술했고 현재는 WHATWG가 리빙 스탠더드로 관리합니다. HTML 파일은 제목, 문단, 링크, 표, 이미지, 양식을 기술하며 스타일은 보통 CSS가 담당합니다. 모든 브라우저가 렌더링하며 이메일 템플릿과 저장된 웹 페이지에도 쓰입니다. HTML 파일 하나는 외부 이미지와 스타일시트에 의존하는 경우가 많아, 파일만 따로 옮기면 깨져 보일 수 있습니다.

압축 방식: –
투명도: –
애니메이션: –
도입 연도: 1993 · Tim Berners-Lee; maintained by WHATWG

HTML 변환

GIF

그래픽 교환 형식(GIF)

GIF는 1987년 CompuServe가 도입한 형식으로, 지금도 짧게 반복되는 애니메이션을 가장 폭넓게 지원하는 형식입니다. 무손실이지만 프레임마다 256색 팔레트로 제한되어 사진과 그라데이션에서 계단 현상과 디더링이 보입니다. 투명도는 켜고 끄는(1비트) 방식만 지원해 곡선 가장자리가 들쭉날쭉해집니다. 움직이는 GIF는 같은 영상을 MP4나 WebP로 만든 것보다 훨씬 큰 경우가 많습니다. 모든 브라우저, 채팅 앱, SNS 플랫폼에서 GIF가 재생됩니다.

압축 방식: 무손실
투명도: 예
애니메이션: 예
도입 연도: 1987 · CompuServe

GIF 변환

이메일 서명이나 오래된 플랫폼처럼 받는 곳이 GIF만 허용할 때, 또는 여러 페이지 프레임을 동영상 플레이어 없이 재생되는 파일 하나에 담고 싶을 때 렌더링한 페이지를 GIF로 저장합니다.

HTML GIF 변환 자주 묻는 질문

CSS 애니메이션을 움직이는 GIF로 만들 수 있습니까?

아닙니다. 페이지를 한 번 렌더링해 캡처하므로 CSS 전환, 키프레임 애니메이션, 동영상, 스크립트 효과는 그 순간에서 멈춘 모습으로 담깁니다. 움직임을 담으려면 페이지가 재생되는 동안 화면을 녹화하고 그 녹화본을 동영상 GIF 변환으로 바꾸십시오.

GIF에서 그라데이션과 사진이 거칠게 보이는 이유는 무엇입니까?

GIF 프레임 하나는 최대 256색만 쓸 수 있습니다. 부드러운 그라데이션, 그림자, 사진이 있는 페이지는 수천 가지 색을 쓰므로 디더링으로 근사하게 되고, 이것이 점무늬나 띠로 나타납니다. 단색 위주의 디자인과 텍스트는 잘 유지됩니다. 사진이 많은 페이지라면 HTML PNG 변환이 모든 색을 지킵니다.

투명 GIF의 가장자리가 들쭉날쭉한 이유는 무엇입니까?

GIF의 투명도는 픽셀마다 켜짐 또는 꺼짐뿐이고 반투명이 없습니다. 배경과 섞여 부드럽게 처리된 가장자리는 단색이 되거나 사라지므로, 어두운 배경 위에서는 밝은 테두리가 남을 수 있습니다. 어차피 흰 바탕에 놓일 GIF라면 흰 배경을 그대로 두십시오.

GIF로 저장한 HTML 이메일 서명은 모든 메일 앱에서 보입니까?

정지 GIF는 사실상 모든 이메일 클라이언트에서 표시되며, 그래서 서명에 오랫동안 이 형식이 쓰였습니다. 움직이는 GIF는 덜 안정적입니다. 2007–2013 버전의 Windows용 클래식 Outlook은 첫 프레임만 보여 주므로 중요한 내용은 첫 프레임에 넣으십시오.

채팅 앱에 올릴 만큼 GIF 용량을 줄이려면 어떻게 합니까?

HTML 페이지 너비를 좁히거나 첫 페이지만 변환하십시오. 그래도 한도를 넘는다면 디스코드용 GIF 압축으로 업로드 한도에 맞게 줄일 수 있습니다.