/ / / Control Image Sizes Automatically

Control Image Sizes Automatically

In this lesson you will learn how Image Hopper can be used to automatically control image sizes before uploading them to your form. This is a very useful feature so that you can:

  1. Ensure images are all the same size so they display consistently when viewed eg. when using GravityView
  2. Keep your bandwidth and storage costs lower than uploading and saving the full size images. It’s got the added benefit of faster uploads because images are resized in the browser and not on the server.
  3. Generating documents using Gravity PDF which don’t do well when trying to display more than 10MB worth of images.

In the Form Editor, select the Image Hopper field you added in the previous lesson. Now let’s take a look at the settings needed to control the image sizes:

General Tab

Downscale Images

Image Hopper Downscale Images setting

Image Hopper can automatically resize images to fit within the specific dimensions you’ve set, while respecting the aspect ratio. To do this, set the width and height (in pixels), and images will automatically be resized (but not cropped) to these values.

As an example, if a user uploads an image that is 1500x1500px, and you’ve told Image Hopper to downscale to 1280x720px, the saved image will be 720x  720px.

Crop to dimensions

Enable Crop to dimensions if you want to automatically resize and crop images to the exact size you’ve set in the Downscale Images setting.


If an uploaded image is smaller than the specified size, it will not be scaled up. However, it is possible to set a minimum image size or display a warning to users that their image is too small. Alternatively, you can use the Upscale to Crop Dimensions setting.

Output Quality

Image Hopper Output Quality setting

Image Hopper’s Output Quality settings can be hugely beneficial to businesses that demand high quality images to be submitted (such as photography, printing, etc).

You can set the Output Quality of JPG/JPEG images to a value between 0 (worst) to 100 (best). Aside from the image quality, the value used in this setting will also affect the file size of the uploaded image. Here’s an example:

Comparing High vs. Low image ouput quality

Uploading images in lower quality (right image) have more visible pixels compared to a higher quality one (left image). The lower the quality of the image is, the smaller the file size.

Advanced Tab

Enable Minimum Image Size

Enable Minimum Image Size setting

The Enable Minimum Image Size setting will prevent users from uploading any images smaller than the size you have specified. This is useful if you need to print digital photos because it forces your users to submit images in a higher resolution.

Image smaller than specified size is prevented

Enable this so you can indicate the minimum width and height requirement (in pixels) in the provided fields.

Enable Minimum Image Size Warning

Enable Minimum Image Size Warning setting

Unlike the Minimum Image Size setting, when you enable the Minimum Image Size Warning, it won’t prevent any images being uploaded. Instead it displays a message below the Image Hopper field warning a user that the image is a lower quality than you have set.

Minimum Image Size Warning displayed at the bottom of the image

You can combine the Minimum Image Size and Minimum Image Size Warning settings together with different sizes.

Upscale to crop dimensions

Upscale to crop dimensions if image is too small setting

This setting will only be available if Crop to Dimensions is enabled. Turning this on will allow Image Hopper to automatically upscale images to fit the size you’ve set in Downscale Images. Upscaling does negatively affect the image quality. See examples below:

First example of an upscaled image