Dynamic Image Transformation
Formatting the size, shape, and file type of images are important for an app's performance. When we have very large image sizes, oftentimes it can slow performance on the front-end. Additionally, the image file type can affect performance on the front-end.
Format Image Size and Shape with Real-time Image Transformation Templates
Images have special properties that can be used when displaying them using their URL path. These templates can change the size and even the shape of the image. They are used by adding "?tpl=" to the end of the path.
The path can be found in the Image JSON Metadata:
For example: "https://x838-9e23-328e.qa.xano.io/blob/d2cuLg.cCY6PPQHMOg/puppies.jpg?tpl=tiny". Let's start with the smallest and work our way up:
The first is ?tpl=tiny: The original image aspect ratio is preserved using a width of 32.
?tpl=small: The original image aspect ratio is preserved using a width of 50.
?tpl=med: The original image aspect ratio is preserved using a width of 160.
?tpl=big: The original image aspect ratio is preserved using a width of 360.
?tpl=bigger: The original image aspect ratio is preserved using a width of 600.
?tpl=large: The original image aspect ratio is preserved using a width of 800.
?tpl=xlarge: The original image aspect ratio is preserved using a width of 1920.
Shape: Box To change the shape of the image to a square you can add ":box" to the end.
For example: "www.demoimage.jpg?tpl=big:box".
?tpl=big:box The original image is transformed into using a 360 x 360 square.
?tpl=tiny:box The original image is transformed into using a 32 x 32 square.
?tpl=small:box The original image is transformed into using a 50 x 50 square.
?tpl=med:box The original image is transformed into using a 160 x 160 square.
?tpl=bigger:box The original image is transformed into using a 600 x 600 square.
?tpl=large:box The original image is transformed into using a 800 x 800 square.
?tpl=xlarge:box The original image is transformed into using a 1920 x 1920 square.
Original:
?tpl=original This transforms an image or file back to it's original format. One use case, for example, would be used for a gif. Xano only stores the first frame of a gif due to formatting difficulties. However, you can use the original template when calling the gif to get the original animated format.
Image File Type Formatting
Additionally, you can further format the image into whichever file type required.
For example, here is a .png file: "https://x07d-e032-f135.n7.xano.io/vault/Bv2Z6yth/0EhjMIvN/oLMYcg../puppies.png"
If we required a .jpg file type, we can reformat the image like this: "https://x07d-e032-f135.n7.xano.io/vault/Bv2Z6yth/0EhjMIvN/oLMYcg../puppies.png?tpl=big.jpg"
Formatting the size, shape, and file type of images are important for an app's performance. When we have very large image sizes, often times it can slow performance on the front-end. Additionally, the image file type can affect performance on the front-end. For general use, we recommend using .jpg file types for images. This is because .jpg is a smaller file type making it easier for the front-end to load. However, if you require transparency capabilities or very high image quality, then you might want to consider .png.
Google Cloud Storage
Xano utilizes Google Cloud Storage for media storage to optimize bandwidth and performance capacity.
You will notice that the initial media URL from Xano will redirect to a Google domain.
For example,
Would redirect to:
The above templates are designed to be used on the original URL before the Google redirect. On the redirect, the media will take on whatever template might have been applied to the original URL. Once at the redirected Google URL, applying a transformation template will not affect the media.
Last updated
