Images
Text-only content can be visually overwhelming and make sections difficult to scan. Users whose native language isn't English may also have trouble understanding text-only content. If finding or understanding content is a barrier, then user may not be able to complete tasks.
Images add visual interest, tone and branding to textual content. They can help tell a story, demonstrate how-to complete a task or convey complex messaging to users in a visually appealing way.
Component data
Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js
Component resources:
SCSS files | coc-card-item.js
Functional grouping: Media
Demo
Configure: select the dropdowns below to display the variety of options that images support.
Usage best practices
Consider using images to:
- support textual content or ideas
- add visual interest and colour to a page
- provide a consistent look or feel (i.e. branding)
Usage examples:
- displaying decorative images
- showing an example of a concept or idea
- illustrating steps in a process
Do
Select images with a consistent look and feel.
Use high quality images that are properly optimized for digital spaces.
Prioritize images that provide important information (higher on the page) over those that are decorative (lower on the page).
Don't
Do not use more images on the page than there is textual content. If the purpose is to showcase photos, consider using an image viewer.
Do not use images that are "busy", convey more than one idea or confuse users about the content.
Do not use pixelated, blurry or low quality images.
Do not use a zig-zag layout for more than three consecutive images for sequential content (decorative images that don't provide essential information are an exception).
Do no apply a fixed width or height to images so that they are responsive relative to the page layout.