Skip to content
Arc XP
Product Documentation

How to Preview Image Transformations

Photo Center stores the highest resolution of an image that it can, so it’s important to always use the Image Resizer to optimize the image for web display. For example, an image shown next to a story on a search engine results page may be thumbnail-sized so that the page loads quickly, or sometimes images need to have a consistent shape, regardless of their original aspect ratios.

Rather than store many versions of the same image, Arc XP uses a just-in-time image resizing service to create resized or manipulated images as needed, which we call transformations. The resized images are automatically cached in Arc XP and are distributed using our Content Delivery Network (CDN) to ensure the fastest page loading time possible.

Arc XP is moving to a newer version of Image Resizer as part of the continuous improvement efforts of our global SaaS platform. Key changes include moving to a more powerful and reliable option resizing service and the ability for you to add SEO-friendly names for images, which can help your site’s SEO performance. Additionally, with the new Resizer, the authentication token will be included in the image ANS and is good for all resize variations, so you won’t have to worry about storing the secret key.

Background for this document

  • Why this document matters: You are wondering what transformations are in place with Image Resizer V2 and want to test them to make sure it meets all of your transformation needs for your organization. Use this guide with the How To Transform Images guide to test the various transformations.
  • When it needs to get done: When you migrate from V1 to V2, you must map your existing V1 transformations to the transformations available in V2. We recommend you start this testing process as soon as you can to accommodate the work in your roadmap.

Transformation Guide

The following sections instruct you how to transform your images.

Prerequisites

  • Developer, technically-savvy
  • Has worked with Image Resizer V1 and is familiar with your Arc XP repositories

Getting the Base Resizer V2 Image URL:

  1. Determine your Resizer URL.
    • If your site has not yet launched, your Resizer URL follows this model https://{org}-{default-website}-{env}.web.arc-cdn.net/resizer.
    • If your site has launched, your Resizer URL is {website name}/resizer.
  2. Add /v2 to the base Resizer URL: {website name}/resizer/v2.
  3. Take the image ID from the CloudFront URL of the image you want to test with and append the ID to the Resizer URL from step 2. You can find the CloudFront URL either in ANS or the Photo Center UI path for a published image.
    • Example of image ID from CloudFront URL: SMDVGH3HWRBMRGDZHZFNTCP6EU.jpg
    • Example of Resizer URL with appended ID: {website name}/resizer/v2/SMDVGH3HWRBMRGDZHZFNTCP6EU.jpg
  4. Make a GET request to the Photo API photo/api/v2/{photoId}. Take the Auth token from the image ANS auth field (associated with the image) and paste that as a query parameter at the end of the URL. For example: {website name}/resizer/v2/SMDVGH3HWRBMRGDZHZFNTCP6EU.jpg?auth=db02a059a34fd56e1041d5513ec2745a54239c848a8b Cloudfront URL

The full-sized image delivered and optimized through Resizer V2 appears.

Transforming using your Base Resizer V2 URL

Using the How To Transform Images guide, you can apply various transformations as query parameters to the URL. Separate the transformations using the & symbol.

For example, if you are looking to resize an image to a width of 500 pixels, but want to keep the original aspect ratio, use this query:

[site name]/resizer/v2/SMDVGH3HWRBMRGDZHZFNTCP6EU.jpg?auth=db02a059a34fd56e1041d5513ec2745a54239c848a8bfe14b43cf512d7ed92b8&width=500

Without regenerating a new Auth token for this transformed image, you can now test other transformations.