Blog

How-To: Get Higher Quality Images and Faster Time to Production With Image Manager + Sandbox

May 29, 2019 · by Manish Gupta ·
Categories:

When you’re a developer, the more similar your test environment is to the real production environment, the better. However, with the complexities around multiple environments, third-party dependencies, and other challenges, it’s not easy to fully achieve this ideal. But every step toward that ideal improves software quality and reduces cycle times.

Starting now, you can take another step in that direction.

Akamai Image Manager offers a new capability that allows you to test image optimizations and transformations in Akamai staging environments before pushing them to production. To do this, you’ll use Akamai Sandbox to create a sandbox from your local development environment; you’ll then test your image optimizations and transformations (such as crop, resize, watermark, blur, etc.) in your sandbox environment to quickly see how the images stored in pre-production origins look and react with your site. This combination of Image Manager and Sandbox brings your test environment and production environments closer together to deliver superior image quality and faster time to production.

How to start testing with Image Manager and Sandbox

First, set up a sandbox for an Akamai config that has Image Manager enabled. (To learn how to create a sandbox, follow the steps in Introduction to Sandbox). Next, modify the config.json for your sandbox to override the origin mappings to point to an origin of your choice (local, public cloud, etc.) that hosts your pristine images.

Note: Akamai Sandbox only supports real-time image transformation. Offline image transformations are not supported.

Once you have your sandbox set up, start sending traffic through the sandbox using your favorite client (browser, curl, etc.), The first time you send traffic, no images will be cached. Any requests for images that would be handled by Image Manager and require pristine images are sent back to sandbox-client, which runs on the local developer machine as shown in the figure below. Sandbox-client would consult the config.json to resolve the origin mapping and fetch the pristine image.

workflow diagram

Image Manager will apply your selected real-time transformation (see the full list of available transformations here) to your pristine image, and then the transformed image will be sent back to sandbox-client.

Note: Depending on the caching rules you’ve applied, the transformed image may be cached in the Akamai Sandbox environment. Akamai Sandbox provides cache key isolation at the sandbox level, which gives multiple developers the ability to test transformations of the same image while they are working in parallel.

As you can see, by using this Image Manager/Sandbox model you can iteratively push new versions of your Akamai delivery config to test your changes and get real-time feedback.

How to verify that the requested image was transformed in the Akamai Sandbox environment

To verify, you can first send a request to the origin directly with no sandbox, as shown below (see red outline). The Content-Length header contains the original size of the image without any transformations.

interface before optimization

Then, you can send a request with the Akamai Sandbox + Image Manager combination, as shown below. Besides other headers, the Content-Length header shows the size of the transformed image to be less than when served with only the Image Manager transformation.

interface after optimization

You can also send Akamai pragma headers with the request, and check for certain special response headers. The following response headers would confirm that the image was transformed in real time in the Akamai Sandbox environment (see items outlined in red, above):

Server: Akamai Image Server

X-Akamai-Sandbox: true

X-Image-Server-Product: IM

Depending on the caching rules defined in Akamai Sandbox, subsequent requests for the same image could be served from the cache, which should contain the earlier transformed image.

Finally, you can also use Piez to validate Image Manager behaviors.

piez
The Piez interface, with key data about Image Manager behaviors​​​​​​

Using edgekey in this workflow

The request hostname used should be CNAME’ed to Akamai using edgekey (each hostname assigned to a property corresponds to an Akamai edge hostname, which is typically the hostname suffixed with edgesuite.net over HTTP or edgekey.net over secure HTTPS; learn more here). The use of edgekey is a requirement when testing Akamai Sandbox with Image Manager; it is not a requirement if you are testing Akamai Sandbox without Image Manager.

Note: The auto-format conversion and perceptual-quality optimizations are not supported in Akamai Sandbox.

Conclusion

By using the new capabilities offered by combining Akamai Image Manager and Akamai Sandbox, you can bring your test environment and production environments closer together. We believe it can ultimately help you improve your workflow, productivity, and end-user experience. Give it a try!

Manish Gupta is a principal software engineer at Akamai Technologies.