홈가이드이미지·영상

이미지·GIF 용량, 어떤 순서로 줄일까

용량은 픽셀 수에서 시작해서 화질·형식, GIF라면 프레임 수와 색 수가 더해져요. 도구가 목표 용량을 맞추는 방식과 시험 그림으로 잰 결과를 표로 보여 드려요.

글쓴이: 도구장이처음 쓴 날 고친 날

용량 계산은 픽셀 수에서 시작해요

사진이든 GIF든 파일 용량을 가장 크게 좌우하는 건 그림을 이루는 점, 곧 픽셀의 개수예요. 압축하기 전의 사진은 픽셀마다 빨강·초록·파랑·투명도 네 값을 1바이트씩 들고 있어서, 4000×3000 사진 한 장을 메모리에 펼치면 1,200만 픽셀에 4바이트를 곱한 48,000,000바이트가 돼요. 압축은 이 덩어리를 얼마나 잘 줄이느냐의 문제이고, 출발점이 작을수록 결과도 작아져요.

가로와 세로를 함께 줄이면 픽셀 수는 배율의 제곱으로 줄어요. 아래 표는 이미지 크기 조절 도구의 크기 계산 함수로 4000×3000 사진을 가로 기준으로 줄인 결과예요. 오른쪽 칸은 이 사이트 화면에서 같은 방식(캔버스에 고화질 보간으로 그린 뒤 JPG 화질 90으로 저장)으로 시험용 그림을 저장해 잰 값이에요. 시험 그림은 색이 번지는 바탕에 잔잡음을 섞어 만든 것이라, 실제 사진과 숫자가 같지는 않아요.

저장 크기픽셀 수원본 대비 픽셀JPG 화질 90 (시험 그림)
4000×300012,000,000100%2,553,505바이트
2000×15003,000,00025%374,551바이트
1280×9601,228,80010.24%125,545바이트
640×480307,2002.56%31,973바이트

용량이 픽셀 비율보다 더 빨리 줄어든 건 축소하면서 이웃 픽셀이 평균돼 잔잡음이 함께 사라졌기 때문이에요. 반대로 글자가 많은 화면 캡처처럼 경계가 날카로운 그림은 픽셀 비율에 더 가깝게 줄어요. 어느 쪽이든 결론은 같아요. 용량을 줄일 때는 크기부터 손대는 게 가장 효과가 커요.

화질 숫자와 저장 형식이 주는 차이

크기를 정한 다음은 화질과 형식이에요. 이미지 크기 조절 도구의 화질 막대는 50에서 100까지이고 처음 값은 90이에요. 이 값은 JPG와 WebP로 저장할 때만 쓰여요. PNG는 손실 없이 저장하는 형식이라 화질이라는 개념이 없어요. HTML 표준도 화질 값을 0.0부터 1.0 사이로 받되, 구현마다 해석이 조금씩 다를 수 있다고 적어 두었어요. 그래서 같은 화질 90이라도 브라우저가 바뀌면 용량이 달라질 수 있어요.

같은 시험 그림을 1280×960으로 줄여 저장한 결과는 이랬어요. 화질 95는 222,741바이트, 90은 125,545바이트, 80은 62,718바이트, 70은 41,794바이트, 50은 29,175바이트였어요. 95에서 90으로 내리기만 해도 거의 절반이 됐고, 그 아래로는 줄어드는 폭이 점점 작아졌어요. 같은 크기에서 WebP 화질 90은 60,116바이트, PNG는 2,125,750바이트였어요. 사진을 PNG로 저장하면 JPG보다 열 배 넘게 커질 수 있다는 뜻이에요.

원래 형식 그대로 저장하기를 고르면 JPG와 WebP는 그 형식을 유지하지만, GIF·BMP·AVIF처럼 캔버스가 만들 수 없는 형식은 PNG로 바뀌어요. 움직이는 GIF를 넣으면 첫 장면만 남는다는 점도 기억하세요. 캔버스에 새로 그려서 저장하기 때문에 촬영 정보(EXIF)도 따라오지 않아요.

목표 용량을 고르면 도구가 하는 일

200KB 이하처럼 목표를 고르면 화질 막대 값은 쓰지 않고 따로 탐색을 해요. 먼저 크기를 그대로 둔 채 화질 0.95로 저장해 보고, 넘치면 0.5로 저장해 봐요. 0.5로도 넘치면 바로 크기를 줄이는 단계로 가고, 0.5에서 맞으면 두 값 사이를 반씩 좁혀 가며 여섯 번 더 시험해서 목표 안에 드는 가장 높은 화질을 골라요. 크기 단계는 원래 크기의 85%, 70%, 55%, 40%, 30%, 20% 순서예요. PNG는 화질 탐색 없이 크기 단계만 밟아요.

이 탐색을 같은 시험 그림에 실제로 돌려 봤어요. 4000×3000을 500KB 이하로 맞추면 크기는 그대로 두고 화질 약 0.58에서 506,468바이트로 끝났어요. 저장을 여덟 번 시도했어요. 200KB 이하로 맞추면 원래 크기에서는 화질 0.5로도 넘쳐서 3400×2550으로 한 단계 줄인 뒤 화질 약 0.51에서 193,003바이트가 됐어요. 1280×960을 200KB에 맞출 때는 화질 0.94 근처에서 191,423바이트로 거의 손해 없이 끝났어요. 크기를 먼저 적당히 줄여 두면 목표 용량 기능이 화질을 덜 깎는다는 걸 보여 주는 결과예요.

GIF는 프레임 수 곱하기 크기예요

GIF는 계산 방식이 달라요. GIF89a 규격은 색상표 크기를 3비트 값으로 적고 실제 개수를 2의 (값+1)제곱으로 정해서, 한 색상표에 들어가는 색은 많아야 256개예요. 프레임마다 보여 줄 시간도 100분의 1초 단위로 적어요. 그래서 GIF 용량은 대략 '한 프레임의 용량 × 프레임 수'로 생각하면 돼요.

영상 GIF 변환은 고른 구간 길이에 초당 프레임 수를 곱해 프레임을 뽑아요. 5초 구간을 초당 10장으로 뽑으면 50장, 60초를 초당 20장으로 뽑으면 1,200장이에요. 구간은 60초까지이고, 한꺼번에 메모리에 올리는 픽셀을 6,000만 개로 묶어 둬서 가로 480·세로 270 화면이면 462장까지만 만들 수 있어요. 초당 15장을 고르면 한 장에 100분의 6.67초가 필요한데, 규격이 정수만 받으니 7, 6, 7처럼 번갈아 적어 전체 시간을 맞춰요. 사진 GIF 만들기는 사진 수가 곧 프레임 수라서 최대 100장이고, 한 장이 보이는 시간을 0.2초에서 3초 사이에서 골라요.

같은 클립에 설정을 하나씩 바꿔 본 결과

설정마다 효과를 비교하려고 가로 480·세로 270, 50프레임(초당 10장으로 5초)짜리 시험 클립을 만들고 이 사이트 GIF 인코더로 직접 저장해 봤어요. 색이 번지는 바탕 위로 노란 원이 움직이고, 카메라 영상처럼 매 프레임 픽셀마다 작은 잡음이 끼어 있는 클립이에요.

바꾼 설정결과 용량기본 대비
기본 (480px, 50장, 256색)3,126,250바이트100%
가로 360px1,538,548바이트49.2%
가로 240px830,421바이트26.6%
프레임 절반 (25장)1,568,353바이트50.2%
128색2,384,987바이트76.3%
64색1,736,914바이트55.6%
32색1,237,448바이트39.6%
미세한 변화 무시 42,760,650바이트88.3%
미세한 변화 무시 81,200,733바이트38.4%
미세한 변화 무시 14100,924바이트3.2%
부드러운 색 표현 켬3,752,585바이트120.0%

프레임을 절반으로 솎으면 용량도 거의 정확히 절반이 됐어요. 버린 프레임의 시간은 남은 프레임에 더해져서 재생 시간은 그대로예요. 색 수는 줄일수록 효과가 있지만 크기나 프레임만큼 크지는 않았어요.

눈에 띄는 건 '미세한 변화 무시'예요. 인코더는 앞 프레임과 비교해 빨강·초록·파랑 중 하나라도 정한 값보다 크게 바뀐 픽셀만 다시 저장해요. 이 클립의 잡음은 프레임 사이에서 값이 최대 12쯤 흔들리게 만들었기 때문에, 14로 두자 잡음이 통째로 무시돼 움직이는 원만 남았어요. 실제 영상에서는 잡음의 세기가 제각각이라 이렇게 극적으로 줄지 않을 수 있고, 너무 높이면 천천히 변하는 그림자 같은 장면이 멈춘 것처럼 보일 수 있어요.

바뀐 부분만 저장하는 방식이 늘 이기는 것도 아니에요. 잡음 없는 같은 장면에서는 매 프레임을 통째로 저장하면 768,575바이트, 바뀐 곳만 저장하면 46,189바이트로 6% 수준이었어요. 그런데 잡음 클립에서는 거의 모든 픽셀이 매번 바뀌어서 오히려 통째로 저장한 쪽(2,888,134바이트)이 조금 작았어요. 화면 녹화나 단순한 그림은 GIF로 잘 줄고, 흔들리는 카메라 영상은 잘 줄지 않는 이유가 여기 있어요.

목표 용량을 맞추는 순서와 직접 줄이는 순서

영상 GIF 변환과 사진 GIF 만들기는 목표 용량을 고르면 열한 단계 사다리를 내려가요. GIF 용량 줄이기는 내가 고른 설정을 출발점으로 삼아 같은 사다리를 그 아래로 겹쳐 쓰고, 겹치는 단계는 하나로 합쳐요. 단계마다 크기 배율, 남길 프레임 비율, 색 수, 무시할 변화량이 함께 내려가요. 단계마다 가운데 여덟 장만 먼저 저장해 전체 용량을 어림하고, 어림값이 목표의 1.3배를 넘으면 그 단계는 끝까지 만들지 않고 건너뛰어요. 목표 안에 드는 단계를 찾으면 바로 앞 단계와의 중간 설정을 두 번 더 시도해서 조금이라도 화질을 되찾아요. 위 시험 클립을 1MB 목표로 돌리자 네 번째 단계에서 맞았고, 중간값을 다듬어 가로 462px, 128색, 무시할 변화 5로 499,195바이트가 나왔어요. 끝까지 만든 건 세 번이었어요.

직접 고르고 싶다면 GIF 용량 줄이기나 변환 화면에서 아래 순서로 하나씩 바꾸고, 바꿀 때마다 결과 용량을 확인하세요.

  1. 길이 줄이기: 영상이라면 구간을 짧게 잡아요. 프레임 수가 그대로 줄어요.
  2. 가로 크기 낮추기: 480px에서 360px만 돼도 시험에서는 절반 가까이 줄었어요.
  3. 프레임 솎기: 초당 프레임 수를 낮추거나 '절반만'을 골라요. 움직임은 조금 끊겨요.
  4. 색 수 줄이기: 128, 64 순서로 내리며 그라데이션이 계단처럼 보이기 직전에서 멈춰요.
  5. 미세한 변화 무시: 약하게부터 시작해 화면이 멈춰 보이는 곳이 없는지 확인해요.
  6. 부드러운 색 표현 끄기: 켜 두면 시험에서 20% 커졌어요. 화질이 꼭 필요할 때만 켜요.

팁 한 번 줄인 GIF를 다시 줄이면 색이 또 깎여요. 마음에 들지 않으면 줄인 결과 대신 처음 파일이나 원본 영상에서 설정만 바꿔 다시 만드세요.

이 글과 함께 쓰면 좋은 도구

참고한 자료

다른 글