Image Resizing & Compression

Introduction

Hey everybody, it's Tim from Tadabase here. Today, we are shining a spotlight on image resizing and compression.

Image Resizing Overview

When you're uploading images to your database application, sometimes you may want to adjust the size of these uploaded images. For example, users might upload images that are too large, and you want to resize them upon upload, or even compress the image to save file storage.

Uploaded Images Example

In this demo, I have two images: one in landscape orientation and one in portrait orientation. Both are quite large and not fitting on my page the way I intended. If I need to resize these images, I can do that within the attachments field upload setting inside a form component.

Resizing Images in a Form Component

By entering the form component and selecting the image field, I can resize those images to a fixed height or width, or both. I can also adjust the quality. If you only set one parameter (either width or height), the aspect ratio will be maintained. For example, if I set 200 width by 300 height, the image will resize accordingly. In this example, I’ll set everything to a height of 300 pixels. Let’s remove these images and start fresh.

Applying Image Resizing

Now, inside my live application, I can upload the images again. You'll see that the file is resized to 300 pixels in height.

Image Compression

The last thing I want to show you is image compression. When uploading an image, you may want to reduce the quality to decrease the file size. Currently, the quality is set to 100. If I set it to something like 10—where zero is the lowest quality and 100 is the highest—the difference will be quite dramatic in the live application, but the file size will significantly decrease.

Conclusion

Thanks for watching, and we'll see you on the next one!