티스토리 블로그에서 애니메이션 webp 지원 적용해 보기

과거 티스토리에서는 구글의 Webp 포맷 중 애니메이션이 없는 Webp 포맷에 한해서만 지원하고 있었으나 최근 애니메이션 Webp 포맷도 지원하고 있습니다. 엄밀히 말하면 애니메이션 Webp를 지원하다 정시시켰고, 다시 부활해서 현재는 애니메이션 Webp도 지원하는 상태입니다.

구글이 개발한 Webp 포맷을 사용하려는 이유는 엄청난 압축률로 인한 파일 크기 감소에 비해 화질 저하가 그리 크지 않은 훌륭한 포맷이라는 점 때문입니다. 현재는 구버전으로 사실상 퇴출된 인터넷 익스플로러만 지원되지 않고 거의 모든 웹 브라우저에서 지원됩니다.

 

그럼 실제로 비디오 영상을 애니메이션 Webp로 변환하는 방법 및 파일 크기를 압축해 최적화시키는 방법까지 모두 실제 예제를 통해 알아보도록 하겠습니다.

 

먼저, 유튜브에서 오징어 게임중 비디오의 일부만을 캡처하도록 하겠습니다.

동영상 캡처 및 Gif로의 변환에 필요한 프로그램은 무료 프로그램인 ScreentoGif입니다. 아래의 프로그램을 다운로드하여 설치하도록 합니다.

 

ScreenToGif.2.34.1.Setup.msi

3.57MB

 

설치가 끝났다면 유튜브에서 오징어 게임을 검색한 다음 영상의 극히 일부만을 테스트를 위해 캡처하도록 합니다.

ScreenToGif를 실행한 다음 녹화 버튼을 누르고 가장자리를 드래그하여 녹화 영역을 적절하게 맞춰줍니다.

이 작업은 MP4 등의 형태를 가진 비디오 포맷을 Webp 포맷으로 변환하기 전 단계인 애니메이션 Gif 포맷으로 따내기 위해서입니다. 녹화를 하지 않고 여러 장의 정지 이미지를 통해 Gif를 제작해도 상관없습니다.

 

 

유튜브의 플레이 버튼을 누른 다음 바로 F7 키를 누르면 녹화가 시작되고 다시 F7 키를 누르면 녹화가 일시 정지되는 데 이대로 저장하려면 F8 키를 눌러 편집 화면으로 이동합니다.

편집 화면에서 편집 탭을 누른 다음 불필요한 프레임들을 선택해 삭제하거나 프레임 레이트 줄이기를 클릭해 용량을 가볍게 하기 위한 작업을 진행합니다.

이 캡처 비디오에서는 불필요한 프레임 제거 작업만 진행했으며, 약 15 프레임의 Gif 파일이 만들어졌습니다.

 

Gif - 444KB

 

이제 애니메이션 Gif 파일을 애니메이션 WebP로 변환하기 위해 ezgif.com으로 이동합니다.

해당 사이트는 온라인에서 동영상을 gif 또는 Webp로의 변환을 지원하는 사이트이며, Convertio에서의 변환에 비해 압축률이 좋습니다.

상단 메뉴에서 Optimize를 선택한 다음 파일 선택 버튼을 눌러 Gif 파일을 지정해 주고 Upload 버튼을 누릅니다.

 

 

다음으로 이미지의 바로 아래에 있는 Convert 버튼을 누르고 Webp로 변환합니다. 그다음 아래쪽에 있는 저장 버튼을 눌러 로컬 PC로 다운로드하면 됩니다.

 

 

아래의 이미지가 Webp로 변환된 최종 파일입니다.

화질 저하가 거의 없으면서도 Gif 444KB -> Webp 86KB로 원본 대비 약 -80.57%의 용량 감소 효과를 보여 줍니다.

 

WebP - 86KB

 

위의 경우는 프레임의 감소 없이 포맷만 변환한 경우인데, 만일 ScreenToGif에서 프레임 축소 작업까지 거친 후 변환한다면 아마도 더 많은 용량 감소 효과를 가져올 것입니다.

 

위에서는 애니메이션 WebP에 관하여만 살펴보았지만 사실 정지 이미지의 Webp 포맷 또한 기존 Jpg 포맷에 비해 화질 저하는 거의 없으면서도 월등한 압축률을 보이고 있습니다.

 

갈수록 사이트의 속도 문제, 구글 애드센스의 웹 바이탈 문제 등으로 경량화 및 최적화가 주요한 관심사가 되는 요즘 WebP 포맷은 눈여겨볼 만한 이미지 포맷이라고 생각합니다.

애니메이션 Webp가 티스토리에서도 작동할 수 있도록 업데이트해주신 티스토리 개발자분들에게 감사의 마음을 전합니다.