GitHub README、Issues、Pull Requests和Wiki中的图片不只是摆在那里——每位查看这些页面的 开发者都会加载它们。包含多张大型未压缩截图的README可能需要数秒才能加载,并为仓库大小 添加数兆字节。在上传到GitHub之前压缩图片是关心保持仓库整洁、快速和专业的开发者的良好实践。
GitHub图片大小限制
- 仓库文件:超过50 MB的文件会生成警告;超过100 MB的文件无法推送。 直接提交到仓库时,图片应各自低于1 MB
- Issues/PR拖放上传:GitHub允许Issues和Pull Requests中每张图片附件最大10 MB
- 最佳实践:README和Wiki内容的所有图片保持在200 KB以下; Issues/PR附件保持在500 KB以下
GitHub图片的最佳格式
- PNG:GitHub README中截图、代码片段和图表最常见的格式
- WebP:GitHub Markdown在所有现代浏览器中正确渲染WebP。 WebP比JPEG小25-35%
- SVG:GitHub在Markdown中内联渲染SVG文件。 非常适合图表、架构图和徽章
压缩GitHub README图片的步骤
- 截图:只捕获相关区域,而不是整个屏幕。使用图片裁剪修剪不必要的空白
- 调整到显示宽度:GitHub在默认列中将README图片最大渲染约800像素宽。 使用图片调整大小将最大调整为1200像素
- 压缩图片:使用图片压缩减小文件大小。 README内联图片目标200 KB以下
- 转换为WebP:使用图片转换器转换为WebP 以获得更小的文件大小
优化GitHub演示GIF
在GitHub Issues和README中显示演示、错误重现或功能预览的动画GIF很常见。 未压缩的屏幕录制GIF很容易达到20-50 MB。
- 限制时长:演示GIF保持在10秒以下
- 降低帧率:大多数UI演示10-15 fps就足够了
- 降低分辨率:演示GIF600-800像素宽就足够了