ImageEngine is a pull-based Image CDN that will pull an image from its origin on-demand and optimize it. ImageEngine can be integrated into your existing infrastructure within minutes.
Just configure your existing image origin, and ImageEngine will fetch the images on the first request, cache the response, and deliver optimized images.
We do this through an "Engine," a relationship between the image origin and a Delivery Address.
Key Elements of an Engine
Delivery Address: A Delivery Address is where you should direct requests for images. Growth and higher users can create Delivery Addresses to have an address from a domain they own. E.g. 'images.foo.com'. Otherwise, the delivery address is an ImageEngine-provided imgeng.in address.
ImageEngine Address: The ImageEngine Address handles your account’s images on the imgeng.in domain.
An uncustomized delivery address and its ImageEngine Address will be identical. When using a custom delivery address, this record will be used in the CNAME record to direct the Delivery Address to the ImageEngine Address. For more on setting up a custom delivery address, please see Delivery Address
Origin: This is where your web content, such as images, is stored. You can store your images on a web server accessible via HTTP or HTTPS, S3, or cloud-based storage.
ImageEngine does not need you to move or upload images anywhere.
Putting the Pieces together
If an optimized version of the image tailored to the requesting device is already cached on the edge server, ImageEngine will deliver it immediately. ImageEngine’s edge servers will store several optimized images based on the capabilities of the requesting devices or browsers, each with a unique cache key.
If an optimized image is not in ImageEngine’s cache (typically the very first time an image is requested), then ImageEngine will fetch the image from the origin. ImageEngine will resize, compress, and convert the image into its optimal format. During these first optimizations, ImageEngine will serve the original (unoptimized) image until the ImageEngine cache is “warmed” or “primed” to avoid any delays for the user. Therefore, you should send a fair amount of traffic and monitor the cache hit rate before evaluating the effectiveness of the image payload optimization and page load time.
Once fully operational, the ImageEngine CDN cache typically handles 98% of the traffic. In comparison, the origin servers see only 2% of the actual traffic while providing up to 80% or more in payload savings.
Integration Methods
We have implementation guides and plugins available for many common platforms and technologies. Please see them here: Integration Guides and Plugins
To implement ImageEngine on your website, you have two options for directing traffic to ImageEngine by updating img src tags: the Delivery Address Method and the Prefix Method.
1. Delivery Address Method
Once you have set up your account and have configured an Engine, find your engine's Delivery Address in its overview.
To optimize images, you must modify your img src attributes to direct requests to the Delivery Address. Copy the Delivery Address, and insert it into the img src attribute.
For example, the original image src attribute was <img src="https://www.foo.com/image.jpg">
and your Delivery Address is images.foo.com,
then, you will modify your image src attribute to<img src="https://images.foo.com/image.jpg">
Note: The example above uses a custom delivery address. Implementation is exactly the same if you do not have a custom address set up and are using an ImageEngine address.
Here is an animation of what this looks like:
2. Prefix Method
You can prefix any image origin URL with a Delivery Address, regardless of whether it is a custom domain or an ImageEngine Address.
This is a great option if you have multiple origins you want to serve through the same Delivery Address. It is also a great method for testing ImageEngine with different environments.
In the control panel, you may restrict which origins can be prefixed.
For example. if the original image src attribute was
<img src="https://www.foo.com/image.jpg">
and your Delivery Address with HTTPS isimages.foo.com
then you will modify your image src attribute to<img src="https://images.foo.com/https://www.foo.com/image.jpg">
Manual resizing and other directives
ImageEngine provides a number of directives for use in manually applying modifications to the delivery of specific images. There are two ways to make use of directives. In the two examples below, we are forcing the image to be 300 pixels wide(w_300) and to be served in WEBP format(f_webp)
- You can append directives to the end of a URL in a query string using the
imgengparameter:
<img src="//try.cdn.imgeng.in/img/bread.png?imgeng=/w_300/f_webp">- If you’re prefixing the origin (
http://jelly.comin the example below with a delivery address in the image URL, directives can be included in the path:
<img src="//try.cdn.imgeng.in/w_300/f_webp/http://jelly.com/img/bread.png">Please see the Directives article for a full list of available directives.
Adjust Engine delivery options
Each Engine can have settings for adjusting the delivery of large sets of images, please view our article on Customizing Engine Image delivery.
Tips on going live on a production site
Check out the article below for tips on how to go live with ImageEngine. For example, if images are timing out when accessing and caching images for the first time, you can enable the "Temporary Origin Image Fallback" setting in the engine's settings. This setting helps prevent blank images from appearing by immediately serving the original image upon the first cache (for a set TTL) instead of waiting for optimized versions to be available if a cached copy is not immediately accessible.
Advice for going live with ImageEngine in a production environment
Comments
0 comments
Article is closed for comments.