Images Material
Images Material
Section titled “Images Material”Syntax
Section titled “Syntax”| Form | Syntax | Usage |
|---|---|---|
| Image |  | Standard image. |
| Alignment | align=left / align=right | Float. |
| Size | width, height | Dimensions. |
| Large | .full-width / .full-width-centered | Large figure. |
| Mini | .mini-width align=right | Compact figure. |
| Caption | /// caption | Caption. |
| Loading | loading=lazy | Lazy loading. |
| Lightbox | lightbox | Open the image in a small modal window. |
| Theme | data-light, data-dark | Sources light/dark. |
Lightbox
Section titled “Lightbox”{ width="420" lightbox lightbox-caption="Lightbox preview" loading=lazy }Left aligned
Section titled “Left aligned”{ align=left width="260" }
In a technical guide, a left-aligned image can support a short explanation without breaking the reading flow. Text flows to the right when horizontal space is sufficient.
On mobile, the image returns to full width to preserve comfortable reading and avoid overly narrow columns.In a technical guide, a left-aligned image can support a short explanation without breaking the reading flow. Text flows to the right when horizontal space is sufficient.
On mobile, the image returns to full width to preserve comfortable reading and avoid overly narrow columns.
Heading after aligned image
Section titled “Heading after aligned image”{ align=left width="260" }
This paragraph flows beside the image. The following heading clears the wrap and starts below the image if it is still taller than the nearby text.
### New heading that clears alignment
This text is no longer placed beside the previous image. The `clear` applied to headings stops the float from this point.This paragraph flows beside the image. The following heading clears the wrap and starts below the image if it is still taller than the nearby text.
New heading that clears alignment
This text is no longer placed beside the previous image. The clear applied to headings stops the float from this point.
Right aligned
Section titled “Right aligned”{ align=right width="260" }
A right-aligned image is useful for a secondary screenshot, reminder diagram, or illustration that should not interrupt the main paragraph.
The syntax preserves the HTML `align` attribute, which keeps the Markdown portable to MkDocs Material.A right-aligned image is useful for a secondary screenshot, reminder diagram, or illustration that should not interrupt the main paragraph.
The syntax preserves the HTML align attribute, which keeps the Markdown portable to MkDocs Material.
HTML figure with caption
Section titled “HTML figure with caption”<figure markdown="span">
{ width="320" loading=lazy }
<figcaption>Caption produced from an HTML `figure` block compatible with MkDocs Material.</figcaption>
</figure>Caption with /// caption
Section titled “Caption with /// caption”{ width="320" }
/// caption
Caption produced by the `pymdownx.blocks.caption` syntax, useful when you want to keep a classic Markdown image.
///Full width left aligned
Section titled “Full width left aligned”{ .full-width align=left loading=lazy }Full width right aligned
Section titled “Full width right aligned”{ .full-width align=right loading=lazy }Full width centered
Section titled “Full width centered”{ .full-width align=center loading=lazy }Full width centered with border
Section titled “Full width centered with border”{ .full-width-centered loading=lazy }Mini width left
Section titled “Mini width left”{ .mini-width align=left width="260" loading=lazy }
Text stays beside the image in mini left-aligned mode when page width allows it.Text stays beside the image in mini left-aligned mode when page width allows it.
Mini width centered
Section titled “Mini width centered”{ .mini-width align=center width="260" loading=lazy }
Mini centered mode keeps the block centered in the main column without overflowing toward the table of contents.Mini centered mode keeps the block centered in the main column without overflowing toward the table of contents.
Mini width right
Section titled “Mini width right”{ .mini-width align=right width="260" loading=lazy }
Text stays beside the image in mini right-aligned mode when page width allows it.Text stays beside the image in mini right-aligned mode when page width allows it.
Lazy loading
Section titled “Lazy loading”{ loading=lazy width="420" }
The `loading=lazy` attribute is passed directly to the image.The loading=lazy attribute is passed directly to the image.
Light and dark mode
Section titled “Light and dark mode”
The `#only-light`, `#only-dark`, `#gh-light-mode-only` and `#gh-dark-mode-only` fragments are hidden according to the active theme.
The #only-light, #only-dark, #gh-light-mode-only and #gh-dark-mode-only fragments are hidden according to the active theme.
Free attributes
Section titled “Free attributes”{ width="360" style="border-radius: 8px; border: 2px solid #818cf8;" loading=lazy .image-demo #image-demo-stylee }
The `width`, `height`, `style`, `class`, `id`, `title`, `align`, `loading`, `lightbox`, `lightbox-caption`, `lightbox-src` and `lightbox-group` attributes are preserved.The width, height, style, class, id, title, align, loading, lightbox, lightbox-caption, lightbox-src and lightbox-group attributes are preserved.