ImageEngine Control Panel

ImageEngine comes with an advanced control panel that allows you to manage all aspects of your domains and origins. Additionally, statistics and billing information is available.

Engines

In the table named “Engines”, all your Delivery Addresses are listed. The table shows which origin is connected to the given Delivery Address as well as some configuration options and statuses.

Origin

The origin connected to Delivery Addresses can be changed by clicking the “Edit” button in the table row. The origin is listed by its provided common name.

Status

To learn more about the process for implementing a new domain, please refer to the Delivery Address article. When a custom Delivery Address is newly registered, the buttons say Domain Pending and Enable HTTPS.

Clicking the Enable HTTPS button will take you through the configuration of certificates. While the certificates are being processed, the HTTPS button goes through several statuses before it turns green when all certificates are generated and verified.

Clicking the Domain button will display the DNS configuration required in order to enable ImageEngine to serve images from this custom Delivery Address. A green button means that the DNS record is correctly set up and ImageEngine can serve images on the custom Delivery Address.

The status column shows the status of the domain and HTTPS support.

There are two potential statuses associated with the domain:

• Domain Pending: the domain has been added but is waiting for HTTPS validation or the addition of the optional CNAME record to the customer’s DNS
• Domain Enabled: the domain is ready for use

There are three potential statuses for HTTPS

• Add Validation Record to DNS: a HTTPS certificate has been created by ImageEngine. When visible, you can click on it and use the validation record information to add the domain CNAME record to your DNS.
• HTTPS Pending: When visible, ImageEngine has started the HTTPS validation process. All of ImageEngine’s edge servers must complete the validation before this process ends.
• HTTPS Valid: HTTPS associated with the domain is ready for use.

SSL/TLS Certificates

HTTPS is enabled by default for Delivery Addresses like *.cdn.imgeng.in. For custom Delivery Addresses, available in higher tiers, HTTPS can be enabled in the control panel by following this process.

Connecting an Origin to the Delivery Address

A Delivery Address must be connected to an origin server. By default, it is connected to the origin provided during the initial setup of the ImageEngine account.

To change the origin of the Delivery Address, click the Edit button in the row of the engine with the Delivery Address in question. Then click the Origin Configuration tab.

Here you can choose to map the Delivery Address to a list of previously created origins, or you can add a new origin directly. A Delivery Address can only serve images from one origin at a time.

Allow Origin Prefixing

“Origin prefixing” is a feature where the Delivery Address can prefix any other image URL on the internet. For example, if the Delivery Address registered is img.foo.com you can put this in front of any other URL resolving to an image: http://img.foo.com/http://www.website.com/image.png. This may be a convenient feature in many cases. You can provide a list of origin hostnames allowed for prefixing. If the prefixed image URL is not from one of the provided origins, ImageEngine will throw an error. This adds some security to the feature, but the feature should be disabled if this is a use case you’re unlikely to encounter.

Manage CORS behavior

Cross-Origin Resource Sharing (CORS) is a security feature based on HTTP-headers which is meant to indicate which origins should be allowed to assess resources on the server. By default, it is enabled. 

In this section, the allowed origins, methods, and headers are specified. Multiple origins can be entered. ImageEngine will respond with only one origin if there is a match between the actual origin and the list of allowed origins. The origin should usually be * or the domain name of your website, for example, https://foo.com.

The “Suggest Values” button sets liberal values that will most likely work for your site but will also allow other origins access. The default selection is only "GET"

Any headers defined here will overwrite the same headers returned from the origin server.

• “Origins allowed to access resources on this Engine”, will populate the Access-Control-Allow-Origin response header. Read more
• “HTTP methods allowed” will populate the Access-Control-Allow-Methods response header. Read more
• “Allowed HTTP request headers” will populate the Access-Control-Allow-Headers. Multiple values must be comma-separated. For example, x-requested-with, content-type. Read more
• “Life time of a “preflight” request” populate the Access-Control-Max-Age response header. Read more

Other CORS-related headers such as Access-Control-Allow-Credentials or Access-Control-Expose-Headers may be added using a custom HTTP response header.

Adding a New Delivery Address

You may add multiple Delivery Addresses. Simply click the “Add New Engine” button and provide at least a fully qualified domain name. The domain name must be unique. You must control the DNS to the domain name. The domain name will be your Delivery Address. For more information, please refer to the Delivery address article.

If you require HTTPS for the Delivery Address, please note that the certificate will be generated for the domain name provided above. The certificate verification process may take up to 48 hours. Non-secure (http://) traffic will work independently of the certificate verification process.

Next, an origin must be mapped to the Delivery Address. Do so by clicking the “Origin Configuration” tab. Here you can choose to add a new origin or select an existing one.

Once done, click “Submit”.

Origins

The bottom table lists the registered origin servers for this ImageEngine account. You can edit the configuration from the “Edit” button. If you want to delete an origin, make sure that it is not used by any Engines.

The schema for an origin looks like this:

<protocol>://<username>:<password>@<hostname>:<port>/<path>

This origin definition will be the root of the connected Delivery Address.

Web location

A web location is a server on the internet reachable by HTTP or HTTPS.

A web location is at least defined by a protocol, http or https, a common name, and a hostname or IP address.

If the origin host or IP serves multiple hosts, and it requires the host header to be set, this option is available under the “Advanced” tab.

Any paths, ports, or authentication for the origin are configured similarly.

By default, images can be referenced from the root of this location. If you have a deep hierarchy of sub-folders, a path can be added to the origin. ImageEngine will then treat that path as the root of the origin.

S3 Bucket

ImageEngine also supports S3 protocol. If you have images stored in an Amazon S3 bucket, simply configure the origin with a common name and the name of the S3 bucket.

An S3 origin also supports a path added to the origin definition.

Google Cloud Storage

Google Cloud Storage is considered a web location. If you have your images stored on Google Cloud, make sure the bucket is publicly available. Then you can define your origin with storage.googleapis.com as the origin host, and the bucket name and any sub-folders in your bucket, as the path in the web location.

Customize Image Delivery

Usually, it is recommended to let ImageEngine make all the decisions on how to best optimize an image. ImageEngine’s advanced algorithms for choosing the best optimization strategy give much better results over time.

However, there are many valid scenarios where the only option is to adjust the default behavior of ImageEngine. This is done through custom settings, applied to specific paths.

To customize ImageEngine behavior, click the “Settings” button in the row of the engine you want to tweak behavior for. If there are no settings present, click the “Add Settings” button.

Path

The Path is an expression. Whenever there is a match with the path of the request, the settings will be applied. A path with a query string is also supported.
ImageEngine supports a number of pattern operators that can be used in supplying the path.

Operator	Description
*	Match any number of characters in a single section of the path. e.g. /foo/*.jpg will match /foo/test.jpg but not /foo/bar/test.jpg
**	Match any character, any number of times, recursively. e.g. /foo/**.jpg will match both /foo/test.jpg and /foo/bar/test.jpg
[...]	Match any character out of a set of characters. e.g. /foo/img[0-9][0-9].jpg matches /foo/img01.jpg and /foo/img32.jpg
?	Match the proceeding character or range zero or one times. e.g. /foo/imgA?.jpg matches both /foo/img.jpg and /foo/imgA.jpg. e.g. /foo/img[0-9]?.jpg matches both /foo/img.jpg and /foo/img1.jpg
{a,b,...}	Match any of the patterns a or b or … e.g. /foo/img.{jpg,png,jpeg} matches /foo/img.jpg, /foo/img.png, and /foo/img.jpeg
\	Escape the special character. e.g. /foo/img.jpg\?thumbnail=true literally matches /foo/img.jpg?thumbnail=true, as opposed to /foo/img.jpgthumbnail=true

Examples

Operator	Description
**/*	All files in all directories, recursively
**/*.jpg	All files in all directories, recursively, ending in .jpg
/files/*	All files in the “files” directory
/files/*.jpg	All files in the “files” directory ending in .jpg
/{files,other}/*.jpg	All files in the “files” or “other” directory ending in .jpg
/files/[a-zA-Z0-9].jpg	Files in the “files” directory ending in .jpg where the filename is a single alphanumeric character, case-insensitive

Note: When creating a rule for a path including a query string, make sure to escape the `?` using the `\` operator:

/images/image.jpeg\?v=*

The above will match `/images/image.jpeg?v=2`.

Validate the Provided Path

Click the “Validate Path” button to test the expression to make sure it catches the URLs you intend.

Set Minimum Cache TTL

By default, ImageEngine honors the cache directives given by the HTTP response of the origin. Here you can override and set a different minimum Time To Live (TTL) in seconds. This TTL decides how long the object will be stored by ImageEngine. The minimum allowed TTL is 3600 sec. It is recommended to use 7776000 (90 days) as cache TTL. A higher number will reduce the cache misses and also traffic to the origin. This value populates the s-maxage attribute to the Cache-Control response header (only applies to shared caches (e.g., proxies) and is ignored by a private cache).

Set Minimum Browser Cache TTL

By default, ImageEngine honors the cache directives given by the HTTP response of the origin and mirrors this all the way to the end user’s browser. Here you can override the Time To Live (TTL) in the browser cache. This value populates the max-age attribute to the Cache-Control response header and defines for how many seconds the object may be cached in the browser. The recommended TTL is 7776000 seconds (90 days).

Image Size and Quality

Set the image size and quality for all images returned by ImageEngine matching the URL pattern provided.

Size

You can either force a specific width and/or height or apply automatic resizing with a custom fallback width to all images matching the provided pattern.

In case you want to force both a specific width and height, you may also choose a fit method (the image will be fitted on the canvas defined by the width and height).

In auto mode, width fallback with other sources of size information (WURFL or Client Hints) will be tried first, but if nothing is found, the provided width will be the fallback width. 2560px is default.

Support High DPI screens

If auto mode is selected you may also choose how to support high PPI screens such as “Retina”. If “Yes” is chosen (default) ImageEngine will automatically size the images to the actual resolution (device pixels). If “No” is chosen, ImageEngine will resize to the “CSS pixels” (the same unit as used in web design when determining sizes). The latter option will save more data and be faster, but at a lower visual quality on high PPI screens.

Quality

You can choose to adjust the relationship between low image byte size and image quality. You can specify an overall compression rate, or, if high PPI screens are supported, you can specify image quality by image format.

Keep EXIF Data

Removes all metadata embedded in the image by default. May be useful if your application uses some of the embedded metadata (location for example), or if you want to preserve embedded copyright information.
This setting is disabled by default. Selecting “Custom” will cause it to enable.

Pass Images Through

Enable this option if you want images to be served unchanged by ImageEngine. If enabled, ImageEngine will still cache the original image, but will not apply any optimizations.
This setting is disabled by default. Selecting “Custom” will cause it to enable.

Sharpen Image

Override the amount of sharpening applied to an image on a scale from 1 to 100, where 100 is maximum sharpening.

Temporarily Serve Origin Image

If enabled, ImageEngine will serve the original, unmodified image if an optimized version is not yet available. This will usually affect the very first request for an image.

You can specify the Time To Live (TTL) for the original image to be kept in the edge cache before the edge cache again checks to see if there is an optimized version available. The default is 180 seconds.

Enabling this feature will make sure that image delivery is not delayed by the initial processing. Scenarios when enabling this feature should be considered might include the initial move of traffic to ImageEngine or sites with unusually big- or user-generated images that may take time to process.

Note that the default behavior is that the origin will not be served if the request explicitly contains any of the following directives:

• cr_
• /m_ in combination with w_ and h_
• f_
• r_
• h_ and w_ present with values less than the original image intrinsic height or width.

This behavior can be overridden by selecting the “Apply to all images requests regardless of directives” option.

Origin Timeout

Set the maximum time allowed for ImageEngine to wait for a response from the origin server. The maximum allowed value is 120 seconds.

Image Formats

ImageEngine will automatically pick the image format that gives both the lowest bytes size and great visual quality. You can override this feature by selecting a single image format that should be used for serving all images from the provided location.

Alternately, you can specify which image formats should not be considered when automatically converting the image.

Custom Response Headers

If you need ImageEngine to return specific headers you can define them here. Typical use cases may be content security policies, referrer policy, or simply your own custom headers.

Any header added here will overwrite other headers with the same name. For example, if the origin server is returning x-my-header: true and the custom header x-my-header: false is added here, the browser will receive x-my-header: false.

Custom response headers may be handy when configuring CORS behavior.

Purge cache

Image cache can be purged from the control panel’s left-hand menu.