Skip to content

Image copy style guide

Optimize placement and sizing

Whenever possible, place images near relevant text and be mindful to use image styling markdown to resize larger images. For some content, this should be done by anchoring text to the left or right side of the page depending on the image and the space available.

DoDon't
Example of correctly optimizing image placement.Example of incorrectly optimizing image placement.

Crop images

Crop relevant sections closely. Unless necessary, do not include the left navigation bar and instead include navigation directions in the article. This limits the number of images that need to be changed when UI changes occur.

DoDon't
Example of a properly cropped image.Example of an incorrectly cropped image.
Example of a properly cropped image.Example of an incorrectly cropped image.

Because Braze docs already add a border to each image, omit borders in a section screenshot. We are looking for a clean crop. The border can be left in if there are components that live outside or within the border, see the following images as examples.

Do: Example of correctly cropping an image.

Don’t:
Example of incorrectly cropping an image.

Do:
Example of correctly cropping an image.

Blur sensitive information

Blur any personal identifiable information (PII) like names, emails, and API keys.

DoDon't
Example of correct blurring.Example of incorrect blurring.

Don’t embed important text inside images

Avoid embedding text inside images as not all users can read English text (and page translation tools do not translate images). This text should be provided in the article. Provide alt text for images for maximum accessibility for users.

DoDon't
Example of correctly not embedding text in an image.Example of incorrectly embedding text in an image.

Don’t emphasize components

Do not emphasize components of images unless necessary. Use blue squares (the most accessible option) with a thin-medium thickness to highlight different components of images. Make sure the “highlighted sections” do not obstruct the normal UI.

DoDon't
Example of correctly emphasizing components in an image.Example of incorrectly emphasizing components in an image.
Example of correctly emphasizing components in an image.Example of incorrectly emphasizing components in an image.
Github   Edit this page on GitHub
New Stuff!