Image Component

Introduction

The Image Component allows you to place a single image on a page. 

See a live example here, above Partners at HIMSS24.

Need Help?

If you need help with a specific use case for the Image component or need guidance with appropriate configuration, please contact the web team.


Specifications


Character Limit/Usage: This component does not support freeform text.

Image Requirements: This component can accept any image and render it at its native pixel size. For example, if you use a 3600x2700 pixel image in a standalone component placed in the middle of a page, it will display at that exact size. However, to keep site load times as low as possible, we recommend keeping images to 3600x3600 pixels or smaller.

Image must be uploaded to the DAM before it can be placed on the page.

  • Dimensions: 3600x3600 pixels maximum
  • Aspect ratio: 1:1, 3:2, 4:3, 5:4, 16:9 (dependent on use case)
  • File type: jpg

Video Requirements: This component does not support video.

Authoring Instructions

This component is often used in conjunction within other components and is commonly used within a container with a column control configuration.

When the image component is used within a column control configuration, the image will adapt to fit the available space. For instance, if you create a container with a 50/50 column layout and place an image component in one of the columns, the image will be confined to that column’s dimensions and will not expand beyond it. As such, we recommend testing various images to find one that best fits your specific use case.

SEO Guidance

Please ensure that alternative text is added to images. This can be done by using the description from the DAM. When you add an image with a completed description in the DAM, the alt text will be automatically applied. If you prefer to override the DAM description, you can manually add your preferred alt text in the image component properties.

The alt image text should describe the image relative to the content of the page.

Avoid using PNG files if the image background is NOT invisible. PNG files tend to be bigger and takes longer to load.

Styling Options and Instructions

There is a Circular Border style available via the style icon in the component which should be authored with Image with 1X1 aspect ratio. This is most commonly used for blog author bios to display their headshot

Images can be horizontally aligned (Left, Center, Right) by using Horizontal Alignment option in Properties tab.



Use Cases and Style Variations

Component with 'Original' configuration set. This does say (Performance Impact) but configuring as 'Original' is recommended.

Component with Responsive Landscape set.

Component set with Circular Border style variation.


Image in 2 Column Configuration

Transportation & Logistics Solutions

In today's world, the demands on transportation and logistics companies are higher than ever. Staff are overextended and under pressure, compliance is complex, and customers expect service and information instantly. Fortunately, Zebra gives you unprecedented visibility into every corner of your operation - to make smarter, more informed decisions, and ensure flawless fulfillment.