CoreMedia Blueprint supports different formats combined with different sizes. It comes with four predefined cropping definitions.

A list of sizes can be defined for each format in the Responsive Image Settings, located in the Options/Settings/CMChannel folder of the site. If no site specific setting is defined, the global setting Responsive Image Settings from /All Content/Settings/Options/Settings will be taken. The website will automatically choose the best matching image depending of the viewport of the client's browser.

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. It can also be set per image variant in the Responsive Image Settings as described in Section 9.5.3, “Image Cropping and Image Transformation” in Studio Developer Manual. For further information consult the Section 4.5, “Image Transformation API” in Content Application Developer Manual.

MIME Type Mapping

When building links to image variants in the CAE, the MIME type of the original image is used by default. The MIME type is used to determine the file extension of the links. To adjust these MIME types you can provide a mapping of original MIME types to desired MIME types in the setting linkMimeTypeMapping. The struct linkMimeTypeMapping contains String properties where the key is the MIME type of the original image and the value is the desired MIME type for the links to variants of this image.

You could for instance add this setting to the Responsive Image Settings content item next to the responsiveImageSettings struct like so:

<Struct xmlns="http://www.coremedia.com/2008/struct">
  <StructProperty Name="linkMimeTypeMapping">
    <Struct>
      <StringProperty Name="image/jpeg">image/png</StringProperty>
      <StringProperty Name="image/gif">image/png</StringProperty>
    </Struct>
  </StructProperty>
  <StructProperty Name="responsiveImageSettings">
    <Struct>
      <StructProperty Name="portrait_ratio1x1">
        ...
      </StructProperty>
      ...
    </Struct>
  </StructProperty>
</Struct>

With these settings all links to variants of images with MIME type image/jpeg or image/gif would be created with MIME type image/png and the file extension .png instead.