Images

If you want to add images to your docs, you'll have to put them in the public folder. Make sure you reference them correctly in your .mdx files.

Folder Structure

All images must live in the public folder in order to be processed correctly.

The folder structure of docs is duplicated in public so that you can still use relative paths to reference images in your content files.

Example

For instance, the file, docs/product/alerts/alert-types.mdx, can reference the image, public/product/alerts/issue-alert.png, like so :

![Issue alert](issue-alert.png)

Content files that live elsewhere (such as /docs/platform/apple/index.mdx) can still use the same image by referencing it with the full path (/public does not need to be included), like so:

![Issue alert](/product/alerts/issue-alert.png)

Image Optimization

To save space and ensure consistency, we ask that all image files be compressed and cropped to the dimensions listed below. When adding an image, please makes sure that it's high-resolution and crisp and that text is big enough to read.

Recommended Dimensions

• If you want the image to take up the full width of the page, make it 1484 pixels wide.

• If you want the image to be indented once (for example, if it's under a list item), make it 1400 pixels wide.

Image Compression

For performance reasons, images should be compressed. We recommend using ImageOptim. Here are the steps to follow:

1. Download and install https://imageoptim.com/.
2. Drag and drop your image(s) into the tool. The files will be compressed in place.
3. Wait until a green checkmark appears, then add the compressed image to the appropriate path in the public folder of the docs repo.