Images

Images include screenshots, inline images, icons, and more. Syntax for images is like the syntax for links, with the following differences:

instead of link text, you provide an image description
an image description starts with ![ not just [
there are restrictions on the scope of image paths

Note

If a page uses an image that exists outside the folder that contains the toc.yml file or docset.yml file that contains that page, the image will fail to render and will generate warnings. Likewise, if a snippet in a file inclusion includes an image and is used in pages that exist in different toc.yml, the images will break.

Block-level images

![APM](/syntax/images/apm.png)

APM

Or, use the image directive.

		:::{image} /syntax/images/observability.png
:alt: Elasticsearch
:width: 250px
:::

	

Screenshots

Screenshots are images displayed with a box-shadow. Define a screenshot by adding the :screenshot: attribute to a block-level image directive.

		:::{image} /syntax/images/apm.png
:screenshot:
:::

	

Inline images

		Here is the same image used inline ![Elasticsearch](/syntax/images/observability.png "elasticsearch =50%x50%")

	

Here is the same image used inline Elasticsearch

Inline image titles

Titles are optional making this the minimal syntax required:

![Elasticsearch](/syntax/images/observability.png)

For inline images, the alt text always overrides any title specified in the Markdown. This ensures consistent accessibility where both the alt and title attributes contain the same descriptive text.

![Elasticsearch](/syntax/images/observability.png "Different title")

Elasticsearch

Inline image sizing

Image sizing is specified through the title argument. You can specify just the size without needing to provide a redundant title:

		![alt](img.png "=WxH")
![alt](img.png "=W")

In this case, the alt text will be used as both the alt and title attributes, and the size parameters will be applied.

W and H can be either an absolute number in pixels or a number followed by % to indicate relative sizing.

If H is omitted W is used as the height as well.

		![alt](img.png "=250x330")
![alt](img.png "=50%x40%")
![alt](img.png "=50%")

	

SVG

![Elasticsearch](/syntax/images/alerts.svg)

Elasticsearch

GIF

![Elasticsearch](/syntax/images/timeslider.gif)

Elasticsearch

Asciidoc syntax

		[role="screenshot"]
image::images/metrics-alert-filters-and-group.png[Metric threshold filter and group fields]

image::images/synthetics-get-started-projects.png[]

Image carousel

The image carousel directive builds upon the image directive.

		::::{carousel}

:id: nested-carousel-example
:max-height: small ## small, medium, none (none is default if max-height is not specified)

:::{image} images/apm.png
:alt: First image description
:title: First image title
:::

:::{image} images/applies.png
:alt: Second image description
### Title is optional - alt text will be used as title if not specified
:::

::::

	