Table of Contents

How to Automatically Resize Images

Danielle Kellogg Updated by Danielle Kellogg

Image fields support automatic image resizing when the image is uploaded. This means you can automatically resize images to a web friendly size or a custom size when they are uploaded. This is great for ensuring all images are a uniform size and reducing the over all storage in the app.

Scenario

You’ve got a form where users can upload images from their smartphones. But you’ve noticed that many of the uploaded images are huge and taking up a lot of storage space. It would be great if you automatically resize images when they are uploaded.

Requirements

For this scenario, you will need an image field type in your app. You can read more on image field types here.

If this your first time creating an app, you'll need to know some basics about adding objects, fields, pages, and views. You can start by reading our Builder Basics section. 

Other good resources can be found in our designing the database and building pages sections of the knowledge base.

Steps

Enabling image resizing will retroactively resize any images already in your app, in addition to resizing new images on upload.

Select the Object with the Image Field

In the Schema section of the Builder, select the object that contains the image field you want to resize. If the image field doesn’t already exist, create a new one.

Edit the Image Field Settings

Click on the more options icon (the "..." icon) and click on the settings to open the field editor.

With the field settings open, check the "Resize Image" checkbox. This will allow you to select the dimensions to resize the images, either a web friendly size or a custom size.

  • Resize Image: If checked, this will automatically resize images on upload.
    • Web friendly: resizes the image to a web friendly size with a maximum width and height of 1500px
    • Custom: allows you to define a custom with and height

That's it! Once the resize image option is enabled all existing images in your app will be resized to the new size and any new images added will be resized on upload.

Notes

Thumbnails

It is also possible to create different sized thumbnails (smaller versions of an image) to be used throughout your app, without needing to resize your original image. You can read more on creating thumbnails here.

How did we do?

How to Limit an Uploaded File’s Size

Contact