포트폴리오를 새로 만들면서 gif파일을 넣었는데 local환경에서는 잘 보이지만, 배포 후에 모든 gif파일이 엑스박스로 뜨는 에러가 발생했다.
첫번째 시도.
처음에는 경로 문제인가 싶어서 경로를 이렇게 저렇게 바꿔봤는데 그대로 엑박...^^
jpg나 png 파일은 똑같이 경로 설정을 해주어도 잘 나오는 걸 보니 경로 문제는 아닌듯 했다.
두번째 시도.
console창에 뜬 에러 문구를 확인해보니
Error: input image exceeds pixel limit
라고 나왔다. 픽셀 한도를 초과했다고...?
이번에 next.js를 사용했는데 next.js에서는 여기서 자체적으로 제공하는 Image태그를 import해서 사용해야한다. 이 때 꼭 width값과 height값을 태그 안에 넣어주어야하는데 여기서 문제가 발생했나 싶어서 값을 크게도, 작게도 조정해보았다.
하지만 여전히 gif파일은 보이지 않았다..^^;
세번째 시도.
gif파일 오류에 대한 글을 계속해서 찾던 중 "GIF를 쓰지 말아야 하는 이유"라는 제목의 글을 발견했다. GIF파일은 똑같은 화질의 MP4 등 동영상 파일과 비교했을 때 10배 정도 용량이 크다는 것이다...!
ㅎ ㅓ 그래서 계속 픽셀 리밋을 초과했다고 떴던 건가..?
gif파일을 전부 mov로 변환해서 video 태그 안에 넣었더니 드디어 배포환경에서도 영상이 보이기 시작했다. 이 날 눈물을 흘릴 뻔 했다. 하지만 진짜로 울지는 않았다. 난 강하니깐.
나와 같은 문제를 겪는 사람이 한명이라도 있다면 도움이 되기를 바라며...
포스팅 마침✨
