Image optimization

Table of contents

• Experiences image optimization
• Enabling image optimization for an image component
  • Using the built-in image component
• Enabling image optimization for a background image
  • Adding background image to built-in structure components

Experiences image optimization

Image optimization in Experiences can be effectively managed using Contentful built-in asset manager. This can be achieved in the following ways:

1. Using Contentful built-in components, such as the Image and Structure components, which come with image optimization settings pre-configured.

2. For custom components, you can enable image optimization by including the relevant built-in styles in your component definition. This allows you to optimize your images using design settings provided in the Design tab.

Enabling image optimization for an image component

To enable image optimization for an image component, include cfImageAsset and cfImageOptions in the builtInStyles array of your component definition.

Here are the default variable definitions for these options:

cfImageAsset: {
  displayName: 'Image',
  type: 'Media',
  description: 'Image to display',
},
cfImageOptions: {
  displayName: 'Image options',
  type: 'Object',
  group: 'style',
  defaultValue: {
    width: '500px',
    height: '100%',
    objectFit: 'none',
    objectPosition: 'center center',
    quality: '100',
    targetSize: '500px',
  },
},

The cfImageAsset variable is used to select the image to display, while cfImageOptions allows you to customize the design settings for the image, such as width, height, object fit, object position, quality, and target size.

Using the built-in image component

The following steps provide an example of how to use the built-in Image component for image optimization:

1. Add the Image component to the canvas.

2. With the Image component selected, switch to the Content tab in the Right sidebar.

3. Click on the Image option in the menu to open the Content properties menu.

4. Select an asset for your image. Once the image asset has been selected, the image is rendered in the canvas.

5. With the image now rendered, the Design tab on the right displays Image Optimization and Image Fit settings.

By following these steps, you can effectively manage image optimization using Contentful built-in asset manager.

Enabling image optimization for a background image

To enable image optimization for a background image, include cfBackgroundImageUrl and cfBackgroundImageOptions in the builtInStyles array of your component definition.

Here are the default variable definitions for these options:

cfBackgroundImageUrl: {
  displayName: 'Background image',
  type: 'Media',
  description: 'Background image for component',
},
cfBackgroundImageOptions: {
  displayName: 'Background image options',
  type: 'Object',
  group: 'style',
  defaultValue: {
    scaling: 'fill',
    alignment: 'left top',
    quality: '100',
    targetSize: '2000px',
  },
},

The cfBackgroundImageUrl variable is used to select the background image for the component. cfBackgroundImageOptions variable allows you to customize the design settings for the background image, such as scaling, alignment, quality, and target size.

Adding background image to built-in structure components

The following steps provide an example of how to add a background image to built-in structure components:

1. Add a Structure component to the canvas.

2. With the Structure component selected, switch to the Content tab in the right sidebar.

3. Click on the Background Image option in the menu to open the Content properties menu.

4. Select an Asset for your background image. Once the image asset has been selected, the background image is rendered in the canvas.

5. With the background image now rendered, the Design tab on the right displays Background Image and Image Optimization settings.

By following these steps, you can effectively manage background image optimization using Contentful built-in asset manager.