Images and Media
A Guide to Creating Memorable Presentations
September 22, 2025
Samantha Monty
Chair for Human-Computer Interaction, University of Würzburg

Inline Images

A media source with neighboring elements is rendered as an inline-element that flows with the surrounding text. The aspect ratio of the image is always preserved.

Syntax

This ![image](/img/06-metal.png){height="150px"} is 
![inline with](/img/pacman-perfect-game.mp4){height="150px"}
this ![image](/img/06-metal.png){height="150px"}!!

Result

This img/06-metal.pngimage is inline with this img/06-metal.pngimage!!

Block Images

A singular media source that forms a paragraph is rendered as a block-element. By default the image stretches horizontally to the width of the containing element. The aspect ratio is always preserved.

Syntax

| ![An image](/img/06-metal.png){height="150px"}
| ![A movie](/img/pacman-perfect-game.mp4){.controls height="150px"}
| ![An image](/img/06-metal.png){height="150px"}

Result

img/06-metal.png
An image
A movie
img/06-metal.png
An image

Image Size

Either width or height can be used to control the size of media elements, but not at the same time. If the resulting width is smaller than the default width, the image is either centered, left aligned, or right aligned.

  • width (%): size relative to the enclosing container. Absolute values are absolute. Default: 100%.
  • height: only absolute values can be specified.

Width

Syntax

![](/img/06-metal.png){width=75%}

Result

img/06-metal.png

Height

Syntax

![](/img/06-metal.png){height="50px"}

Result

img/06-metal.png

Image Captions

Add a caption below an image either inside the square brackets of an image tag or by beginning the following paragraph with the string Caption:. Caption text may contain further Markdown markup.

Syntax

![](/img/marc.jpg){width=30%} 

Caption: Prof. Dr. Marc Erich Latoschik

Result

img/marc.jpg
Prof. Dr. Marc Erich Latoschik

Syntax

![](/img/marc.jpg){width=30%} 
 
Caption: Prof. Dr. Marc Erich Latoschik leads the
Human-Computer Interaction (HCI) group at the 
University of Würzburg.  

Result

img/marc.jpg
Prof. Dr. Marc Erich Latoschik leads the Human-Computer Interaction (HCI) group at the University of Würzburg.