Documentation-based practice example; check the controls in your installed Oxygen version.
What it does and when to use it
Display an image from your media library or a suitable external source. This example focuses on one achievable outcome rather than listing every possible setting.
Before you start
Start with a test page and the data or assets described in the example. The values below are starting points, not universal design defaults.
Worked example: A readable project screenshot
Scenario: A readable project screenshot. The goal is a useful result on a real project, not a claim that this scenario was a completed client project.
- Upload a compressed screenshot at a size appropriate for its rendered width.
- Add Image and preserve its natural ratio when the screenshot contains interface text.
- Write alt text describing the relevant interface or result; use empty alt text only when it is decorative or redundant.
Expected result
You should have a readable project screenshot. Verify the result on the frontend using the same content or object described in the steps. A correct builder preview alone does not establish that links, data or interactions work for visitors.
Troubleshooting
If important labels disappear, remove cover-style cropping and show the complete screenshot. A background-like crop is unsuitable for instructional details.
Checks before publishing
Do not describe decorative images unnecessarily. Compress large files and avoid stretching them beyond their useful resolution.
- Compare desktop and narrow-screen layouts using actual content.
- Follow every destination and operate interactive controls with a keyboard where applicable.
- Check an empty or unavailable-data state when the element depends on a provider.
Official reference and version notes
Official Image reference provides the current provider information. This is independent, AI-assisted documentation on Benjamin Olsen’s website; examples are clearly identified as practice recipes.
The native references were checked against the site’s Oxygen 6.2.0-beta.9 installation and public documentation. Individual recipes should still be validated in your project.