Can standard Markdown set image width?

No. Standard Markdown image syntax has no portable width or height attribute. HTML or renderer-specific extensions are common alternatives.

Does setting width also change the downloaded file size?

No. Display width changes layout. Compressing or resizing the source file changes download size.

Why does my HTML image appear as text?

The processor or publishing platform may disable raw HTML, sanitize the tag, or require a different syntax.

Should I set both width and height?

Set both when you know the correct ratio and want to reserve layout space. Otherwise, use one dimension with automatic sizing for the other.

How to Control Image Size in Markdown

Standard Markdown does not define a width or height attribute for images. Use normal Markdown for a responsive image, or use an HTML img element when the target renderer permits HTML. Set width and height with HTML attributes, inline CSS, or a stylesheet. The exact result depends on the Markdown processor and the page that displays the converted HTML. Test the rendered output in your target system, especially when publishing to a repository, documentation site, email, or content management system.

Use Markdown for the basic image

The standard image syntax is `![Alt text](image-url)`. It identifies an image, provides alternative text, and points to a source. Standard Markdown does not include a portable size modifier. A title can follow the URL, but it is not a dimension control. For example, `![A chart](chart.png "Monthly chart")` may provide hover text in some renderers, but it does not set width. This approach is the safest when you need broad support across Markdown processors. Let the browser display the source image at its intrinsic size or apply a site-wide responsive rule. A responsive stylesheet often uses `img { max-width: 100%; height: auto; }`, but you control that CSS outside the Markdown document.

Use HTML when the renderer allows it

Many Markdown processors pass selected HTML through to the output. You can then write `<img src="chart.png" alt="Monthly chart" width="640" height="360">`. The width and height attributes define the rendered dimensions in CSS pixels. Supplying both values also reserves layout space when the browser loads the image. If you know only the width, use CSS with an automatic height: `<img src="chart.png" alt="Monthly chart" style="width: 640px; height: auto;">`. Do not assume raw HTML works everywhere. Some hosted platforms sanitize HTML, remove style attributes, or allow only a restricted tag set. A class such as `<img class="wide-image" ...>` works only when the surrounding site defines that class.

Choose dimensions without harming accessibility

Resize the source file when smaller download size matters. Display dimensions and file dimensions are separate concerns. A large image shown at a small width can still consume significant bandwidth. Keep meaningful alternative text unless the image is purely decorative. Use an empty alt value, `alt=""`, for decorative images when the target system supports the HTML output. Avoid putting important text only inside an image. Fixed dimensions can create cropping or distortion if the aspect ratio is wrong. Preserve the original ratio, or use CSS `object-fit` only when deliberate cropping is acceptable. Check mobile layouts, dark themes, high-density screens, and printed output. A Markdown editor may preview HTML differently from the production renderer.

How do you do it step by step?

1Start with standard Markdown: `![Description](image-url)`.
2Decide whether the target Markdown renderer permits the HTML and CSS you need.
3Use an HTML img element with width and height attributes when fixed dimensions are appropriate.
4Preserve the image ratio and add responsive CSS when the content must fit narrow screens.
5Preview the converted page and inspect the final HTML, accessibility text, and network size.

Working example

This example sets a maximum display width while allowing the browser to preserve the image ratio.

Input

<img src="diagram.png" alt="System architecture diagram" width="720" height="405" style="max-width: 100%; height: auto;">

Result

The image displays at up to 720 pixels wide, shrinks inside a narrower container, and keeps its 16:9 ratio.

The style attribute may be removed by a sanitizer. If that happens, put the responsive rule in the site stylesheet or use the platform's documented image syntax.

Frequently asked questions

Can standard Markdown set image width?: No. Standard Markdown image syntax has no portable width or height attribute. HTML or renderer-specific extensions are common alternatives.
Does setting width also change the downloaded file size?: No. Display width changes layout. Compressing or resizing the source file changes download size.
Why does my HTML image appear as text?: The processor or publishing platform may disable raw HTML, sanitize the tag, or require a different syntax.
Should I set both width and height?: Set both when you know the correct ratio and want to reserve layout space. Otherwise, use one dimension with automatic sizing for the other.