Skip to main content

Manifest

The generated manifest file contains information about the source images and generated formats. It allows you to explicitly choose which values you would like to export from the accompanying image metadata.

To learn more about the metadata object, see the conceptual overview.

Manifest generation is disabled by default. To enable it, you must specify a manifest object in the configuration. The best way to understand is with an example.

An example​

ipprc.yml
manifest:
  source:
    x: hash:8
  format:
    h: height
    w: width
    p: path

The above manifest will output the source hash (limited to 8 characters) and the width, height, format and path of each exported format.

tip

It would also be possile to specify x: source.hash:8 under the format key, however it would be wasteful, as every format would include a copy of the hash. The source key allows you to extract common information that is relevant for all generated formats.

The manifest file depends on the pipeline. Considering a simple pipeline that exports a single JPEG and WebP format for each source, a possible manifest file would be:

manifest.json
[
  {
    "s": {
      "x": "d41d8cd9"
    },
    "f": [
      {
        "w": 1920,
        "h": 1080,
        "f": "jpeg",
        "p": "d41d8cd9.jpg"
      },
      {
        "w": 1920,
        "h": 1080,
        "f": "webp",
        "p": "d41d8cd9.webp"
      }
    ]
  }
]

The manifest is designed to be as compact as possible, and completely coustomizable. The above is would be useful, as it provides the source image hash (which never changes, as long as the file contents never change), regardless of where you put it, and provides some basic information which can be used to construct a responsive <picture> element.

Example srcset generation
const desiredImage = "d41d8cd9";
const srcset = manifest
  .find((entry) => entry.s.x === desiredImage)
  .f.reduce((acc, format) => {
    const mime = `image/${format.f}`;
    const shouldAppend = typeof acc[mime] === "string";
    const srcsetExtension = `${format.p} ${format.w}w`;
    const newMimeSrcset = (shouldAppend ? `${acc[mime]}, ` : "") + srcsetExtension;

    return {
      ...acc,
      [mime]: newMimeSrcset,
    };
  }, {});

// {
//   "image/jpeg": "204e9800.jpg 1920w",
//   "image/webp": "8ecf8427.webp 1920w"
// }

Available CLI metadata keys​

The following metadata keys are always populated and can be used for the manifest. Other available keys depend on the configured pipeline.

  • format, width, height, channels, hash: populated by @ipp/core
  • path: the path to the image, relative to the output directory