GitHub uses Markdown (.md) syntax for rendering README files. You can add images using either relative paths, direct URLs, or base64 embedding.
✅ Markdown Syntax to Add an Image
Alt Text: Description of the image (shown if the image can’t load and improves accessibility).image-url-or-path: This can be a relative path, full URL, or even a base64 image.
📁 Option 1: Add Image from Your Repository
Step 1: Add the image to your repository
Place the image in your project folder, e.g., images/screenshot.png.
Step 2: Use a relative path in your README
✅ Works well and keeps everything version-controlled.
🌐 Option 2: Use External Image URL
Use an image hosted elsewhere (e.g., Imgur, a CDN, or another website):
⚠️ Make sure the link is permanent and publicly accessible.
📦 Option 3: Drag and Drop into GitHub UI
If you’re editing the README on GitHub.com:
- Click the README file > Edit (pencil icon)
- Drag and drop an image into the editor
- GitHub will auto-upload it and generate the Markdown for you
🧠 Bonus: Resize Images with HTML (Optional)
Markdown doesn’t support image resizing natively, but you can use HTML inside .md files:
<img src="images/screenshot.png" alt="App Screenshot" width="500"/>
Works well when you need precise control over layout.
📋 Summary Table
| Method | Syntax Example | Notes |
|---|---|---|
| Local image (in repo) |  | Best for version control |
| External URL |  | Must be publicly accessible |
| GitHub drag-and-drop | Auto-generated Markdown | Easiest for quick uploads |
| HTML tag (for resizing) | <img src="..." width="300"/> | Use when layout control needed |
