Image Component 

Description


Images can consist of photographs, infographics, charts or other visual elements.

Images (and also graphics) make content more pleasant and easier to understand. Effectively used, they can help users understand products and differentiate between similar items.

Usage


Images are used on a page, to present products or services, to illustrate stories or as stand-alone as illustration to enhance an article. Images are important because their role is to capture the attention of the visitor.

Image Types

Informative images: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.

Decorative images: Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page. In this case, please check the checkbox as "image is decorative" on. See the picture below.

Description of the metadata properties of an image in DAM

Functional images: The text alternative of an image used as a link or as a button should describe the functionality of the link or button rather than the visual image. Examples of such images are a printer icon to represent the print function or a button to submit a form.

Images of text: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image.

Complex images such as graphs and diagrams: To convey data or detailed information, provide a full-text equivalent of the data or information provided in the image as the text alternative.

Image maps: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.

Image Format

Allowed respectively recommended file formats:

  • JPG (All images like photos)
  • PNG (e.g. clipped images and/or images with a transparent background to use on a colored background) 
  • SVG (Vector images e.g. Icons)
  • GIF (when the image uses a relatively low number of colors - smaller than 256)

Resolution and aspect-ratio

Use the following resolutions:

  • 3:2 (minimum 1920x1280 px) optimal ration (resolution) for JPG images
  • 4:3 old ratio
  • 16:9 (minimum 1920x1080 px) called "Full HD", this ratio is mostly used for video
  • 16:10 (minimum 1920x1200 px)

Color format

  • sRGB

JPG Setting: Progressive

  • We use "Progressive" option for JPG files for better performance. Please select "Progressive" for Web JPG files

File naming conventions

By uploading a picture, you should follow simple naming conventions.
These rules make it easier for consistency and readability.

Please follow these rules:

  • Use lower case letters only
  • When separating words, please use hyphens or underscores instead of spaces
  • Always separate words (with hyphens)
  • Always add the correct file extension at the end of the file (.jpg, .png, .svg)

Example: view-of-warehouse.jpg

Image "Alt-text" and Caption

The Metadata entries in Basic Property of an Asset can be used:

  • Title as image caption
  • Description as image alt text

Note: When inserting an image in the content (with the "image" component)  the metadatas can be changed individually - see below.


Demonstration

This is an image in a "Content Layout container" and "Column Control" whose properties are set on "12 Column"

View of a warehouse by ebm-papst (demo picture)

This is an image in a "Content Layout container" and "Column Control" whose properties are set on  "8 Column centrered".

View of a warehouse by ebm-papst (demo picture)

Right is an image in a "Content Layout container" and "Column Control" whose properties are set on  "6:6".

View of a warehouse by ebm-papst (demo picture)

Below are three images in a "Content Layout container" and "Column Control" whose properties are set on  "4:4:4".

Demo picture/image only for learn & support area!
This is the (optional) text of the caption below the image.
Demo picture/image only for learn & support area!
This is the (optional) text of the caption below the image.
Demo picture/image only for learn & support area!
Demo picture/image only for learn & support area!

Below are four images in a "Content Layout container" and "Column Control" whose properties are set on  "3:3:3:3".

This is the (optional) text of the caption below the image.
This is the (optional) text of the caption below the image.
Demo picture/image only for learn & support area!
This is the (optional) text of the caption below the image.
Demo picture/image only for learn & support area!
This is the (optional) text of the caption below the image.
Demo picture/image only for learn & support area!
This is the (optional) text of the caption below the image.

How to place an Image

"Image (asset)" as well as "Image (component)" can be placed into a 4-, 6-, 8-, 10 or 12-col column.
An image (asset) can also be deposited directly at the desired location. An "image" (component) is added automatically.
The asset properties "Image Size" must be set at "Full Size".

Metadata in an image - How to add (or edit) it.

How to add metadata to an image. Select an uploaded image in the DAM and edit it by selecting "properties".
So you can set/add (or edit) the alternative text (alt) and many other properties like description, copyright, expire date, ...

How to edit the metadata of an image.