Image and SVG Behavior

The Image element follows Concrete CMS image-handling conventions.

Raster Images

Raster images support three sizing options.

Responsive Default

Concrete CMS generates responsive image output using the selected file and available image services.

Full Size

The original image file is displayed with its stored dimensions.

Constrain Size

Specify a maximum width and maximum height.

When cropping is disabled, the image is scaled to fit within the dimensions.

When cropping is enabled, the raster image may be cropped to the requested dimensions.

Maximum supported width and height values are 4000 pixels.

Hover or On-State Image

A second raster image may be selected.

On pointer hover, the image source changes to the hover image. When the pointer leaves, the default image returns.

When constrained sizing is enabled, both raster images are processed with the configured dimensions.

The hover swap is not used when either selected image is an SVG.

Alternative Text

Provide meaningful alternative text when the image communicates information.

Use an empty alternative text only for decorative images.

Title Attribute

The optional title attribute may provide supplementary information. It should not replace meaningful alternative text.

Lazy Loading

Lazy loading adds the browser's native loading="lazy" behavior.

Use it for non-critical images. Avoid lazy loading a prominent above-the-fold image element when it is important for the initial visual presentation.

SVG Files

SVG files:

• Are displayed from the original file
• Receive the Concrete CMS SVG class
• May use width and height values
• Cannot be cropped
• Do not use responsive raster thumbnails
• Do not use the hover-image swap

The Concrete CMS installation must allow and safely handle SVG uploads according to the site's file-type and security configuration.

Background Images

Desktop and mobile hero backgrounds are rendered as CSS background images with background-size: cover.

Background images do not provide alternative text. Important information must therefore be included as real text or as an Image element with appropriate alternative text.