How to Automatically Resize Images

Hey everyone, it’s Danielle from Knack here. Today, I want to show you how to automatically resize images in your app.

There are a few important reasons to do this:

1. Uniformity – It’s helpful to make all your images a consistent size.
   For example, in this real estate listings app (one of our templates), the listing images are all different sizes. That’s okay—but uniformity looks much cleaner.
2. Storage Efficiency – If you’re running a mobile workforce app where users upload photos from job sites (like receipts or invoices), images from smartphones can be really large, which adds up quickly in your app’s storage.
3. Performance – Large images can significantly slow down page load times, especially if you’re displaying many of them in a list or table. Resizing those images can improve performance across your app.

Step-by-Step: Resizing Images in the Builder

Step 1: Go to the Image Field in the Schema

Let’s start in our listings table where we saw the mixed image sizes. To resize, we’ll:

• Go to the Schema section
• Locate the object where the images are stored (in this app, it’s the Images object)
• Find and click on the image field

Now we’re in the field settings.

Step 2: Enable Image Resizing

Scroll down and select “Resize Image.”

Important Notes:

• All existing images will be resized, as well as any new images uploaded after this setting is enabled.
• Resizing affects the original image file, so make sure this is what you want before saving.

Resize Options:

You’ll see two choices:

1. Web-Friendly (Default):
   Knack automatically resizes large images to a more optimized size for faster page loads.
2. Custom Size:
   If you want a specific image dimension, you can set it manually.
   In this example, we’ll resize images to 600 × 600 pixels.

Thumbnails vs. Resized Images

Before we save, let’s talk about thumbnails—they’re different from resizing.

• Thumbnails allow you to display smaller versions of your images in different parts of your app.
• However, they don’t affect the original image file.
• If you need multiple image sizes throughout your app, consider using both resizing and thumbnails.

Now let’s go ahead and save this resized field.

Live App Results

Once updated, head over to the live app and refresh the page.

You’ll now see the image field has resized your uploaded images. The new dimensions (600×600 max) are applied, and while some may appear smaller (due to their original size), the overall result is a more consistent layout.

Wrap-Up

And that’s it!

Your images are now resized for better performance, storage, and consistency.

You can still use thumbnails to show alternate image sizes across your app.

Thanks for following along—and until next time, happy building!