명령줄에서 GIF를 만들고 최적화하는 방법
소개
GIF와 함께 1990년대부터 유통된 가장 일반적인 이미지 형식 중 하나입니다. JPG 및 PNG와 달리 GIF는 애니메이션의 여러 프레임을 포함할 수 있으며 겸손한 \애니메이션 GIF\는 인터넷의 유비쿼터스 빌딩 블록입니다.
GIF는 실제로 오래된 기술이며 여러 상황에서 웹 비디오를 삽입하는 것보다 효율성이 떨어집니다. 이는 대부분의 웹 비디오가 최신 비디오 압축 기술과 GIF보다 더 많이 사용되는 최신 코덱을 사용하기 때문입니다. 코덱은 동영상을 인코딩 및 디코딩하는 데 사용되며 대부분의 플랫폼에는 이러한 코덱을 재생하기 위한 전용 하드웨어가 있습니다. 반면에 GIF는 항상 CPU에서 직접 디코딩됩니다. 몇 프레임의 애니메이션만 있는 저해상도 GIF의 CPU 오버헤드는 무시할 수 있지만 기술적으로는 YouTube 비디오와 비슷한 해상도와 프레임 속도로 GIF를 만들 수 있으며 얼마나 많은 시스템 리소스를 소비하는지 알면 놀랄 것입니다. .
그러나 GIF는 동영상이 아닌 이미지로 간주되기 때문에 여전히 유용합니다. 웹 및 기타 응용 프로그램이 작동하는 방식으로 인해 더 많은 컨텍스트에서 자동으로 렌더링 및 애니메이션되며 별도로 포함하거나 연결할 필요가 없습니다. 이것은 다른 프레젠테이션 형식의 모든 것에 유용할 수 있습니다.
이 자습서에서는 비디오 클립에서 GIF를 만들고, 크기와 품질에 맞게 최적화하고, 다양한 상황에서 GIF를 사용할 수 있도록 하는 여러 도구를 사용해 봅니다. 이러한 도구를 결합하여 다른 애플리케이션 스택에 통합할 수도 있습니다.
전제 조건
이 튜토리얼은 Ubuntu 22.04 서버에 대한 설치 지침을 제공합니다. Ubuntu 22.04의 초기 서버 설정에 대한 가이드에 따라 이를 설정할 수 있습니다.
이 튜토리얼의 도구 중 하나를 설치하려면 Homebrew 패키지 관리자도 설치해야 합니다.
1단계 - ffmpeg, Gifski 및 Gifsicle 설치
이 자습서에서는 예제와 함께 수행할 세 가지 도구가 필요합니다. 첫 번째는 GIF를 최적화하고 추가로 조작하기 위한 Gifsicle입니다. 이러한 도구는 대부분의 플랫폼에서 사용할 수 있습니다.
ffmpeg
와 gifsicle
은 Ubuntu의 기본 리포지토리에서 사용할 수 있으며 apt
패키지 관리자와 함께 설치할 수 있습니다. apt update
로 패키지 소스를 업데이트하여 시작하십시오.
- sudo apt update
그런 다음 apt install
을 사용하여 ffmpeg
및 gifsicle
패키지를 설치합니다.
- sudo apt install ffmpeg gifsicle
마지막 도구인 gifski
는 Homebrew를 통해 사용할 수 있습니다. brew install
로 설치합니다(Homebrew가 다른 종속 항목을 설치하므로 몇 분 정도 소요됨):
- brew install gifski
이제 컴퓨터에 필요한 모든 도구가 설치되었습니다. 다음으로 샘플 비디오를 획득하여 GIF를 생성하는 것으로 시작합니다.
2단계 — 샘플 비디오 다운로드 및 검토
기존 비디오 클립에서 GIF를 만들 수 있습니다. 아직 사용하고 싶은 앱이 없다면 DigitalOcean의 앱 플랫폼 소개 동영상을 시작점으로 사용할 수 있습니다.
curl
을 사용하여 서버의 다른 위치에서 이 비디오의 사본을 다운로드할 수 있습니다.
- curl -O https://deved-images.nyc3.digitaloceanspaces.com/gif-cli/app-platform.webm
curl
은 모든 종류의 웹 요청을 만들기 위한 명령줄 도구입니다. URL과 함께 -O
플래그를 사용하면 curl
이 원격 파일을 다운로드하고 동일한 파일 이름으로 로컬에 저장하도록 지시합니다.
이제 로컬에 비디오 사본이 있으므로 일부 메타데이터를 확인할 수 있습니다. 고품질 GIF를 만들려고 할 때 관련이 있습니다. 이전에 ffmpeg
를 설치하면 미디어 파일의 해상도, 프레임 속도 및 기타 정보를 확인하는 데 사용할 수 있는 ffprobe
라는 명령도 함께 제공됩니다. 다운로드한 app-platform.webm
비디오에서 ffprobe
를 실행하여 이러한 세부 정보를 검토합니다.
- ffprobe app-platform.webm
Output…
Input #0, matroska,webm, from 'app-platform.webm':
Metadata:
ENCODER : Lavf59.27.100
Duration: 00:01:59.04, start: -0.007000, bitrate: 1362 kb/s
Stream #0:0(eng): Video: vp9 (Profile 0), yuv420p(tv, bt709), 1920x1080, SAR 1:1 DAR 16:9, 25 fps, 25 tbr, 1k tbn (default)
Metadata:
DURATION : 00:01:59.000000000
Stream #0:1(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
Metadata:
DURATION : 00:01:59.041000000
출력에는 파일에 포함된 모든 스트림(일반적으로 하나의 비디오 및 하나 이상의 오디오 스트림)과 샘플 속도, 코덱 및 스트림의 기타 속성이 나열됩니다. 출력에서 강조 표시된 정보에서 이 비디오가 1080p 해상도로 인코딩되고 초당 25프레임으로 재생됨을 알 수 있습니다. 또한 거의 2분 길이인데 YouTube에서 시청하면서 배웠을 수도 있고 하나의 GIF에는 너무 길 수도 있습니다!
이 정보는 이 비디오에서 클립을 잘라 GIF로 만드는 다음 단계로 이동하기에 충분한 정보입니다.
3단계 — 비디오에서 클립 자르기
이제 속성을 알고 있는 2분 길이의 비디오 파일이 있습니다. GIF로 자르기 전에 해야 할 유일한 일은 GIF에서 더 짧은 클립을 추출하는 것입니다.
터미널 셸에서 동영상을 재생하는 것은 그다지 편리하지 않으므로 YouTube에서 동영상과 함께 시청하여 이상적인 자르기 위치를 찾을 수 있습니다. 이 자습서에서는 00:00:09에서 00:00:12로 잘라 매우 부드러운 애니메이션을 생성합니다.
app-platform.webm
비디오를 ffmpeg
에 전달하여 잘라낼 수 있습니다.
- ffmpeg -ss 00:00:09 -to 00:00:12 -i app-platform.webm -c copy clip.webm
이 명령은 다음과 같이 분류됩니다.
-ss 00:00:09 -to 00:00:12
는ffmpeg
가 타임코드를 이해하는 방법입니다. 이 경우 클립의 시작 위치에서 끝 위치까지 자릅니다. 지속 시간을 기준으로 또는 1초 미만으로 클립할 수도 있습니다.-i app-platform.webm
은 입력 파일의 경로이며 앞에-i
가 옵니다.-c copy
는 일반적으로 출력 오디오 또는 비디오 코덱을ffmpeg
로 지정하는 곳입니다. 코덱 대신복사
를 사용하면 비디오 재인코딩을 전혀 건너뛰므로 다른 출력 형식을 대상으로 할 필요가 없는 한 훨씬 더 빠르고 품질 손실을 방지할 수 있습니다. 어쨌든 이 클립을 나중에 GIF로 만들기 때문에 기본 입력 형식을 유지하는 것이 좋으며 시간을 절약할 수 있습니다.clip.webm
은 출력 파일의 경로입니다.
이렇게 하면 clip.webm
이라는 새로운 3초 비디오가 생성됩니다. ls -lh
를 사용하여 존재하는지 확인하고 크기를 확인할 수 있습니다.
- ls -lh clip.webm
Output-rw-r--r-- 1 sammy sammy 600K Nov 16 14:27 clip.webm
3초 분량의 동영상이 600K에 불과하다는 사실이 밝혀졌습니다. 이것은 다음 단계에서 GIF를 만들 때 좋은 비교 포인트가 될 것입니다.
참고: 로컬 컴퓨터에서 작업하는 경우 Lossless Cut이라는 오픈 소스 GUI 도구를 사용하여 이와 동일한 작업을 수행할 수 있습니다. Lossless Cut은 동일한 ffmpeg
명령을 실행하여 비디오를 다시 인코딩할 필요 없이 타임코드를 기반으로 비디오에서 클립을 빠르게 추출하기 때문에 특히 유용합니다. 명령줄에서 자체적으로 ffmpeg
를 실행하는 것과 달리 Lossless Cut에는 내장 비디오 플레이어와 탐색 인터페이스가 포함되어 있습니다.
4단계 - 비디오를 GIF로 변환
이제 3초 길이의 비디오와 프레임 속도 및 해상도에 대한 상한선을 염두에 두고 있으므로 여기에서 GIF를 만들 수 있습니다. 비디오를 GIF로 업로드하기 위한 자동화된 변환 파이프라인을 개발하는 경우 ffprobe
에서 비디오 해상도와 프레임 속도를 자동으로 추출하여 다음 몇 가지 명령에 직접 전달하는 것이 도움이 될 수 있습니다. 이 튜토리얼에서는 출력을 위해 일부 합리적인 해상도와 프레임 속도 값만 하드코딩할 것입니다.
명령줄에서 GIF를 만들기 위한 몇 가지 옵션이 있습니다. ffmpeg
자체로 수행할 수 있지만 구문을 변경하거나 이해하기가 매우 어려울 수 있습니다.
- ffmpeg -filter_complex "[0:v] fps=12,scale=w=540:h=-1,split [a][b];[a] palettegen [p];[b][p] paletteuse" -i clip.webm ffmpeg-sample.gif
이 예에서는 클립의 해상도와 프레임 속도를 약 절반인 12fps 및 540p 해상도로 줄였습니다. 이것은 일반적으로 GIF의 좋은 출발점입니다. GIF는 이미지와 같은 취급을 받기 때문에 웹 페이지가 로드되면 전체가 다운로드되며 비디오와 달리 낮은 해상도로 점진적으로 스트리밍되는 개념이 없습니다. CDN을 사용하면 이와 같은 정적 사이트 자산의 전달을 최적화하는 데 도움이 될 수 있지만 여전히 특별한 이유 없이 큰 이미지를 제공하는 것은 피해야 합니다. 따라서 GIF를 필요 이상으로 크게 만드는 것은 항상 피해야 합니다. 3M 미만은 일반적으로 이미지에 적합합니다. ls -lh
를 사용하여 새 GIF의 파일 크기를 확인할 수 있습니다.
- ls -lh ffmpeg-sample.gif
Output-rw-r--r-- 1 sammy sammy 2.0M Nov 16 14:28 ffmpeg-sample.gif
이렇게 2M GIF를 만들었습니다. 이 방법도 좋지만 gifski
를 사용하여 덜 복잡한 구문을 사용하면 더 나은 결과를 얻을 수 있습니다. 다음 gifski
명령을 사용해 보십시오.
- gifski --fps 12 --width 540 -o gifski-sample.gif clip.webm
입력 및 출력 파일 이름과 함께 중요한 세부 정보(프레임 속도 및 해상도)만 유지하면 된다는 점에 유의하십시오. 나중에 출력 파일을 확인하십시오.
- ls -lh gifski-sample.gif
Output-rw-r--r-- 1 sammy sammy 1.3M Nov 16 14:33 gifski-sample.gif
이것은 동일한 품질 수준에서 상당한 개선인 1.3M에 불과합니다. 이 시점에서 전체 프레임 속도, 전체 해상도 버전의 GIF를 만들고 싶은 유혹을 느낄 수 있습니다. 비교 포인트는 다음과 같습니다.
- gifski --fps 25 --width 1080 -o gifski-high.gif clip.webm
이 마지막 테스트 파일의 크기를 확인하십시오.
- ls -lh gifski-high.gif
Output-rw-r--r-- 1 sammy sammy 6.9M Nov 16 14:37 gifski-high.gif
원본 비디오 클립이 0.6M에 불과했다는 점을 고려하면 6.9M은 확실히 너무 큽니다! GIF는 최신 비디오 코덱에 비해 특별히 효율적이지 않습니다. 적당한 파일 크기로 인코딩할 때 약간의 희생이 필요합니다. 이 자습서의 마지막 단계에서는 GIF를 더욱 최적화합니다.
참고: 이 자습서의 어느 시점에서든 원격 서버에서 작업하는 경우 GIF를 로컬에서 다운로드하여 검사하거나 웹 브라우저에서 볼 수 있도록 웹에서 액세스할 수 있는 디렉토리로 이동할 수도 있습니다. 이렇게 하면 애니메이션 품질에 대한 시각적 참조를 얻을 수 있습니다.
5단계 - GIF 최적화, 유효성 검사 및 보기
이 자습서의 마지막 단계에서는 gifsicle
을 사용하여 GIF를 다듬습니다. gifsicle
은 GIF에서 ffmpeg
는 오디오 및 비디오와 같습니다. 거의 모든 작업을 수행할 수 있지만 결과적으로 매우 복잡할 수 있습니다. 이러한 이유로 실제로 GIF를 만드는 데 gifski
를 고수하고 몇 가지 gifsicle
명령에 집중하여 GIF를 개선하거나 조작할 수 있습니다.
표준 gifsicle
최적화 명령을 실행하여 시작하십시오.
- gifsicle -O3 --lossy=80 --colors 256 gifski-sample.gif -o optimized.gif
이 명령에서 가장 적극적인 최적화를 위해 -O3
옵션을 제공했습니다. --lossy 80
은 소스 입력에서 최대 20%의 이미지 품질 손실을 허용합니다. 및 --colors 256
은 출력 이미지에서 최대 256색을 사용합니다. GIF는 비디오 코덱과 같은 최신 프레임 간 비디오 압축을 사용하지 않으며 JPEG 스타일 이미지 압축 기술을 기본. 또한 이 컨텍스트에서 256색은 가장 일반적인 256색의 제한된 팔레트가 아니라 이미 GIF에 있는 것을 기반으로 하는 256색 팔레트를 의미합니다. 그렇지 않으면 작은 색상 팔레트와 연관될 수 있습니다. 일반적으로 GIF 압축은 그다지 눈에 띄지 않습니다.
마지막 단계와 마찬가지로 optimized.gif
의 크기를 확인합니다.
- ls -lh optimized.gif
Output-rw-r--r-- 1 sammy sammy 935K Nov 16 14:44 optimized.gif
이 마지막 단계는 파일 크기를 원본 비디오보다 약간 큰 크기(애니메이션 이미지의 경우 매우 합리적인 935K)로 성공적으로 줄였습니다. 이것은 이 튜토리얼의 앞부분에 표시된 것과 동일한 최적화된 GIF입니다.
Gifsicle 설명서를 참조하여 GIF를 조작하는 다른 방법에 대해 알아볼 수 있습니다. 예를 들어 GIF를 각 애니메이션 프레임당 하나씩 여러 이미지 파일로 "폭발\할 수 있습니다.
- gifsicle --explode optimized.gif
이렇게 하면 모든 개별 이미지에 대해 optimized.gif.000
, optimized.gif.001
등의 여러 파일이 생성됩니다.
- ls -lh optimized*
Output-rw-r--r-- 1 sammy sammy 935K Nov 16 14:46 optimized.gif
-rw-r--r-- 1 sammy sammy 20K Nov 16 14:54 optimized.gif.000
-rw-r--r-- 1 sammy sammy 17K Nov 16 14:54 optimized.gif.001
-rw-r--r-- 1 sammy sammy 22K Nov 16 14:54 optimized.gif.002
-rw-r--r-- 1 sammy sammy 22K Nov 16 14:54 optimized.gif.003
…
--rotate-90
또는 --rotate-180
옵션을 사용하여 GIF를 회전할 수도 있습니다.
- gifsicle --rotate-90 optimized.gif -o rotated.gif
비효율에도 불구하고 GIF는 거의 모든 곳에서 사용할 수 있기 때문에 여전히 유용합니다. 자동으로 애니메이션을 적용할 짧은 클립이 필요하거나 특히 비디오 형식이 아닌 이미지가 필요한 경우 때때로 좋은 예전 GIF를 대체할 수 없습니다.
결론
이 자습서에서는 여러 도구를 사용하여 기존 비디오에서 잘 최적화된 GIF를 만들었습니다. 또한 오픈 소스 비디오 조작 및 GIF 조작 도구의 생태계와 GIF 추가 편집을 위한 몇 가지 다른 옵션을 검토했습니다. GIF는 흥미롭고 시대착오적인 기술입니다. 여러 면에서 GIF는 현대적이지는 않지만 일부 상황에서는 여전히 실질적인 대체품이 없으며 GIF 작업 도구는 강력하고 잘 관리되고 있습니다. 그 말을 듣고 GIF를 현명하게 사용하십시오.
다음으로 Node.js에서 미디어 처리 API를 빌드하는 방법을 배울 수 있습니다.