GIF 용량 줄이기: 업로드 없이 브라우저에서 압축하는 방법

GIF 용량 줄이기를 검색하면 나오는 사이트들은 대부분 파일을 자기 서버에 올려서 처리합니다. 회사에서 찍은 화면 녹화나 공개 전 작업물을 남의 서버에 올리기에는 마음이 걸립니다. 그래서 파일을 서버로 보내지 않고 브라우저 안에서 압축하는 도구를 만들었습니다. 다섯 가지 설정을 만들어 용량과 화질을 나란히 놓고 고르는 방식입니다.

3줄 요약
· GIF 용량 줄이기를 압축 프로그램 gifsicle로 처리하되, 브라우저 안에서 그대로 돌립니다. 파일이 서버로 올라가지 않고 용량 제한도 없습니다.
· 무손실·약한 손실·강한 손실·프레임 절반·크기 절반 다섯 가지를 만들어 비교하고 고릅니다.
· 얼마나 줄어드는지는 GIF 종류에 따라 크게 다릅니다. 직접 측정한 결과를 아래 표에 정리했습니다.

어떻게 GIF 용량을 줄일 수 있나

GIF를 줄이는 방법은 크게 두 갈래입니다.

첫째, 프레임 최적화입니다. GIF는 프레임마다 화면 전체를 저장하는 경우가 많습니다. 앞 프레임과 달라지지 않은 영역을 지우고 바뀐 부분만 남기면 화질을 하나도 건드리지 않고 용량이 줄어듭니다. 화면 녹화처럼 배경이 고정된 영상일수록 효과가 큽니다.

둘째, 손실 압축입니다. 각 픽셀이 가리키는 색을 아주 조금씩 옮겨서 압축이 잘 먹히는 형태로 만듭니다. “용량은 확 줄었는데 눈으로는 차이를 모르겠다”는 결과가 대부분 이 방식에서 나옵니다.

포토샵으로도 되는 것 아닌가요

됩니다. 포토샵 Save for Web에도 손실 압축을 조절하는 Lossy 값이 있고, 애니메이션 최적화에는 변한 영역만 잘라 저장하는 Bounding Box와 안 바뀐 픽셀을 투명 처리하는 Redundant Pixel Removal이 있습니다. 이름만 다를 뿐 같은 계열의 기능입니다. 그러니 “포토샵으로는 안 되는 걸 해준다”고 말씀드리지는 않겠습니다.

이 도구의 쓸모는 다른 데 있습니다. 포토샵을 켤 필요가 없고, 값을 하나씩 바꿔가며 저장해 볼 필요도 없습니다. 여러 설정을 한 번에 만들어 용량과 화면을 나란히 놓고 비교하기 때문에, 어디까지 줄여도 되는지를 몇 초 만에 눈으로 판단할 수 있습니다. 포토샵에서 같은 판단을 하려면 슬라이더를 옮기고 미리보기를 기다리는 일을 반복해야 합니다.

GIF 용량 줄이기, 실제로 얼마나 줄어드나

성격이 다른 GIF 네 종류를 만들어 다섯 가지 설정으로 직접 측정했습니다. 아래는 그 결과입니다.

표본	원본	무손실	약한 손실	강한 손실	프레임 절반	크기 절반
단순 애니메이션 400×200, 24프레임	28KB	-85%	-85%	-85%	-90%	-90%
화면 녹화형 480×270, 40프레임	7KB	-29%	-29%	-29%	-57%	-60%
사진형 360×240, 20프레임	740KB	0%	-17%	-50%	-58%	-62%
대용량 640×480, 60프레임	16.7MB	0%	-53%	-76%	-76%	-87%

표를 보면 두 가지가 눈에 띕니다.

단순한 애니메이션은 무손실만으로 85%가 줄었습니다. 프레임마다 화면 전체를 저장하던 파일이라 겹치는 영역을 지우는 것만으로 이만큼 빠진 것입니다. 화질은 전혀 건드리지 않았습니다. 여러분의 GIF가 이런 종류라면 손실 압축을 쓸 이유가 없습니다.

반대로 사진형은 무손실로 전혀 줄지 않았습니다. 장면이 계속 바뀌어서 지울 중복이 없기 때문입니다. 이런 파일은 손실 압축이나 색상 수 줄이기로만 용량이 빠집니다. 같은 사진형이라도 강도를 올리면 50%까지 내려갔습니다.

그래서 GIF 용량 줄이기에서 “몇 퍼센트 줄어든다”고 단정하는 설명은 믿을 것이 못 됩니다. 파일을 넣어 보고 결과를 직접 비교하는 편이 훨씬 빠릅니다.

GIF 용량 줄이기 도구 사용법

GIF 용량 줄이기 바로 하기

GIF 용량 줄이기는 파일을 끌어다 놓는 것으로 시작합니다. 먼저 원본 정보를 읽어 보여 줍니다. 해상도와 프레임 수, 재생 시간, 그리고 프레임 최적화가 이미 되어 있는지를 알려 줍니다. 최적화가 안 된 파일이면 무손실만으로도 크게 줄어들 가능성이 높다는 뜻입니다.

이어서 다섯 가지 설정이 차례로 만들어집니다. 각각의 용량과 감소율이 표시되고, 고른 결과는 원본과 나란히 미리보기로 확인할 수 있습니다. 마음에 드는 것을 골라 저장하면 끝입니다. 원하는 값이 따로 있다면 “설정 직접 바꾸기”를 열어 손실 강도, 색상 수, 남길 프레임, 크기를 조절해 다시 만들 수 있습니다.

만든 결과물은 다시 읽어서 프레임 수와 해상도, 재생 시간이 원본과 같은지 검사합니다. 압축하다 프레임이 빠지거나 재생 속도가 달라지면 경고를 띄웁니다.

어떤 설정을 고르면 되나

순서는 위에서부터입니다. 무손실 최적화를 먼저 보세요. 화질을 하나도 건드리지 않은 결과라 여기서 충분히 작아졌다면 더 볼 필요가 없습니다. 앞의 측정에서 단순 애니메이션이 이 단계만으로 85% 줄어든 것처럼, 의외로 많은 GIF가 여기서 해결됩니다.

약한 손실은 용량 제한이 걸린 곳에 올려야 할 때 무난한 선택입니다. 원본과 나란히 놓고 봐도 차이를 집어내기 어렵습니다. 강한 손실은 색이 뭉치는 것이 보이므로 반드시 미리보기로 확인하세요. 글자나 선이 들어간 GIF에서는 특히 티가 납니다.

프레임 절반은 두 장 중 한 장만 남기고 지연시간을 두 배로 늘려 전체 재생 시간은 그대로 유지합니다. 용량은 크게 빠지지만 움직임이 뚝뚝 끊겨 보입니다. 원래 프레임이 많아 부드러운 영상일수록 티가 덜 납니다.

크기 절반은 가장 확실합니다. 화면에서 작아지는 것을 감수할 수 있다면 효율이 가장 좋습니다. 메신저에 붙여 넣거나 문서에 삽입하는 용도라면 원본 해상도가 필요 없는 경우가 많으니 한 번쯤 비교해 볼 만합니다.

화질이 정말 안 떨어지나요

GIF 용량 줄이기의 네 설정 중 무손실 최적화는 화질 데이터를 전혀 건드리지 않습니다. 겹치는 영역을 지우는 것뿐이라 결과물의 모든 픽셀이 원본과 같습니다. 약한 손실은 나란히 놓고 봐도 차이를 찾기 어려운 수준이고, 강한 손실부터는 색이 뭉치는 것이 보입니다. 특히 사진처럼 색이 많은 GIF에서 티가 납니다. 미리보기로 확인하고 고르시면 됩니다.

위는 유명 gif압축 사이트 결과이고 아래는 제가 만든 사이트의 결과입니다. 차이가 없죠. 여기에 더해서 아래는 직접 옵션을 변경해서 압축한 gif영상입니다. 프레임율을 조금 더 조정했기 때문에 중간에 조금 끊기는 감이 있지만 용량은 1/3 수준입니다.

파일을 서버로 보내지 않는다는 것

이 GIF 용량 줄이기 도구는 gifsicle을 WebAssembly로 컴파일한 것을 브라우저에서 실행합니다. 압축 결과만 놓고 보면 다른 사이트와 크게 다르지 않습니다. 실제로 널리 쓰이는 ezgif도 같은 gifsicle과 손실 LZW 인코더를 쓴다고 밝히고 있습니다. 엔진이 같으니 같은 설정이면 나오는 용량도 비슷합니다. 그 점을 부풀려 말씀드리지 않겠습니다.

다른 것은 처리하는 위치입니다. 파일이 여러분의 브라우저를 벗어나지 않으므로 업로드 대기 시간이 없고, 서버에 파일이 남지도 않습니다. 사내 화면 녹화나 미공개 디자인 작업물처럼 남의 서버에 올리기 곤란한 파일에서 이 차이가 의미를 갖습니다. 실제로 740KB짜리 GIF는 다섯 가지를 다 만드는 데 5초가 걸렸고, 16.7MB짜리는 픽셀이 많아 두 가지를 먼저 만든 뒤 나머지는 눌러서 만들도록 나눠 처리합니다. 어느 쪽이든 업로드에 쓴 시간은 0초입니다.

GIF 말고 동영상으로 바꾸면 더 줄지 않나요

훨씬 더 줄어듭니다. 같은 영상을 MP4로 바꾸면 GIF의 10분의 1 아래로 내려가는 경우가 흔합니다. 다만 형식이 바뀌면 쓰임새가 달라집니다. 메신저나 문서에 붙여넣었을 때 자동으로 반복 재생되는 GIF의 성질이 사라지고, 곳에 따라 재생 버튼을 눌러야 합니다. 그래서 이 도구는 GIF 형식을 그대로 유지하는 압축만 다룹니다. 동영상 변환은 성격이 다른 작업이라 따로 만들 예정입니다.

이미지 파일 정리를 같이 한다면

사진 파일 용량이 문제라면 이미지 용량 줄이기로 원하는 KB에 맞춰 줄일 수 있습니다. 자세한 설명은 이미지 용량 줄이는 방법 글에 정리해 두었습니다. 웹에 올릴 이미지라면 WebP 변환기로 형식을 바꾸는 것도 방법입니다. 세 도구 모두 파일을 서버로 보내지 않습니다.

압축 엔진으로 쓴 gifsicle은 Eddie Kohler가 만든 오픈소스 프로그램입니다. 어떤 옵션이 있는지는 gifsicle 공식 문서에서 볼 수 있습니다.