Images

Copy link to headline:Principles

Images convey messages quickly, establishing mood and supporting understanding. Follow these principles when incorporating photography:

1. Color gamut

   Select images where a single primary hue dominates the composition.

   

   Choose images with a harmonious, monochromatic, or analogous color profile.

   

   Avoid images with competing, oversaturated primary colors.

   Tip: Vary color gamuts across sections to provide subtle navigation cues.

2. Natural lighting

   Prioritize soft, authentic light sources to maintain a realistic aesthetic.

   

   Ensure lighting is naturally balanced and subjects appear evenly lit.

   

   Avoid harsh highlights, deep shadows, or high-contrast studio flash.

   Tip: Avoid heavy filters or over-processing that make photos look artificial.

3. Authentic snapshots

   Choose candid imagery that feels unscripted rather than staged.

   

   Look for natural movement and genuine interaction.

   

   Avoid forced expressions, unnatural poses, or generic stock-photo smiles.

   Tip: Photos should resemble authentic moments in real working environments.

4. Visual simplicity

   Select minimalist compositions that emphasize a single subject or message.

   

   Choose images with generous negative space and uncluttered backgrounds.

   

   Avoid cluttered scenes with competing focal points.

   Tip: Simple framing reduces visual noise and keeps content clear.

5. Direct authenticity

   Use genuine photography without artificial digital embellishments.

   

   Use naturally composed photography.

   

   Do not overlay artificial slogans, 3D elements, or synthetic graphics on photos.

   Tip: Imagery should look captured by a camera, not rendered artificially.

6. Technical quality

   Ensure assets meet resolution and compression standards. Optimize image dimensions for their display container to avoid serving unnecessary 4K assets on small viewports.

   Use modern formats like WebP(opens in a new tab) to minimize file sizes.

   

   Use sharp, properly scaled assets.

   

   Avoid assets with visible compression artifacts, noise, or motion blur.

   Tip: If pixelation or compression artifacts are noticeable, replace the asset.

Copy link to headline:Sources

Ensure images comply with copyright and licensing requirements. Recommended stock libraries:

Copy link to headline:Accessibility

Every informative image must provide descriptive alternative text (alt). Screen readers rely on alt text to convey meaning to visually impaired users, and it also serves as fallback content if image loading fails. Decorative images should use an empty alt="" attribute.

Copy link to headline:Technical usage

Use the OnyxImage component to render images. It enforces accessible attributes and provides built-in lazy-loading and skeleton states.