Markdown Image Generator

About Markdown Images

Markdown provides simple syntax for embedding images in your documents, with support for alt text, titles, and links.

Image Syntax Types

1. Inline Images

The most common format. The image URL appears directly in the syntax.

![Alt text](https://example.com/image.jpg "Optional title")

Use when: Images are used once or for simple cases

2. Reference Images

Separate image syntax from URL definition.

![Alt text][image-id]

[image-id]: https://example.com/image.jpg "Optional title"

Use when: Same image is used multiple times

3. Linked Images

Make images clickable by wrapping them in link syntax.

[![Alt text](image.jpg)](https://destination.com)

Use when: Image should link to another page

Alt Text Best Practices

Alt text is crucial for accessibility and SEO:

• Be descriptive: Explain what the image shows
• Be concise: Aim for 125 characters or less
• Don't say "image of": Screen readers announce it's an image
• Context matters: Describe the purpose, not just content
• Skip decorative images: Use empty alt text ![](...) for purely decorative images

Image URL Formats

• Absolute URLs: https://example.com/image.jpg
• Relative URLs: ./images/photo.jpg or ../assets/logo.png
• GitHub: Use relative paths or raw.githubusercontent.com URLs
• Data URLs: Embed small images with base64 encoding

Supported Image Formats

• JPEG/JPG: Photos, complex images
• PNG: Screenshots, logos with transparency
• GIF: Animations, simple graphics
• SVG: Vector graphics, icons (not all platforms)
• WebP: Modern format (growing support)

GitHub-Specific Features

GitHub and many platforms support additional image features:

• Drag-and-drop image uploads in issues/PRs
• Automatic image hosting for uploads
• Image resizing with HTML: <img src="..." width="200">
• Light/dark mode images (using picture element)

Image Size Control

Standard markdown doesn't support size control, but you can use HTML:

<img src="image.jpg" alt="Alt text" width="300">
<img src="image.jpg" alt="Alt text" height="200">
<img src="image.jpg" alt="Alt text" width="50%">

Common Use Cases

• README badges: Build status, version, license
• Screenshots: App features, UI examples
• Diagrams: Architecture, workflows
• Logos: Project branding
• Charts: Data visualizations