.GIF가 .MP4보다 파일 크기가 큰 이유(feat. 이미지 렌더링)

이미지 파일 형식들에 대해 찾아보다가 아무 생각 없이 사용했었던 GIF의 파일 형식이 MP4 파일 형식보다 대부분 크다는 것을 알게 되었다.

GIF 파일 형식은 주로 '움짤' 소위 말해 움직이는 동영상을 만드는데 많이 사용되며, 쉽게 만들 수 있고 이미지를 첨부할 수 있는곳이라면 대부분 업로드가 가능하기때문에 많이 사용 되는 파일 형식이다.

그러나 GIF에는 이미지 품질, 이미지 크기 및 오디오를 포함하여 많은 단점이 있으며 특정 크기를 초과하면 로드하는 데 시간이 오래 걸리고 동시에 재생 및 버퍼링할 수 없게 된다.

그럼 영상은 무조건 MP4로 만들어야할까?

이 궁금증을 해결하기 위해 GIF(Graphics Interchange Format) 파일과 MP4(MPEG-4 Part 14) 파일의 차이점을 자세히 살펴보고,

더 나아가 어떤 상황에서 어떤 파일 형식을 사용해야 하는지 알아보고자 한다.

GIF, MP4 모두 이미지나 비디오를 저장하는 데 사용되지만, 각각 고유한 특징을 갖고 있다.

각 특징들을 표로 한눈에 알아보자.

GIF와 MP4 둘 다 인터넷에서 많이 사용되는 파일 형식이다. 하지만, GIF와 MP4는 서로 다른 형식이며, 주로 사용되는 목적도 다르다.

GIF는 이미지 형식으로, 그래픽 이미지를 나타내는 데 주로 사용된다.

• GIF는 256 색상에 대한 지원을 제공하며, 이러한 색상 팔레트는 애니메이션 및 반복 프레임을 만들 때 매우 유용하다.
• GIF는 이미지의 투명도를 지원하므로 투명 배경을 가진 이미지를 만들 수 있습니다.

위 짤은 아래와 같이 여러장의 이미지를 반복해서 애니메이션을 만든다.

반면, MP4는 비디오 형식으로, 일련의 프레임으로 구성된 동영상을 나타내는 데 주로 사용됩니다.

• MP4는 고화질 비디오를 지원하며, 다양한 코덱을 사용하여 오디오 및 비디오를 압축하여 저장할 수 있습니다. 또한,
• MP4는 일부 컨테이너 형식으로서 다른 형식의 파일(예: MP3 오디오 파일)을 포함할 수도 있습니다.

GIF의 이미지 파일 형식은 특정 상황에서 이점이 있으며 가장 주목할만한 것은 접근성과 즉시성이다.

비디오를 재생하는 데 필요한 소프트웨어(및 호스팅 요구 사항) 없이 대부분의 웹 페이지에 gif를 표시할 수 있다. 또한 비디오 플레이어 인터페이스가 필요하지 않다.(로드하는데 시간은 걸림)

기본적으로 애니메이션 GIF와 비디오는 동일한 개념이지만 구현 방식이 다르다.

GIF는 일반 이미지로 시작했고 나중에 애니메이션이 추가되었다.

애니메이션 GIF는 일련의 프레임이며 파일 크기가 그리 효율적이지 않다. 또한, 소리가 나지 않다.

반면 비디오는 매우 다양한 형식을 사용할 수 있다.

일부 비디오 형식은 프레임마다 변경된 픽셀만 표시한다. 다른 비디오 형식은 픽셀 그룹의 움직임을 추적하고 그룹이 어떻게 이동하고 변경되었는지 결과를 표시한다.

GIF 파일의 용량이 무조건 클 수 있는 것은 아니다.

GIF 파일의 용량은 여러 요인에 따라 결정된다. 예를 들어 이미지 크기, 색상 깊이, 반복 횟수 및 프레임 속도 등이 용량에 영향을 미친다. 또한, 압축 알고리즘에 따라 파일 크기가 달라질 수 있다.

그러나, 대개 GIF 파일은 비교적 용량이 크다. GIF 파일 형식의 압축 알고리즘은 비디오 압축 알고리즘보다 덜 효율적이다. 따라서, GIF 파일은 동일한 크기의 비디오 파일보다 더 큰 용량을 가지는 경우가 많다.

그러나, 최근의 웹 기술은 대부분의 이미지와 비디오를 더 효율적으로 압축하고 처리할 수 있는 방법을 제공한다. 또한, GIF 파일의 크기를 줄이기 위한 최적화 기술도 있다. 이러한 기술을 사용하여 GIF 파일의 용량을 최소화할 수 있다.

• GIF는 LZW(1984년에 정의됨)를 사용하는데, 이는 무손실 압축을 위한 좋은 압축 형식이 아니다.
• GIF는 8비트 팔레트 이미지만 사용한다. 따라서 필요한 양자화는 일반적으로 압축을 악화시키는 노이즈를 도입함.
• GIF는 전혀 영화 압축 형식이 아니며 연속된 이미지의 차이를 저장하지만 무손실 방식으로 저장하므로 영화에 유용하지 않습니다.

• H.264 압축 알고리즘을 사용하여 높은 압축률로 비디오를 압축하므로, 대체로 GIF 파일 형식보다 파일 크기가 작다.

MP4 모션 코덱과 GIF 이미지 코덱의 한 가지 중요한 차이점은

H.264, H.265 등과 같은 모션 코덱은 프레임 간 변경 사항 만 인코딩하는 반면

이미지 코덱은 전체 프레임을 반복해서 인코딩하여 대부분의 이미지 데이터를 불필요하게 복제한다는 것이다.

GIF는 30년 전에 나온 100% 구식 기술이다.

다양한 색상을 지원하지도, 나쁜 압축 형식을 사용한다는 단점들이 있지만 지금까지도 사용하는 이유가 있다.

때때로 사람들은 긴 비디오가 필요하지 않다.GIF는 이미지를 첨부할 수 있는곳에서 대개 사용할 수 있다.(ex: 벨로그) 이는 이미지 형식의 특성 때문이다. 따라서, GIF는 웹 콘텐츠에서 널리 사용됩니다.GIF는 가벼울 수 있다.GIF는 이미지의 투명 배경을 지원한다. 따라서, 투명한 부분이 있는 로고나 아이콘 등을 만들 때 유용하다.GIF는 애니메이션을 무한 반복할 수 있다. 이는 광고나 로고 등을 인식하기 쉽게 만들어주는 데 도움이 된다.

1. 애니메이션 효과에 사용하기: GIF 파일 형식은 간단한 애니메이션(로딩표시기) 및 반짝임과 같은 작은 효과를 만드는 데 사용하기 적합하다.
2. 파일 크기 최적화: GIF 파일은 파일 크기가 상대적으로 큽니다. 따라서, GIF 파일을 사용할 때는 최적화 기술을 사용하여 파일 크기를 줄이는 것이 중요합니다. 이를 위해 GIF 파일의 크기, 색상 깊이, 반복 횟수 및 프레임 속도 등을 최적화할 수 있습니다.
3. 웹 페이지 속도 고려하기: GIF 파일은 웹 페이지의 속도를 늦추는 요소 중 하나이다. 따라서, 웹 페이지에서 GIF 파일을 사용할 때는 파일 크기와 로딩 시간을 고려하여 최적화해야 한다.
4. GIF 첨부 제한하기: 유저가 GIF 파일 형식을 업로드할 수 있는 웹서비스라면 파일용량 또는 시간 제한을 걸어두기.(대부분의 웹사이트에서는 gif 15초 미만만 허용함)

• 실사를 찍은 사진과 같은 자연스러운 이미지에 적합
• 손실 압축 방식을 사용하므로 압축률이 높아 용량을 줄일 수 있다. 그러나, 압축률이 높아질수록 이미지의 품질이 떨어질 수 있다.

• 로고, 아이콘, 그래픽 등에 적합
• 손실 없는 압축 방식을 사용하므로 이미지 품질이 높다. 그러나, JPEG보다 용량이 크기 때문에 로딩 속도가 느릴 수 있다.

• 움직이는 이미지를 만드는 데 적합

• JPEG와 PNG의 장점을 모두 가지고 있는 이미지 파일 형식
• 손실 압축 및 손실 없는 압축 모두 지원하며, 용량을 줄이면서 이미지 품질을 유지할 수 있다. 그러나, 모든 웹 브라우저에서 지원하지는 않으므로, 브라우저 호환성을 고려하여 사용해야 한다.

• BMP는 Microsoft Windows 운영체제에서 널리 사용되는 이미지 파일 형식
• BMP 파일은 픽셀 정보를 단순히 저장하기 때문에 다른 파일 형식에 비해 큰 파일 크기를 가지고 있다.
• BMP 파일은 압축이 되어 있지 않기 때문에 이미지 품질이 손상되지 않는다. - BMP 파일은 단순하며 Windows 운영체제에서 널리 지원되기 때문에 쉽게 사용할 수 있다.

• TIFF 파일은 주로 인쇄, 출판 및 그래픽 디자인 분야에 적합
• TIFF 파일은 다른 파일 형식에 비해 큰 파일 크기를 가지고 있으며, 압축을 지원한다.
• 다양한 컬러 스페이스와 깊이를 지원하여 고품질의 이미지를 제공한다.

• SVG는 로고, 아이콘, 그래픽 등을 만들 때 적합
• XML 기반의 벡터 그래픽 이미지 파일 형식이다.
• SVG 파일은 이미지를 벡터 형식으로 저장하기 때문에 해상도에 따라 이미지 크기를 자유롭게 조절할 수 있다.

각각의 형식은 고유한 특징을 가지고 있습니다. 프로젝트의 목적과 요구 사항에 따라 적합한 이미지 파일 형식을 선택하여 사용해야 한다.

이미지 요청 > 이미지 다운로드 > 이미지 해석 > 이미지 렌더링 > 캐싱

이미지의 렌더링은 웹 페이지의 성능에 영향을 미친다. 큰 용량의 이미지는 다운로드에 시간이 오래 걸리며, 웹 페이지의 로딩 속도를 느리게 만든다.(이미지를 로딩할 때 사용자에게 로딩 중임을 알리는 로딩 표시기를 구현하여, 사용자 경험을 개선할 수 있다.)

따라서, 이미지 파일의 크기를 최적화하고, 적절한 이미지 파일 형식을 선택하는 것이 중요하다.

이미지 렌더링 최적화는 웹 페이지에서 이미지를 빠르고 효율적으로 로드하여 사용자 경험을 향상시킬 수 있다.

• PNG: 더 높은 품질의 이미지를 생성하지만 파일 크기도 더 큽니다. 손실이 있을 수도 있지만 무손실 이미지 형식으로 생성되었습니다.
• JPEG: 손실 및 무손실 최적화를 사용합니다 . 품질과 파일 크기의 적절한 균형을 위해 품질 수준을 조정할 수 있습니다.
• GIF: 256색만 사용합니다. 애니메이션 이미지에 가장 적합한 선택입니다. 무손실 압축만 사용합니다.

웹 페이지에서 이미지를 로드할 때 중요한 이미지를 먼저 로드하는 것은 사용자 경험을 향상시키기 위한 중요한 요소 중 하나다. 사용자는 페이지의 내용을 빠르게 볼 수 있는 것이 중요하므로, 중요한 이미지를 먼저 로드하는 것이 좋다.

1. lazy loading: 사용자가 페이지를 스크롤하면서 이미지가 필요한 시점에 이미지를 로드하는 기술이다. 이를 통해 페이지 로딩 속도를 향상시키고, 필요하지 않은 이미지를 로드하지 않아 대역폭을 절약할 수 있다.
2. 우선순위에 따라 로드하기: 이 방법은 JavaScript를 사용하여 이미지를 불러올 때, 중요한 이미지를 먼저 로드하도록 지정하는 것이다. 이를 통해 중요한 이미지가 빠르게 로드되어 사용자 경험을 향상시킬 수 있다.

다음은 이미지를 너무 많이 압축하면 발생할 수 있는 일의 예시다. 첫 번째는 매우 낮은 압축률을 사용하여 최고의 품질을 제공하지만 파일 크기는 더 커진다. 두 번째는 매우 높은 압축률을 사용하여 이미지 품질이 매우 낮지만 파일 크기는 더 작다.

위의 첫 번째 이미지는 590KB이다. 한 장의 사진으로는 꽤 크다! 일반적으로 웹페이지의 전체 무게를 1~2MB 미만으로 유지할 수 있는 것이 가장 좋다.

손실: 일부 데이터를 제거하는 필터. 이렇게 하면 이미지가 저하되기 때문에 이미지를 얼마나 줄일 것인지에 주의해야 한다.

무손실: 데이터를 압축하는 필터. 품질이 떨어지지는 않지만 이미지를 렌더링하기 전에 압축을 해제해야 한다.

압축 기술을 실험하여 각 이미지 또는 형식에 가장 적합한 것이 무엇인지 확인하는 것이 가장 좋다. 도구에 옵션이 있는 경우 웹용 이미지를 저장하면 최적의 압축을 수행할 수 있도록 품질 조정을 제공한다.

• https://dougsillars.com/2017/04/12/animated-gifs-vs-video-files/
• https://blog.bluetriangle.com/how-to-optimize-images-to-improve-web-performance
• https://stackoverflow.com/questions/44282217/how-does-the-browser-render-images-with-different-sizes-img-tag-in-html