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 and cache the response, and deliver optimized images.
We do this through an "Engine," which is 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. Standard and Pro account users can customize their Delivery Addresses to have an address from a domain that they own. If the delivery address is not customized, the Delivery Address is identical to the ImageEngine Address.
ImageEngine Address: The ImageEngine Address handles your account’s images on the imgeng.in domain.
Uncustomized delivery addresses and ImageEngine Addresses are identical and can be used directly.
However, If a custom delivery address is set up, you will only be using the ImageEngine Address when setting up the DNS CNAME record that will point the custom Delivery Address (CNAME) to the ImageEngine Address.
Origin: This is where your web content, such as images are 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 that is tailored to the requesting device is already cached on the edge server, then 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, all while providing up to 80% or more in payload savings.
Integration Methods
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 or in the left column of the Engines Table.
To start optimizing 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 if 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
See the below article for tips on going live with ImageEngine. For instance, if images are experiencing timeouts when accessing and caching images for the first time, the “Temporary Origin Image Fallback” setting can be enabled in an engine’s settings. It will assist in preventing 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 available.
Advice for going live with ImageEngine in production environment
Comments
0 comments
Article is closed for comments.