CoreMedia Digital Experience Platform 8 Developer Manual, Version 7.5.45-10
6.3. Website Management | 6.3.14. Images

Requirements

For a website images are required in different sizes and formats. For example, teaser need a small image with an aspect ratio of 1:1 in the sidebar and an aspect ratio of 4:3 in the main section. Images in articles and galleries are shown in 5:2 or 4:3 with a large size. And even these sizes are different on mobile devices and desktop displays.

Solution

CoreMedia Blueprint supports different formats combined with different sizes. It comes with nine predefined cropping definitions, which are used on the Perfect Chef and Aurora example sites.

A list of sizes can be defined for each format in the Responsive Image Settings, located in Options/Settings/CMChanel. The website will automatically choose the best matching image depending of the viewport of the client's browser.

How to configure image sizes

The struct responsiveImageSettings contains a list of string properties. This string must contain the name of a cropping format. For example portrait_ratio1x1. Each format contains a list of string properties, representing one size of this format. The name and the order of this list is not important and will be ignored. Every size must contain two integer properties width and height.

If site specific image variants are enabled, the Responsive Image Settings will be used for the image editor as well. In this case the additional integer property fields widthRatio, heightRatio, minWidth and minHeight must be defined. Additionally, the field previewWidth and/or previewHeight should be defined to define the preview size in the Studio.

For example a Responsive Image Settings with two formats. portrait_ratio1x1 with just one size and landscape_ratio4x3 with 3 sizes.

<Struct xmlns="http://www.coremedia.com/2008/struct" xmlns:xlink="http://www.w3.org/1999/xlink">
  <StructProperty  Name="responsiveImageSettings">
    <Struct>
      <StructProperty Name="portrait_ratio1x1">
        <IntProperty Name="widthRatio">1</IntProperty>
        <IntProperty Name="heightRatio">1</IntProperty>
        <IntProperty Name="minWidth">200</IntProperty>
        <IntProperty Name="minHeight">200</IntProperty>
        <IntProperty Name="previewWidth">400</IntProperty>
        <Struct>
          <StructProperty Name="0">
            <Struct>
              <IntProperty Name="width">60</IntProperty>
              <IntProperty Name="height">60</IntProperty>
            </Struct>
          </StructProperty>
        </Struct>
      </StructProperty>
      <StructProperty Name="landscape_ratio4x3">
        <IntProperty Name="widthRatio">4</IntProperty>
        <IntProperty Name="heightRatio">3</IntProperty>
        <IntProperty Name="minWidth">1180</IntProperty>
        <IntProperty Name="minHeight">885</IntProperty>
        <IntProperty Name="previewWidth">400</IntProperty>
        <Struct>
          <StructProperty Name="0">
            <Struct>
              <IntProperty Name="width">200</IntProperty>
              <IntProperty Name="height">150</IntProperty>
            </Struct>
          </StructProperty>
          <StructProperty Name="1">
            <Struct>
              <IntProperty Name="width">320</IntProperty>
              <IntProperty Name="height">240</IntProperty>
            </Struct>
          </StructProperty>
          <StructProperty Name="2">
            <Struct>
              <IntProperty Name="width">640</IntProperty>
              <IntProperty Name="height">480</IntProperty>
            </Struct>
          </StructProperty>
        </Struct>
      </StructProperty>
    </Struct>
  </StructProperty>
</Struct>

	Caution
	Every image cropping format must contain one image size, otherwise the default size and format, defined in ImageFunctions, will be used.

High Resolution/Retina Images

CoreMedia Blueprint supports high resolution images. Set the BooleanProperty enableRetinaImages to true. If enabled, the Javascript jquery.coremedia.responsiveimages.js is choosing a larger image according to the devicePixelRatio of the browser.

For Example the website wants to render an image with an aspect ratio of 4:3 and the best responsive image size is 400px : 300px. With a devicePixelRatio of 2, the JavaScript jquery.coremedia.responsiveimages.js is now choosing the size of 800px : 600px.

Default JPEG Compression Quality

The default JPEG compression quality is 80% in CoreMedia Blueprint. This parameter is configured in blueprint-handlers.xml for the transformedBlobHandler. For further information consult the "CAE Application Developer Manual", chapter "Image Transformation API".