Using images in reST documentation

You can use the example screenshot project. It already follows most of the rules stated below. There has been no automatic screenshot tool since TYPO3 v11 as it proved to be too complicated to maintain.

Attention

For official and Core manuals please follow the Guidelines for creating images.

Images and figures in reST

We recommend to use the .. figure:: directive. It works just like .. image:: save that you can add a descriptive text as content.

Always use the parameter :alt: to add a descriptive text for visually impaired and search engine / artificial intelligence bots scanning our docs. See What the alt text must contain.

Example:

Documentation/MyDocs.rst

..  figure:: /_Images/a4.jpg
    :alt: A spiral staircase seen from above, with people walking up and
        down the steps

    This is the image caption

Optional parameters for images and figures:

:target: link target
:width: : width of image, use for example px (for example :width: 100px)
:scale: : scale images, for example :scale: 65
:zoom: : enable zoom functionality (see image zoom)
:class: : CSS classes, for example with-shadow, with-border, float-start, float-end (see floating and alignment)
:align: : alignment/float for images and figures: left, right, center (see floating and alignment)

Additional parameters can be found on the docutils page reStructuredText Directives

Example 1: scaled image with shadow and link target

A spiral staircase seen from above, with people walking up and down the steps

..  image:: /_Images/a4.jpg
    :alt: A spiral staircase seen from above, with people walking up and
        down the steps
    :target: https://typo3.org
    :class: with-shadow
    :scale: 50

Example 2: image with caption and fixed width

..  figure:: /_Images/a4.jpg
    :alt: A spiral staircase seen from above, with people walking up and
        down the steps
    :width: 100px
    :zoom: lightbox

    This is the image caption