LogoLogo
  • A better way to do...stuff!
  • How we build the app
    • Overview
  • Documentation
    • Draftbit
      • Using Live Preview
      • Workspaces and Billing
      • Introduction to the Builder
      • Layout
      • Intro to Navigation
      • Fetching Data
      • Direct Integrations
      • FAQs
      • Draftbit
      • Draftbit
      • Custom Blocks
      • Borders, Background, and Elevation
      • Actions
      • Custom Screen Code
      • Exporting and Publishing Your Project
      • Sharing Your Project Online
      • Publishing Your App as a PWA
      • Stack Navigator
      • Tab Navigator
      • Draftbit
      • Draftbit
      • Basic
      • Media
      • REST Services & Endpoints
      • REST API Integrations
      • Themes & Styling
      • Submitting Data
      • Draftbit
      • Draftbit
    • Xano
      • resources-and-tips-1
        • 🎞️ Xano Video Tutorials
        • 🤝Community Corner
        • 💰Share Xano. Make money
      • FAQ
      • getting-started
        • ⚡ Jumpstart
        • 🎞️ The Xano Interface
      • instances
        • What is an Instance?
        • Early Access Instance
        • Upgrading an Instance
        • Sharing
        • Bandwidth Usage
        • API Rate Limit
      • What is a Workspace?
      • Dashboard
      • Database
      • Airtable Import
      • API
      • Library
      • Marketplace
      • Settings
      • authentication
        • Authentication
        • Sign-up & Log in
      • data-manipulation
        • The Function Stack
        • Addons (GraphQL-Like)
        • The Expression Builder
        • External Query Manipulation
        • Timestamp
        • Filters
        • Images
    • Expo
      • Creating your first build - Expo Documentation
    • Kommunicate
      • Installation
      • Installation
      • Installation
      • Installation
      • Installation
      • Flutter Installation
      • Installation
      • Zapier Integration
      • Authentication
      • CMS Installation
      • Authentication
      • Conversation
      • Conversation Assignment
      • Customization
      • Localization
      • Logout
      • Web Troubleshooting
      • Installation
      • Authentication
      • Push Notification
      • Conversation
      • Customization
      • Localization
      • Logout
      • Installation
      • Authentication
      • Push Notification
      • Conversation
      • Customization
    • Formito
      • basics
        • Getting Started
        • Variables
        • Are you GDPR ready?
        • How to prefill the values of my chatbot?
      • connect
        • How to connect Formito to Zapier?
      • convert
        • How to convert old formito chatbots to the new version?
        • How to convert Google Forms into a chatbot?
        • How to convert a Monday.com board to a chatbot?
        • How to create chatbot from QuickBase table?
      • guide
        • How to add my chatbot to WordPress?
        • How to create a chatbot for Zendesk?
      • shopify
        • How to embed my chatbot into a Shopify page?
        • How to display Formito chatbot on bottom corner of my Shopify store?
        • How to open my chatbot after clicking on links or buttons?
    • Stonly
  • Flex Stuff
    • App
    • APIs
    • Database
    • Website
    • Design
    • Style Guide
  • Content
    • Guides
    • ChatBots
    • Blogs
    • Whitepapers
  • Company
    • About us
    • Brand
    • Roadmap
    • Policies
  • Flex Together
    • Overview
    • Fair Finance
Powered by GitBook
On this page
  • Format Image Size and Shape with Templates
  • Image File Type Formatting

Was this helpful?

  1. Documentation
  2. Xano
  3. data-manipulation

Images

PreviousFiltersNextExpo

Last updated 4 years ago

Was this helpful?

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.