웹사이트 검색

명령줄에서 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입니다. 이러한 도구는 대부분의 플랫폼에서 사용할 수 있습니다.

ffmpeggifsicle은 Ubuntu의 기본 리포지토리에서 사용할 수 있으며 apt 패키지 관리자와 함께 설치할 수 있습니다. apt update로 패키지 소스를 업데이트하여 시작하십시오.

  1. sudo apt update

그런 다음 apt install을 사용하여 ffmpeggifsicle 패키지를 설치합니다.

  1. sudo apt install ffmpeg gifsicle

마지막 도구인 gifski는 Homebrew를 통해 사용할 수 있습니다. brew install로 설치합니다(Homebrew가 다른 종속 항목을 설치하므로 몇 분 정도 소요됨):

  1. brew install gifski

이제 컴퓨터에 필요한 모든 도구가 설치되었습니다. 다음으로 샘플 비디오를 획득하여 GIF를 생성하는 것으로 시작합니다.

2단계 — 샘플 비디오 다운로드 및 검토

기존 비디오 클립에서 GIF를 만들 수 있습니다. 아직 사용하고 싶은 앱이 없다면 DigitalOcean의 앱 플랫폼 소개 동영상을 시작점으로 사용할 수 있습니다.

curl을 사용하여 서버의 다른 위치에서 이 비디오의 사본을 다운로드할 수 있습니다.

  1. curl -O https://deved-images.nyc3.digitaloceanspaces.com/gif-cli/app-platform.webm

curl은 모든 종류의 웹 요청을 만들기 위한 명령줄 도구입니다. URL과 함께 -O 플래그를 사용하면 curl이 원격 파일을 다운로드하고 동일한 파일 이름으로 로컬에 저장하도록 지시합니다.

이제 로컬에 비디오 사본이 있으므로 일부 메타데이터를 확인할 수 있습니다. 고품질 GIF를 만들려고 할 때 관련이 있습니다. 이전에 ffmpeg를 설치하면 미디어 파일의 해상도, 프레임 속도 및 기타 정보를 확인하는 데 사용할 수 있는 ffprobe라는 명령도 함께 제공됩니다. 다운로드한 app-platform.webm 비디오에서 ffprobe를 실행하여 이러한 세부 정보를 검토합니다.

  1. 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에 전달하여 잘라낼 수 있습니다.

  1. ffmpeg -ss 00:00:09 -to 00:00:12 -i app-platform.webm -c copy clip.webm

이 명령은 다음과 같이 분류됩니다.

  • -ss 00:00:09 -to 00:00:12ffmpeg가 타임코드를 이해하는 방법입니다. 이 경우 클립의 시작 위치에서 끝 위치까지 자릅니다. 지속 시간을 기준으로 또는 1초 미만으로 클립할 수도 있습니다.
  • -i app-platform.webm은 입력 파일의 경로이며 앞에 -i가 옵니다.
  • -c copy는 일반적으로 출력 오디오 또는 비디오 코덱을 ffmpeg로 지정하는 곳입니다. 코덱 대신 복사를 사용하면 비디오 재인코딩을 전혀 건너뛰므로 다른 출력 형식을 대상으로 할 필요가 없는 한 훨씬 더 빠르고 품질 손실을 방지할 수 있습니다. 어쨌든 이 클립을 나중에 GIF로 만들기 때문에 기본 입력 형식을 유지하는 것이 좋으며 시간을 절약할 수 있습니다.
  • clip.webm은 출력 파일의 경로입니다.

이렇게 하면 clip.webm이라는 새로운 3초 비디오가 생성됩니다. ls -lh를 사용하여 존재하는지 확인하고 크기를 확인할 수 있습니다.

  1. 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 자체로 수행할 수 있지만 구문을 변경하거나 이해하기가 매우 어려울 수 있습니다.

  1. 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의 파일 크기를 확인할 수 있습니다.

  1. 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 명령을 사용해 보십시오.

  1. gifski --fps 12 --width 540 -o gifski-sample.gif clip.webm

입력 및 출력 파일 이름과 함께 중요한 세부 정보(프레임 속도 및 해상도)만 유지하면 된다는 점에 유의하십시오. 나중에 출력 파일을 확인하십시오.

  1. ls -lh gifski-sample.gif
Output
-rw-r--r-- 1 sammy sammy 1.3M Nov 16 14:33 gifski-sample.gif

이것은 동일한 품질 수준에서 상당한 개선인 1.3M에 불과합니다. 이 시점에서 전체 프레임 속도, 전체 해상도 버전의 GIF를 만들고 싶은 유혹을 느낄 수 있습니다. 비교 포인트는 다음과 같습니다.

  1. gifski --fps 25 --width 1080 -o gifski-high.gif clip.webm

이 마지막 테스트 파일의 크기를 확인하십시오.

  1. 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 최적화 명령을 실행하여 시작하십시오.

  1. 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의 크기를 확인합니다.

  1. ls -lh optimized.gif
Output
-rw-r--r-- 1 sammy sammy 935K Nov 16 14:44 optimized.gif

이 마지막 단계는 파일 크기를 원본 비디오보다 약간 큰 크기(애니메이션 이미지의 경우 매우 합리적인 935K)로 성공적으로 줄였습니다. 이것은 이 튜토리얼의 앞부분에 표시된 것과 동일한 최적화된 GIF입니다.

Gifsicle 설명서를 참조하여 GIF를 조작하는 다른 방법에 대해 알아볼 수 있습니다. 예를 들어 GIF를 각 애니메이션 프레임당 하나씩 여러 이미지 파일로 "폭발\할 수 있습니다.

  1. gifsicle --explode optimized.gif

이렇게 하면 모든 개별 이미지에 대해 optimized.gif.000, optimized.gif.001 등의 여러 파일이 생성됩니다.

  1. 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를 회전할 수도 있습니다.

  1. gifsicle --rotate-90 optimized.gif -o rotated.gif

비효율에도 불구하고 GIF는 거의 모든 곳에서 사용할 수 있기 때문에 여전히 유용합니다. 자동으로 애니메이션을 적용할 짧은 클립이 필요하거나 특히 비디오 형식이 아닌 이미지가 필요한 경우 때때로 좋은 예전 GIF를 대체할 수 없습니다.

결론

이 자습서에서는 여러 도구를 사용하여 기존 비디오에서 잘 최적화된 GIF를 만들었습니다. 또한 오픈 소스 비디오 조작 및 GIF 조작 도구의 생태계와 GIF 추가 편집을 위한 몇 가지 다른 옵션을 검토했습니다. GIF는 흥미롭고 시대착오적인 기술입니다. 여러 면에서 GIF는 현대적이지는 않지만 일부 상황에서는 여전히 실질적인 대체품이 없으며 GIF 작업 도구는 강력하고 잘 관리되고 있습니다. 그 말을 듣고 GIF를 현명하게 사용하십시오.

다음으로 Node.js에서 미디어 처리 API를 빌드하는 방법을 배울 수 있습니다.