Guidelines for creating images

For accessibility reasons always provide an alt text:

..  figure:: /_Images/a4.jpg
    :alt: some image

    This is the image caption

More option for embedding images into ReST: Images.

Image formats

It is recommended to use PNG for bitmaps (for example screenshots, photographs) and SVG for vector graphics images. In any case, you can use .png.

Guidelines for screenshots

Note

You can use the 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 to complicated to maintain.

Before adding a screenshot consider if one is necessary. Each new screenshot requires maintenance.
Use a Composer-based installation of the latest LTS release, or dev-main.
Turn the backend into light mode and modern look.
Unless you want to demonstrate features of certain system extensions use a default installation as described in Getting Started: Installing TYPO3 with DDEV.
If you need an example site package use t3docs/site-package.
If you need example data use t3docs/site-package-data
As personalized usernames are considered best practice always use username "j.doe"
Do not install third party extensions unless what you want to demonstrate requires one. If possible use one of the extensions from vendor typo3 or t3docs.
use PNG format (.png file ending)
If you take a screenshot of a full page it should have 1400 x 1050 px
Use only parts of a full page when possible, the flatter the screenshot the less room it takes.
When reviewing screenshots take into consideration that taking screenshots is a lot of effort.

The example screenshot project

We have a ready to use TYPO3 project that you can run in GitHub Codespaces or locally on DDEV to make screenshots:

Ready to use Project for screenshots

Guidelines for screenshots with graphics elements

You will often see a screenshot where additional graphic elements have been added in the documentation. These additional graphic elements may be boxes, numbers or arrows.

Use sufficient contrast to ensure additional graphic elements are visible across devices and for as many readers as possible, even if they have color vision differences.