Multiple transformations

Transformations can be combined together to apply multiple changes to an image as part of a single delivery request, e.g. crop an image and then apply a grayscale image effect. In certain cases you may want to perform additional transformations on the result of another transformation request. In order to do that, you can chain the transformations together using an & ampersand character.

Some parameters only act on the transformation immediately before them. A fit applies to the resize it follows, and a background colour fills transparency that exists when it is reached, so both are given after the transformation they belong to. A parameter the Image API does not recognise, or a value it cannot use, is ignored and the rest of the request still applies.

Internally, the final output of the transformed image requires a quality level to be provided. If no quality level is specified, the Image API will automatically apply a default which balances between reducing image size and maintaining image quality. In some cases these defaults are not going to be perfect and you may find that you need to specify your own quality setting. That is more likely to be the case if the source image is not high quality, such as when the source image has already been pre-optimised for the web. For reference, the quality defaults are:

• Jpeg: 75
• Webp: 80

Quality applies to JPEG and WebP images only. PNG, GIF and TIFF have no detail to trade for a smaller file, so any quality value given for them is ignored.

To get the best results from the Image API in terms of size reduction and quality you should use high-quality images as the Image API can handle images up to 50MB in size. In general, it is always worth carrying out a short experiment with some representative images from any collection of images that will share the same transformation parameters. You can then ensure that you have achieved an acceptable balance between image size and quality.

• Standard: coastal-landscape-with-rocky-shoreline.jpg?width=500
• Short: coastal-landscape-with-rocky-shoreline.jpg?w=500

• Standard: coastal-landscape-with-rocky-shoreline.jpg?width=500&quality=50
• Short: coastal-landscape-with-rocky-shoreline.jpg?w=500&q=50

• Standard: coastal-landscape-with-rocky-shoreline.jpg?width=500&quality=50&effect=grayscale
• Short: coastal-landscape-with-rocky-shoreline.jpg?w=500&q=50&e=grayscale

• Standard: coastal-landscape-with-rocky-shoreline.jpg?width=900&rotate=90&effect=grayscale&width=300
• Short: coastal-landscape-with-rocky-shoreline.jpg?w=900&r=90&e=grayscale&w=300

Each step works on the result of the one before it, so the final width applies to the rotated image rather than the original.