Screenshots

Validated on 19 Nov 2025 • Last edited on 5 Dec 2025

Screenshots help users understand our user interface, validate their progress, and reduce cognitive load. Use them intentionally by ensuring they clarify the interface, support comprehension, and avoid unnecessary maintenance work. Screenshots are not decoration or marketing assets. They are visual aids for understanding.

Screenshots must be readable, crisp, not stretched or distorted, and free from unintentional or unnecessary cursor marks, annotations, outlines, shadows, or hover effects, and all visible text must remain legible after compression.

Using Screenshots

Screenshots should:

Clarify workflows or settings that benefit from visual context.
Help users orient themselves in the UI.
Show patterns or data that are easier to understand in a visual representation.
Reduce cognitive load by visually grounding the reader.
Help users confirm that they’re selecting the right menu or entering the right values.
Reduce the chance of user error.
Support users evaluating DigitalOcean without creating an account.
Provide reassurance for complex, multi-step, or ambiguous UI tasks.

Screenshots should not:

Replace clear and concise text instructions.
Include ephemeral or frequently changing UI elements (tooltips, toasts, hover states, temporary dialogs).
Be used when the UI is simple and text instructions are sufficient.
Be used in strictly CLI-, API-, or code-focused workflows.
Introduce unnecessary maintenance burden.
Attempt to market or promote the DigitalOcean interface.

Screenshot Should Never:

Show terminals or command-line output.
Show code snippets.
Show third-party tools or interfaces (unless required for interoperability).

Writers exercise judgment, balancing visual accuracy, long-term maintenance effort, and the potential impact of outdated screenshots on user trust.

Dimensions and Formats

To maintain consistency and ensure screenshots remain readable across devices, follow these size guidelines:

Recommended width: 1150 px.
Maximum width for browser screenshots: 1375 px.
Maximum width for content-area screenshots: 1150 px.
Recommended height: 800 px.
Maximum height: 900 px.
- Avoid tall or square images: Keep heights reasonable so screenshots don’t appear square or stretched.

Use PNG for UI screenshots and SVG for icons, diagrams, and illustrations.

Filenames and Placeholder Information

Filenames must be lowercase, descriptive, and hyphen-separated (for example, create-bucket.png). You do not need to specific the product in the filename as we separate screenshots internally by product folder.

Use the format example-product-name-noun for all example resource names shown in screenshots (for example, “example-app-platform-app”).

Writing Associated Text

All screenshots must include alt text. Alt text should describe the purpose of the screenshot, not only the visual details. For example, alt text for a Droplet creation form could be, “Droplet creation form with example values filled in.” and not “Create Droplet button and five input fields”.

Screenshots must not appear without context. Include a lead-in sentence when it adds clarity and always insert the screenshot using the image shortcode with descriptive alt text.

Capturing Screenshots

Capture only the UI content area, not the full monitor, and avoid browser chrome unless it is necessary for menu context.

If browser chrome must be shown, use an incognito window, close all tabs, and hide the bookmarks bar.

Avoid capturing personal extensions, OS UI, pop-ups, or notifications, and use light mode unless you are specifically demonstrating theme switching.

Warning

Remove all sensitive or personal information, including IP addresses (replace them with RFC-5737 documentation ranges/style/digitalocean/language/domains-and-ip-ranges/), tokens, email addresses, account or team names, browser titles, identifiable domain names, and any user content.

If you edit values through the DOM inspector, double-check every visible location in the screenshot, including tab titles, breadcrumbs, and menu paths.

Optimizing Images

Image optimization pull requests are created against your branch when you add a new image that may need compression to reduce file size and improve loading performance.

Reviewers should ensure that optimized files still render correctly, retain transparency, and preserve all essential UI details.

Tip

Use lossless compression tools such as TinyPNG, ImageOptim, GIMP, or Squoosh, but avoid over-compressing images since readability should always take priority.

Updating Screenshots

Update screenshots only when the UI changes significantly enough to affect comprehension, when menu paths or labels change, when product branding or layout updates occur, or when a screenshot becomes misleading or outdated.

Do not update screenshots for small spacing or padding changes, minor stylistic adjustments, or color palette tweaks unless they affect clarity.