Images

Copy link to headline:Principles

Images are powerful tools for conveying messages and information quickly. They can communicate concepts, emotions, and information more effectively than text alone. We recommend following the below key principles when using images:

1. Color gamut

   Select images where a single primary hue (e.g., blue, green, or red) dominates the composition.

   

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

   

   Don't use images with a high-saturation mix of multiple competing primary colors.

   Tip: Use varying color gamuts across different pages to provide users with subtle visual cues for navigation and orientation.

2. Natural lighting

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

   

   Ensure the light is naturally balanced and the subjects appear evenly lit.

   

   Don't use images with harsh highlights, deep shadows, or high-contrast studio lighting, especially on faces.

   Tip: Avoid over-processing or applying highly stylized filters that make the image look artificial.

3. Authentic snapshots

   Choose "candid" imagery that feels like a captured moment in time rather than a staged production.

   

   Look for natural movements and genuine human interactions.

   

   Don't use images with forced expressions, "stock-photo" smiles, or clearly rehearsed poses.

   Tip: Every photo should feel like a real-life snapshot of a normal, unscripted action.

4. Visual simplicity

   Focus on minimalist compositions that emphasize a single, clear message.

   

   Look for images with generous "negative space" or clean backgrounds.

   

   Don't select cluttered scenes or images with too many competing focal points.

   Tip: Simple images reduce visual noise and make the visual statement immediate and clear.

5. Direct authenticity

   Use "pure" photography that has not been digitally manipulated or constructed.

   

   Use images with naturally placed content.

   

   Don't use images on which text, graphics, or 3D elements were placed afterwards or that were created completely in 3D.

   Tip: Every asset must feel captured by a camera, never constructed on a computer.

6. Technical quality

   Verify that every asset meets high-fidelity technical standards before implementation. Additionally, the image resolution should be optimized for its usage since adding high resolution 4k image with a large file size that is displayed very small, leads to unnecessary high loading times and requires higher data volume (especially for cellular connections).

   Also prefer modern file formats such as WebP(opens in a new tab) for reducing the file size.

   

   Use high-resolution files that remain sharp on all screen types.

   

   Don't accept assets with visible pixelation, compression artifacts or motion blur.

   Tip: If individual pixels are visible, the image is not fit for use.

Copy link to headline:Sources

In general you are free to use any image source. But pay attention on the licensing for those images. We are not responsible for any kind of license or legal violations. To prevent this, we recommend to use either your own copyright images or royalty free sources like:

Copy link to headline:Accessibility

Images must have a descriptive alternative text to be accessible for all users. This ensures that users with visual impairments or those using screen readers can still understand the content conveyed by the image. It can only be provided technically and must not necessarily be displayed visually. The alternative text is also used when the image can not be loaded.

Copy link to headline:Technical usage

We recommend using our OnyxImage(opens in a new tab) component for displaying images. It supports/requires accessible properties out-of-the-box and includes additional convenient features.