How to change image size in Markdown?

To adjust the size of an image in Markdown, you have a few options depending on your Markdown flavor and platform:

1. Use HTML <img> Tag

Most Markdown processors allow inline HTML. Use the width and/or height attributes:

<img src="image.jpg" alt="Alt Text" width="300" height="200" />

• width and height can be in pixels (e.g., 300) or percentages (e.g., 50%).

2. Inline CSS (Platform-Specific)

Some Markdown flavors (e.g., GitHub, Obsidian) support inline CSS:

![Alt Text](image.jpg){: style="width:300px; height:auto;"}

3. Query Parameters (Platform-Specific)

On platforms like GitHub, you can append parameters to the image URL:

![Alt Text](image.jpg?raw=true&width=300)

(Not universally supported.)

Examples

Basic HTML:

<img src="logo.png" alt="Company Logo" width="200" />

Percentage Width:

<img src="banner.jpg" alt="Banner" width="100%" />

Inline CSS:

![Profile Photo](profile.jpg){: style="width:150px; border: 2px solid #333;"}

Notes

• Compatibility: Check if your platform supports HTML/CSS in Markdown (e.g., GitHub, GitLab, and Jupyter do).
• Responsive Images: Use width="100%" or style="max-width:500px;" for responsive sizing.
• Alt Text: Always include descriptive alt text for accessibility.

Pure Markdown Limitation

Standard Markdown syntax (![Alt](url)) does not support image resizing. Use HTML/CSS for full control.