GitHub README, 이슈, 풀 리퀘스트, 위키의 이미지는 그냥 앉아 있지 않습니다 — 해당 페이지를 보는 모든 개발자가 로드합니다. 여러 개의 큰 압축되지 않은 스크린샷이 있는 README는 로드에 몇 초가 걸리고 저장소 크기에 메가바이트를 추가합니다. GitHub에 업로드하기 전에 이미지를 압축하는 것은 저장소를 깔끔하고 빠르고 전문적으로 유지하려는 개발자에게 좋은 관행입니다.
GitHub 이미지 크기 제한
- 저장소 파일: 50 MB를 초과하는 파일은 경고를 생성하고; 100 MB를 초과하는 파일은 push가 차단됩니다. 저장소에 커밋할 때 이미지는 각 1 MB 미만이어야 합니다
- 이슈/PR 드래그 앤 드롭 업로드: GitHub는 이슈 및 풀 리퀘스트의 이미지 첨부 파일에 대해 파일당 최대 10 MB를 허용합니다
- 모범 사례: README 및 위키 콘텐츠의 모든 이미지는 200 KB 미만으로, 이슈/PR 첨부 파일은 500 KB 미만으로 유지하세요
GitHub 이미지에 최적의 형식
- PNG: GitHub README의 스크린샷, 코드 스니펫 및 다이어그램에 가장 일반적인 형식. 품질 손실 없이 40–70% 파일 크기를 줄이는 무손실 PNG 압축 사용
- JPEG: 무손실이 필요하지 않은 사진이나 그라데이션이 있는 이미지에 더 좋습니다
- WebP: GitHub Markdown은 모든 최신 브라우저에서 WebP를 올바르게 렌더링합니다. WebP는 JPEG보다 25–35% 더 작습니다
- SVG: GitHub는 Markdown에서 SVG 파일을 인라인으로 렌더링합니다. 다이어그램, 아키텍처 차트 및 배지에 이상적입니다
단계별 GitHub README 이미지 압축 방법
- 스크린샷 찍기: 전체 화면이 아닌 관련 영역만 캡처하세요.이미지 자르기를 사용하여 불필요한 여백을 잘라내세요
- 표시 너비로 리사이즈: GitHub는 README 이미지를 기본 열에서 최대 약 800 px 너비로 렌더링합니다. 이미지 리사이즈를 사용하여 최대 1200 px로 리사이즈하세요
- 이미지 압축: 이미지 압축을 사용하여 파일 크기를 줄이세요. README 인라인 이미지의 경우 200 KB 미만을 목표로 하세요
- 최신 저장소를 위해 WebP로 변환: 이미지 변환기를 사용하여 WebP로 변환하세요
GitHub 데모를 위한 GIF 최적화
GitHub 이슈와 README에서 데모, 버그 재현 또는 기능 미리보기를 보여주는 애니메이션 GIF는 흔합니다. 압축되지 않은 화면 녹화 GIF는 쉽게 20–50 MB가 될 수 있습니다.
- 기간 제한: 데모 GIF는 10초 미만으로 유지하세요
- 프레임 레이트 줄이기: 10–15 fps로도 대부분의 UI 데모에 충분합니다
- 해상도 줄이기: 600–800 px 너비로도 데모 GIF에 충분합니다
GitHub 이미지를 작게 유지하는 것은 전문적인 장인 정신의 표시입니다. 빠른 압축에는 이미지 압축을, 큰 스크린샷 축소에는 이미지 리사이즈를, 형식 변환에는 이미지 변환기를 사용하세요.