[Github] 깃허브 README.md 에 gif, images (울짤, 사진 이미지) 등 올리는 법

깃허브에 gif나 image 올릴 때 다른 곳에 올라가 있는 링크를 연결하는 방법들은 많이 나와있는데, 내 리포지토리에 올려둔 것을 연결하는 건 안 나와있어서 정리 봅니다. 

 

깃허브 페이지 (README.md) 즉 첫 페이지에 gif (동영상이지만, 움직이는 이미지로 변환한 상태 (용량 이슈)) 넣는 방법.

---

 

gif 이미지

 

gif 링크

 

1) 정말 그냥 간단한 gif 이미지만 필요할 경우:

이런 (GIPHY: https://giphy.com/ ) 같은 곳에서 원하는 이미지의 링크 복사.

링크 복사방법은 링크 버튼 클릭

 

gif 파일로 변환 방법

 

내가 가지고 있는 mp4 파일을 해당 웹사이트 들 중 아무데서나 업로드해서 변경

* https://www.freeconvert.com/ko

File Converter - FreeConvert.com

 

* https://nicke.tech/n-studio?migrated=true

N-Tech

 

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

MP4 video to GIF converter

 

 

---

 

리포지토리에 연결 방법

 

내가 올린 리포지토리의 주소를 Copy 후

 

README.md 에 서 edit -> 아래의 방식으로 html 코드 연결

예: <img src="이미지경로.gif" width="pixel size" height=" pixel size " alt="설명">

혹은 <img src="이미지경로.gif" width="100%>

 

사이즈 설정 설명:

 

• 픽셀 지정: width="400" (가로 400px, 세로는 비율 자동 조정)
  • 가로세로 비율(Aspect Ratio)을 자동으로 맞추려면 가로(width)나 세로(height) 중 하나만 지정하고, 나머지는 생략하면 됩니다.
  • 두 속성을 동시에 적으려면 아래와 같이 자동 조절할 속성에 auto를 적어야 합니다. 단, 이 방식은 일부 브라우저나 리더기에서 스타일이 깨질 수 있어 속성 하나를 완전히 생략하는 것을 가장 추천합니다.
• 비율 지정: width="100%" 
  • 가로 화면의 100%로 고정하려면 width 속성값을 "100%"로 지정하면 됩니다. 마찬가지로 비율을 유지하기 위해 세로(height) 속성은 완전히 생략합니다. (50% 원본의 절반 크기)
  • 화질 주의: 원본 GIF의 가로 해상도가 너무 작으면, 100%로 늘어났을 때 화질이 깨져 흐릿하게 보일 수 있습니다.
• 최대 크기 제한 방법
  • <img src="이미지경로. gif" style="width: 100%; max-width: 800px;"> 
  • width="100%"로 설정하여 화면에 맞게 늘어나되, 원본이 너무 커서 깨지지 않도록 최대 픽셀(px)을 제한하는 방법입니다.
• 중간 정렬: <p align="center">
  • 이 설정 안 할 시 기본은 왼쪽 정렬입니다.

 

해당 html 코드 설정 예시

<p align="center">
<img src="이미지경로.gif" width="50%">
</p>