Transforming with Query Strings

What is it and what are the benefits?

There are many instances where an image will need to be displayed across multiple devices with different size restrictions. Agility allows developers to make this request directly in the code through Media Based URL Transcoding. 

How Does it Work?

Let’s use this picture of a cat as an example and say you’ve uploaded it to Agility and the URL for the image is https://42b6f927-cdn.agilitycms.cloud/cat.jpg 

A Developer could use the Width and Height parameters below to alter the URL and specify that the Image needs to be displayed with a Width and Height of 200 pixels. The URL they would use is https://42b6f927-cdn.agilitycms.cloud/cat.jpg?w=200&h=200 

Available Parameters

  • W – Allows you to specify the Width of an image with a number value 
  • H – Allows you to specific the Height of an image with a number value 
  • C – Allows you to specify an Action for the image to take with a number value 
  • 1: Scale and fill remaining space 
  • 2: Resize and fill with white space 
  • 3: Crop Image 
  • Q – Allows you to specify the Quality of an image as a percentage (1-100) of the original Asset quality 
  • Format – Allows the source image to be converted from one encoded format to another 
  • Auto: Output image as .webp if the browser supports it. 

Further Reading