Image dimensions in markdown

How to get there: Open any post, comment, or KB article that uses markdown. Add a width (and optional height) to a markdown image URL using the pipe syntax described below.

Standard markdown images render at their natural size, which is often too large for screenshots or hero images. ProductLift extends the markdown image syntax with an optional size suffix so you can cap an image's display size without editing the source file.

Syntax

Width only:

![alt text](https://example.com/image.png|400)

Width and height:

![alt text](https://example.com/image.png|400x300)

The numbers are in pixels. They translate to CSS max-width and max-height on the rendered <img>, so the image still scales down on smaller screens and never exceeds the dimensions you specify.

Examples

A 600px-wide screenshot:

![Settings page](../images/settings.png|600)

A capped 800x400 hero image:

![Dashboard hero](https://cdn.example.com/hero.png|800x400)

When to use it

  • Large screenshots that would otherwise dominate the page.
  • Hero or banner images where you want a consistent maximum size.
  • Diagrams that read better at a specific width.

Notes

  • The size suffix only applies to inline markdown images. It does not affect images added through the WYSIWYG editor or attached as files.
  • Because the values become max-width and max-height, the image keeps its aspect ratio and scales down on narrow viewports.
  • Omit the suffix entirely (![alt](url)) to render at the image's natural size.