Markdown Image Generator
Paste an image URL, set the width, height and alignment, then copy Markdown or HTML that renders the same way everywhere. Everything runs locally in your browser.
How do you change image size in Markdown?
Standard Markdown has no syntax for image size, so use an HTML tag instead: <img src="image.png" alt="Alt text" width="300">. GitHub, GitLab and most renderers pass that HTML straight through. Setting only the width keeps the original aspect ratio. To center the image, wrap the tag in a div with align="center".
<img src="image.png" alt="Alt text" width="300">
<div align="center">
<img src="image.png" alt="Alt text" width="300">
</div>The first tag renders the image 300 pixels wide with the height scaled automatically; the second renders the same image centered on the page.
Try the Markdown Image Generator
Settings
Output
Size & alignment
Markdown image syntax, sizing and alignment
Inserting an image takes one line. Controlling how big it is and where it sits takes HTML, because CommonMark deliberately leaves presentation out of the spec. Here is every form you actually need.
Standard image syntax
An exclamation mark, alt text in square brackets, then the path in parentheses. The optional quoted title becomes a tooltip on hover.
Renders the image at its natural size, falling back to “Alt text” if the file cannot be loaded.
Set the image size with an HTML tag
There is no width or height in Markdown itself, so switch to an <img> tag — almost every renderer, GitHub included, passes plain HTML through untouched. Give only a width and the browser scales the height for you.
<img src="/images/photo.png" alt="Alt text" width="300">
<img src="/images/photo.png" alt="Alt text" width="50%">The first image is 300 pixels wide; the second fills half of its container and stays responsive. Both keep their original proportions.
Center, left or right align
Wrap the image in a div carrying an align attribute. This is the most portable technique because GitHub strips inline style attributes but keeps align. Keep a blank line inside the div if you want Markdown syntax to still be parsed there.
<div align="center">
<img src="/images/photo.png" alt="Alt text" width="400">
</div>Centers the image on the page. Swap center for left or right to push the image against that edge instead.
Make the image clickable
Nest the image inside link syntax to turn it into a thumbnail that opens a full-size version or another page. A clickable image that also needs a fixed size has to be written as nested HTML.
[](https://example.com)
<a href="https://example.com"><img src="/images/thumb.png" alt="Alt text" width="200"></a>Both lines produce a clickable image, but only the HTML version can be constrained to 200 pixels wide.
Reference-style images
Move long URLs out of the prose and point at them by label. Useful when the same screenshot appears several times, or when the URL is a long CDN path that ruins readability.
![Alt text][logo]
[logo]: /images/photo.png "Optional title"Renders identically to the inline form. The definition line itself outputs nothing and can sit at the bottom of the file.
Editor-specific size shortcuts
Several editors invented their own sizing syntax. It is convenient locally but breaks on GitHub and most static site generators, so keep it out of anything you publish.
![[photo.png|300]]The first works in Typora and in markdown-it with the imsize plugin; the second is Obsidian's wiki-link form. GitHub prints both as literal text.
Where image sizing and alignment work
Basic image syntax is universal. Sizing and alignment are not, because they depend on how much HTML each platform allows through its sanitizer.
| Platform | Support | Notes |
|---|---|---|
| GitHub / GitLab | Full | <img> with width and height works, as does <div align>. Inline style attributes are stripped. |
| Obsidian | Full | Supports ![[photo.png|300]] and  shorthand as well as raw HTML. |
| VS Code preview | Full | Renders HTML img tags. The =300x200 shortcut is not recognised. |
| Notion | Partial | Pasted Markdown becomes an image block; you resize by dragging handles, not by syntax. |
| Partial | No HTML allowed, so no sizing or alignment. Images are uploaded through the editor. | |
| Discord | None | Image syntax is not rendered. Paste the raw URL and Discord embeds a preview itself. |
How to size and align an image in Markdown
Pick an image type
Choose standard, reference-style or linked, depending on whether the image is inline, defined once by label, or should be clickable.
Fill in the URL and alt text
Paste the image URL or a relative path, then write alt text that describes the image for screen readers and for readers whose image fails to load.
Set the size and alignment
Enter a width, a height, or both, and choose center, left or right. The generator switches to the HTML form automatically, because plain Markdown cannot express size.
Copy the result
Copy the Markdown or the HTML output, and use the preview tab to confirm the image lands where you expect before you commit.
Frequently Asked Questions
How do I change image size in Markdown?
Standard Markdown has no size syntax, so use an HTML tag: <img src="image.png" alt="Alt text" width="300">. Setting only the width lets the browser scale the height and preserve the aspect ratio. Percentage widths such as 50% also work and stay responsive on narrow screens.
How do I center an image in Markdown?
Wrap it in a div with an align attribute: <div align="center">, then the image tag, then </div>. This works on GitHub and GitLab because they keep the align attribute while removing inline CSS. In renderers that allow style attributes you can instead use style="display: block; margin: 0 auto".
How do I resize an image in GitHub Markdown?
GitHub accepts HTML inside Markdown, so an <img> tag with width and height renders correctly in READMEs, issues, pull requests and wikis. GitHub does not support the  shortcut and it strips style attributes, so always use the width and height attributes.
How do I add an image in Markdown?
Write an exclamation mark, the alt text in square brackets, and the path in parentheses: . Add a quoted title after the path for a hover tooltip. The path can be a full URL, a site-root path such as /images/photo.png, or a relative path.
How do I add a local image in Markdown?
Use a path relative to where the document is rendered rather than where it is stored: ./images/photo.png for the same folder, ../images/photo.png for the parent folder. On GitHub, relative paths resolve inside the repository, so images keep working in forks and in cloned copies.
How do I make an image clickable in Markdown?
Nest the image inside link syntax: [](https://example.com). The image becomes the link content. If the clickable image also needs a fixed size, write it as HTML instead: an anchor wrapping an img tag that carries the width attribute.
How do I add a caption to an image in Markdown?
There is no caption syntax. The usual solution is the HTML figure element: an img tag followed by a figcaption element, both inside figure. Most static site generators render that correctly. A fallback that works everywhere is a short italic line placed directly under the image.
Why is my Markdown image not showing?
The common causes are a wrong relative path, a private or hotlink-protected URL, a missing exclamation mark before the brackets, and a space between the closing bracket and the opening parenthesis. On GitHub, link to the raw file rather than the page that displays it.
Does the  size syntax work?
Only in some editors. Typora and markdown-it with the imsize plugin support it, but CommonMark, GitHub, GitLab and the built-in VS Code preview do not, and they print the syntax as literal text. Use an HTML img tag for any document that has to travel between tools.
Does alt text actually matter?
Yes. Alt text is what screen readers announce, what browsers display when an image fails to load, and one of the signals search engines use to understand the image. Describe the content rather than the file: Deployment pipeline diagram beats screenshot.png.