Image URL Scheme/Structure
When images are called using product_image_uri, image_uri or content_image_uri, you are offered the opportunity to change how the image is returned. This article provides examples of each value that can be used.
Product URL scheme
Product images follow a URL scheme like this:
<subdomain>.<domain>/p/<image-id>/<customisable-seo-filename>.<extension>?<query params>
<image-id>: This is the unique identifier stored that is used to associate the image with the product to which it belongs.
<customisable-seo-filename>: This is a filename that exists for SEO purposes.
<extension>: If AutoWebP is disabled, or is enabled but the browser does not support Webp then this can be used to select the response format for the image, e.g. jpeg will result in an image/jpeg image being returned. If AutoWebP is enabled and the browser supports Webp then this is ignored an a Webp image is returned.
Templates URL scheme
Template images follow a URL scheme like this:
<subdomain>.<domain>/t/<path-to-image>?<query-params>
<path-to-image>: This is the relative path to the image within your templates
As with product images the type of image returned will either match the file extension specified or will be a WebP image if AutoWebP is enabled and the browser supports this image type. Unlike product images however, you cannot change the file extension to get the image in a different format.
Allowed parameters
You can append the following onto images to manipulate the output you require.
| Paramater Key | Purpose | Example | Valid values |
|---|---|---|---|
| t | Specifies the transformation to apply. See the Transformations section for a mapping of these values. | t=rh | rp | rc | r | rw | rh | rm |
| w | Specifies the desired width of the image. Used for resize & pad, resize and crop, resize & resize to width transformations. | w=100 | >= 1 && <= 5000 |
| h | Specifies the desired height of the image. Used for resize & pad, resize and crop, resize & resize to height transformations. | h=200 | >= 1 && <= 5000 |
| m | Specifies the maximum width / height of the image. Used for resize to max transformation. | m=500 | >= 1 && <= 5000 |
| q | Specifies the image quality to use for the transformed image. 100 is best. | q=50 | >= 1 && <= 100 |
| cb | Specifies a cachebreaker value. This must be used only for default product images, and must be a value retrieved from the /assets/cachebreaker endpoint. | cb=2022-09-01_10:00:00 |
The order in which parameters are specified must match the order in which they are specified in the above table. Any deviation in this order will result in a 301 redirect to the equivalent URL with the parameters in the correct order.
The ‘m' query parameter may not be used in conjunction with the ‘w’ or ‘h’ parameters and is only used for the 'resize to max’ transformation; it may not be used with any of the other transformation strategies.
Inclusion of any query parameters other than those specified here will result in the request being rejected with a “400 Bad Request” response.
Updated over 2 years ago