Skip to main content

Images

Images are added with the img: element inside a page section or column. The image: prefix is also accepted as an alias for img:.

Three ways to reference an image​

1. Keyword — Unsplash search​

Provide a word or short phrase and Micropage searches Unsplash for a matching photo:

img: <- coffee

This is useful for quickly prototyping pages without uploading anything.

2. Uploaded file — project asset​

Reference a file you have uploaded to the project by its exact filename:

img: <- hero.png
img: <- logo.svg

The file must already exist in the project. Filenames are case-sensitive.

3. Direct URL — downloaded and stored​

Provide a full https:// URL and Micropage downloads the file and stores it in the project:

img: <- https://example.com/screenshot.png

The file is fetched once and saved, so subsequent builds use the stored copy.

Using images in a section​

Images can appear directly in a section or inside a column:

/// section

col:
  img: <- product-screenshot.png
  h3: Simple editor
  p: Write markup, see the result live.

col:
  img: <- team
  h3: Built by developers
  p: For developers who ship fast.

You can make an image clickable by combining the image lookup with a link:

img: Hero <- hero.png -> /pricing

This resolves the image using <- hero.png and treats /pricing as the link target when the image is rendered.

In the Web App​

Upload a file in the Files tab, then reference it in the editor with img: <- filename. For keyword or URL images, write the img: line directly — no upload needed. You can also write image: instead of img:; both are equivalent.

Image modifiers​

Inline key:value tokens placed before <- control how the image is displayed or delivered. They are stripped from the alt text automatically.

aspect:WxH — CSS aspect ratio crop​

Constrains the image to a fixed aspect ratio using CSS. The image fills the container and is cropped to fit. Works everywhere with no plan requirement.

img: aspect:16x9 <- hero.png
img: aspect:1x1 <- profile.jpg
img: aspect:4x3 <- product.png

Supported ratios: any WxH pair — 16x9, 4x3, 3x2, 1x1, etc.

width:N / height:N — Cloudflare Image Resizing​

Rewrites the image src to a Cloudflare Image Resizing URL so the image is resized and re-encoded at the CDN. The browser downloads only the smaller, optimised file (served as WebP or AVIF automatically).

img: width:800 <- hero.png
img: width:800 height:400 <- hero.png

Requirement: Cloudflare Image Resizing (Pro plan or Image Resizing add-on). In local dev the /cdn-cgi/image/ path is a no-op — the original image loads unmodified as a fallback.

The generated URL uses fit=cover and format=auto:

/cdn-cgi/image/width=800,height=400,fit=cover,format=auto/{original-url}

Combining modifiers​

You can combine aspect: with a caption name:

img: Hero aspect:16x9 <- hero.png
img: Profile aspect:1x1 <- profile.jpg -> /about

Modifier tokens are stripped before the name is used as alt text, so Hero becomes the alt text and aspect:16x9 sets the layout.

Notes​

  • Files resolved from keywords or URLs are saved to the project file store automatically.
  • Deleting a stored file that is referenced in markup will cause a broken image after the next build.
  • To see which files are stored in a project, use the Files tab in the Web App or micropage files list from the CLI.