ImageEngine Control Panel
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.
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.
To learn more about the process for implementing a new domain, please refer the “Implementation > Custom Delivery Addresses” section. 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 go 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 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.
HTTPS is enabled by default for Delivery Addresses like
*.cdn.imgeng.in. For custom Delivery Addresses, availeble in higer tiers, HTTPS can be enabled in the control panel by following this process.
A Delivery Address must be connected to an origin server. By default it is connected to the origin provided during 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.
“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.
Cross-Origin Resource Sharing (CORS) is a security feature based on HTTP-headers which is meant to indicate which origins should be allowed to avvess resources on the server.
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 domian name of your website, for example
The “Suggest Values” button sets liberal values that will most likely work for your site, but will also allow other origins access.
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 populte 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 haders such as
Access-Control-Expose-Headers may be added using a custom HTTP response header.
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 “Implementation > Custom Domain” section.
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”.
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:
This origin definition will be the root of the connected Delivery Address.
A web location is a server on the internet reachable by http or https.
A web location is at least defined by a protocol,
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.
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 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.
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.
The Path is an expression. Whenever there is a match with the path of the request, the settings will be applied.
ImageEngine supports a number of pattern operators that can be used in supplying the path.
||Match any number of characters in a single section of the path. e.g.
||Match any character, any number of times, recursively. e.g.
||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.
||Match any of the patterns a or b or … e.g.
||Escape the special character “ch”. e.g.
||All files in all directories, recursively|
||All files in all directories, recursively, ending in .jpg|
||All files in the “files” directory|
||All files in the “files” directory ending in .jpg|
||All files in the “files” or “other” directory ending in .jpg|
||Files in the “files” directory ending in .jpg where the filename is a single alphanumeric character, case-insensitive|
Click the “Validate Path” button to test the expression to make sure it catches the URLs you intend.
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).
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 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).
Set the image size and quality for all images returned by ImageEngine matching the URL pattern provided.
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.
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.
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.
Removes all metadata embedded in the image by default. May be useful if your application uses some of the embedded meta data (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.
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.
Override the amount of sharpening applied to an image on a scale from 1 to 100, where 100 is maximum sharpening.
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 origininal image to be kept in the edge cache before the edge cache again checks to see if there is an optimized version available. 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 behaviour is that the origin will not be served if the request explicitly contains any of the following directives:
/m_in combination with
w_present with values less than the original image intrinsic height or width.
This behaviour can be overridden by selecting the “Apply to all images requests regardless of directives” option.
Set the maximum time allowed for ImageEngine to wait for a response from the origin server. Maximum allowed value is 120 seconds.
ImageEngine will automatically pick the image format that gives both the lowest bytes size and a 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.
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
Custom response headers may be handy when configuring CORS behaviour.
Image cache can be purged from the control panel’s left hand menu.
First, select the Delivery Address which the image(s) are served through.
Second, enter an expression or a path to the image.
Hitting the “Purge” button will put the request in a queue. Status is shown in the list of purge requests. Please allow a few minutes for the purge request to get picked up in all regions.