Images

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.

Format Image Size and Shape with 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:

"image": {      "path": "/blob/d2cuLg.cCY6PPQHMOg/puppies.jpg",      "name": "puppies.jpg",      "type": "image",      "size": 1914937,      "mime": "image/jpeg",      "meta": {        "width": 5184,        "height": 3888      }    }

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=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=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.

​

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.