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.
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"
This is an image in a "Content Layout container" and "Column Control" whose properties are set on "8 Column centrered".
Right is an image in a "Content Layout container" and "Column Control" whose properties are set on "6:6".
Below are three images in a "Content Layout container" and "Column Control" whose properties are set on "4:4:4".
Below are four images in a "Content Layout container" and "Column Control" whose properties are set on "3:3:3:3".
How to place an Image
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, ...