Skip to main content
Version: next

Akamai Image Manager

This extension allow you to use Akamai Image Manager in your Front-Commerce store.

Automatically optimize and enhance images using the <Image> component for every user, on any device, at edge with Akamai.

Prerequisites​

  • Akamai Image Manager enabled on your Akamai account
  • An Akamai property configured to serve your project

Installation​

Install the @front-commerce/akamai-image-manager package:

pnpm add @front-commerce/akamai-image-manager

Usage​

Add the Akamai Image Manager extension to your front-commerce.config.ts:

front-commerce.config.ts
//...
import akamaiImageManager from "@front-commerce/akamai-image-manager";

export default defineConfig({
  extensions: [
    // ...
    akamaiImageManager(),
  ],
  //...
});

Configuration​

The module works out-of-the-box without requiring any changes to your existing image configuration. It supports optional configurations for specific use cases.

Configuration is available under the akamai key of the app/config/images.js config.

Using Image Manager for a subset of images​

You can customize the akamai.paths value to limit images handled by image manager to only a subset of paths. This option accepts an array of paths. Only images under this path will be handled by the image manager adapter. Default value is ["/"] (all images).

Example:

app/config/images.js
const config = {
  // […]
  akamai: {
    paths: ["/media", "/cms/images/"],
  },
};

Akamai configuration​

The adapter uses Akamai's IMQueries to handle transformation on images, with the default im as variable name.

info

In Front-Commerce Cloud, Akamai Image Manager isn't enabled by default. Please contact us if you plan to use this feature.