📂 gif 파일 사이즈, 용량 조절하는 방법.zip

 

외주 작업할 때 알아둬야 할 꿀팁!

디자이너로 일을하다보면 종종 gif 파일을 받아서 수정/업로드 해야하는 경우가 있습니다. 외주 업체나 영상 담당자에게 gif로 요청을 했는데, 막상 받아보면 해상도가 들쭉날쭉하거나 용량이 너무 커서 웹에 못 올리는 경우가 있습니다. 이런 경우에는 어쩔 수 없이 2차 가공을 해야하는데요. 실제로 저도 클라이언트가 모바일 상세페이지에 gif 파일 삽입을 요청했는데, 2000px짜리 gif를 전달받아서 무려 20mb짜리를 가공해야했던 적이 있습니다. 그래서 그 때 직접 gif 사이즈도 줄이고, 용량도 압축했던 좋은 방법을 소개해드립니다. 

 

✔️ gif 화면 해상도 줄이는 방법

gif의 화면 크기(픽셀)가 너무 클 경우, 모바일 또는 웹용으로 줄여줘야 로딩속도도 빨라지고, 깔끔하게 보입니다.

 

- 추천 사이트 : Ezgif-Resize

 

👆 버튼을 눌러 새창에서 바로 사용해보세요 GIF 사이즈 줄이기 (Ezgif)

 

사용법은 정말 간단합니다. 

1. gif 파일 업로드

2. 원하는 가로/세로 픽셀 입력 (ex.600px)

3. 'Resize image' 버튼 클릭

4. 결과 다운로드

 

---

✔️ gif 용량 줄이는 법(압축)

디자인은 마음에 드는데 용량이 10mb 이상이라 웹에 못 쓰는 경우가 있습니다. 이럴 때 간단하게 압축해서 쓸 수 있는 사이트입니다.

 

- 추천 사이트 : Ezgif - Optimize

GIF 압축하기 (Ezgif)

- 추천 사이트 : I love IMG

이미지 압축하기 (ILoveIMG)

 

 

✔️ 백오피스용 gif 삽입 코드도 따로 필요하다면?

외주 결과물 중 gif를 백오피스나 관리자 페이지에 삽입해야할 일이 종종 있습니다. 이때는 예를 들어 반응형으로 가로는 최대 480px, 세로는 고정높이, 모바일에서 꽉 차게 보이도록 아래처럼 코딩하면 좋습니다.

<div style="max-width: 480px; width: 100%;">
  <img src="GIF_URL" 
       style="width: 100%; height: 270px; object-fit: cover; border-radius: 6px; border: 1px solid #ccc;" 
       alt="기능 시연 GIF">
</div>

 

백오피스나 에디터 환경에서도 안정적으로 사용되고 모바일에서도 자동 리사이징 됩니다!

 

✔️ Adobe Premiere Pro로 gif 추출시 팁

간혹 영상 파일을 gif로 만들어야 할 경우, 프리미어 프로에 mp4 파일을 업로드 한 후 애니메이션 gif로 내보내기를 하면 됩니다.

 

설정 방법

1. 시퀀스 설정(시퀀스 사이즈 조절하기)

2. file > export > media

3. 포맷 : animation gif 선택

4. frame rate : 10fps로 설정 >  용량은 낮추고 화질도 어느정도 유지

5. Export 하기

 

프레임 수를 낮추면 gif 품질도 유지할 수 있으면서 용량도 줄일 수 있습니다.

 

정리하면, 아래와 같은 표로 정리해볼 수 있어요.

 

목적	추천방법
gif 화면 크기만 줄이기	Ezgif - Resize
gif 용량만 줄이기	Ezgif - Optimize 또는 I love IMG
백오피스 삽입용 코드	가로 지정 세로 auto, height 고정 코드 사용
직접 gif 제작시	Premiere Pro + 10fps 설정