Website visuals

Website visual tools connect a selected image to a specific page placement. Start from the built page's graphic-content detail. Uploading a file and choosing it for a placement are different actions.

Before you start — Identify the page, placement and message to illustrate. Prepare an accepted image and review the existing selection. Uploading makes a file available; assigning it determines where it is used.

Find the placement to fill

Read the placement description before choosing an image for the section.

1. Open the website configuration and the page concerned.
2. Open Graphic content.
3. Read the description of the image placement.
4. Check whether it already has a selected image or shows No image chosen.

Choose material that explains the section's actual product message. A screenshot should represent a supported task and omit private customer information.

Upload an image

Follow the upload tool’s format and size requirements, then check completion.

1. Click Upload images.
2. Choose an image accepted by the upload panel.
3. Complete the upload and read its result.
4. Return to the page's graphic-content selection.

Use the format and size limits displayed in the upload tool. A completed upload makes the image available; it does not automatically replace every page image.

Select and save the image

Assign the image to the intended placement without changing unrelated selections.

1. Locate the intended placement under Graphic content.
2. Choose the available image for that placement.
3. Check the other selections before changing them.
4. Click Save.
5. Read the confirmation and follow any resulting website change.

The choice belongs to that placement. Leave a previous valid selection alone when editing another image.

Review the public result

Check the crop with its surrounding text, especially the important detail on smaller screens.

1. Wait for the changed selection to reach the built page.
2. Open that public page.
3. Check the image crop, important content and associated section text.
4. Review the same placement on a narrow screen.

The important image content remains understandable on desktop and mobile.

Note — A documentation section has no image placement to fill. If the image editor is unavailable while the project is waking up, follow its message and reload after the service is available.

A wide capture with small text can be clear at full size but unreadable in a narrow placement. Choose the part that communicates the page’s message, then verify the crop in the actual public page rather than only checking the complete file.

Resolve an image-selection problem