GIF vs Mp4 용량차이
해당사이트 에서 covert한 결과파일이 약 7배차이가난다
소스코드
import SampleMp4 from 'assets/img/sampleMP4.mp4';
import SampleGif from 'assets/img/sampleGIF.gif';GIF 사용하였을때 코드
<img src={SampleGif} />MP4 사용하였을떄 코드
<video playsInline muted autoPlay loop>
<source src={SampleMp4} type="video/mp4" />
</video>video 속성 기능
playsInline: iOS 및 일부 모바일 브라우저에서 동영상을 전체 화면으로 재생하지 않고, 인라인(inline)으로 재생하도록 설정한다.
muted : 동영상의 소리를 기본적으로 음소거(mute) 상태로 설정한다. 보통 자동 재생(autoPlay)과 함께 사용되며, 브라우저 정책상 자동 재생이 가능하도록 하기 위해 필요하다.
autoPlay : 페이지가 로드되면 동영상이 자동으로 재생된다. 단, 대부분의 브라우저는 muted : 속성이 설정되지 않으면 자동 재생을 차단한다.
loop : 동영상이 끝까지 재생된 후 다시 처음부터 반복(loop) 재생된다.
결론
👉 고화질 & 성능 최적화가 필요하면 MP4 사용 추천
👉 짧고 간단한 애니메이션이면 GIF 가능하지만, WebP 애니메이션이 더 나은 대안
lightHouse(GIF)
lightHouse(MP4)
- 큰 차이는 아니여도 Largest Contentful Paint element 가 없어지고 점수가 2점이 올랐다.
GPT에게 물어본결과
ISSUE
- React-native 웹뷰 환경에서 해당 mp4를 사용하고있는데,화면접근시 전체화면으로 비디오가 켜지는 현상 발견
<WebView
source={{ uri: 'https://example.com' }}
allowsInlineMediaPlayback={true} // 인라인 재생 허용 (전체 화면 X)
mediaPlaybackRequiresUserAction={false} // 자동 재생 허용 (유저 액션 필요 없음)
/>해당 속성으로 인라인 재생을 허용 해줘야 video tag에 playsInline 가 정상작동합니다
