[Github]깃헙 readme에 GIF 올릴 때! +용량줄이기

HTML/CSS으로만 구성한 만큼...동적인 작업이 없었기때문에 

 

미디어쿼리로 반응형으로 만든거랑 더보기 기능 만든거;; 이게 그렇게 리드미에 자랑이 하고싶었나보다...진짜 가지가지하는 나

 

5MB이하만 허용된다길래

 

이미지 용량줄이기  짬밥으로

 

이번에도 별 거 없겠지 싶었는데 별 거 였다..참내

 

내가 생각했던 작업 순서

 

1. (윈도우 10기준) 윈도우키 + G 키로 캡처 프로그램 활성화하기

2. 캡 처

3. 녹화된 동영상 필요 없는 부분 짜르고 crop하기

4. 정돈된 영상 GIF변환

5. 깃허브 리드미에 올리기

 

결과

깃허브 : 용량이 크다. 돌아가라

 

아..

 

이걸 어떻게 줄여;;하던차에!! 

찾았다. 방법.

 

 

해결한 작업순서

1. (윈도우 10기준) 윈도우키 + G 키로 캡처 프로그램 활성화하기

2. 캡 처

3. 녹화된 동영상 필요 없는 부분 짜르고 crop하기

4. 정돈된 영상 resize하고 용량 압축 (어차피 큰 GIF는 필요없어서 가장 작은 480P로 했다)

5. 용량 작은 mp4파일을 GIF로 변환

6 깃허브 리드미에 올리기

 

 

이때 사용한 사이트들!

 

https://express.adobe.com/ko-KR/tools/crop-video

Adobe Express

여기에서  mp4 포맷의 영상파일 필요없는 부분 자르고 crop

 

---

https://www.veed.io/video-compressor?locale=ko-KR&source=%2Ftools%2Fvideo-compressor%2Fgif-compressor 

VEED - Create, Edit & Share Videos Online for free

여기서 정돈된 영상 크기, 용량 다 줄이기!! 압축 얍!

---

 

https://cloudconvert.com/

CloudConvert

여기서 MP4 -> GIF로 변환 얍!

 

+++수정!

 

https://ezgif.com/video-to-gif

Online video to GIF converter

mp4 포맷에서 GIF 변환은 위의 사이트에서 하는게 훨~씬 낫다. clooudconvert는 화질 손상이너무 심했다ㅜㅜ왜지

암튼...이 사이트에서 GIF로 변환하는게 결과물 손상이 훨씬 적음!

---

아 참 GIF 사이즈 바꿀 때!! 마크업언어로 작성해도

이미지는 HTML으로 적용 가능!

 

https://stackoverflow.com/questions/54032443/resizing-gif-in-markdown-github

Resizing gif in markdown (github)

이 방법으로 GIF를 반으로 줄여서 올렸다. (용량말고 크기! 사이즈!)