When to use
Images should be selected for their ability to express a certain message or tell a story. They can be very effective in scenarios where visual context enhances understanding. As a result, images can lead to more (emotional) engagement and an improved visual appearance.
It is better to avoid images in scenarios where it may distract from the primary content, cause unnecessary load times, or when the visual elements do not add meaningful value. Also, make sure to be aware of the different kind of visual assets to make the right choice for your context.
Different kind of visual assets
Images are not the only visual assets that can be applied within a digital product. Illustrations and icons are examples of other visual assets. It is important to state the purpose for each of those in order to make the correct choice for your context.
Images (photography)
Use an image when you need to showcase real-world objects, people, or places and evoke emotions. It should provide a realistic, relatable representation of the subject.
Illustration
Use an illustration to simplify and clarify complex information, and to provide a consistent and unique visual style that aligns with the brand identity.
Iconography
Use icons to enhance usability by providing clear, instantly understandable visual cues that aid navigation and interaction.
In summary, use images for realism and emotional connection, illustrations for explaining complex concepts and maintaining a consistent style, and icons for quick recognition and efficient use of space.
Placement
A content image is placed on our grid. It can display either a single image or multiple stacked images (spread along an amount of columns). For example, you may wish to show 2, 3 or even 4 images side by side with a specific aspect ratio (like 4:3). Make sure to use a supported aspect ratio and check what your context requires and how it behaves on different screen sizes in order to use the correct image placement.
Sizing
A content image should be rendered at least the dimensions used in the original design. As mentioned, make sure to set it at a supported aspect ratio (the ratio of its width to its height). If you require an alternative ratio please contact the Aero team.
To ensure good quality on a wide variety of screens the source image should ideally be larger than the pixel dimensions used in the original design (around 2x the size). Currently, we exploring our options for this using the BRIX platform. More details will follow soon.
Accessibility considerations
Provide alternative text
To ensure accessibility, images should include alternative text (or a caption) to be read by screen readers for users with visual impairments.
Prevent embedding text in images
- When text that is intended to be read is presented as an image, blind or visually impaired readers may be at a disadvantage for a few reasons. One of which is because screen readers and other assistive technologies cannot read text that’s contained inside an image;
- If someone has a slower or unreliable internet connection, their browser does not show or download graphics, or there are any issues with the page loading properly, they’re at risk of missing out on important information that’s conveyed through the image;
- Text can adapt to different screen sizes and orientations (think desktop vs mobile), and tends to wrap and display properly across them, remaining readable. Images of text are fixed in size and position, so they do not adapt well;
- True text can be resized without losing quality and offers the ability for users to customize things like color and contrast. Images of text tend to become pixelated and lower in quality when enlarged, affecting readability, and also lack the ability to customize based on the user’s needs and preferences;
- A page translator cannot translate image text;
- Text inside an image cannot be copied.
Prevent embedding logotypes in images
- Images are fixed in size and position and do not adapt well to different devices and viewport/ browser widths;
- Images are bitmaps. Embedding logotypes in an image would transform a usually scalable and sharp graphic (like svg) into a bitmap image. This means logotypes can become pixelated and lower in quality on certain devices or when enlarged;
- The part of the image that shows the logo can fall out of the containing element or can become only partly visible. Applying it in a ‘safe zone’ is possible (what this document also demonstrates), however can be limiting because the flexible and changing nature of a website. Changing something to a website, like a grid or the width of an element, could already affect this safe zone and would mean that all images with embedded logotypes should be adjusted again or that changes will be harder to make. Please be aware of this and thrive for a better, more sustainable, solution.