Optimize and Offload Uploaded Files with Gravity Forms

Overview

Optimizing and offloading your site’s media files is an easy way to speed up the performance of your site. In this short tutorial we’re going to show you how to set up WordPress image optimization and media offloading for files that are uploaded through Gravity Forms.

To handle this media magic, we’re going to use these three plugins:

• GF Media Library
• GF File Upload Pro
• WP Offload Media Lite

Let’s get started.

1. Install and Activate these Plugins
2. Configure WP Offload Media
3. Configure GF File Upload Pro
4. Enable GF Media Library

Step 1 – Install and Activate the Plugins

Let’s get started by installing and activating GF Media Library, GF File Upload Pro, and WP Offload Media Lite.

Once they’re installed, we’ll configure everything.

Step 2 – Configure WP Offload Media

The steps for setting this up will depend on which cloud provider you want to offload your files to. It currently supports Amazon S3, DigitalOcean Spaces, and Google Cloud Storage.

Follow these guides for setting up your provider:

• Amazon S3
• DigitalOcean Spaces
• Google Cloud Storage

Step 3 – Configure GF File Upload Pro

With your provider set up, navigate to any form with a File Upload field or add a new one. Navigate to the field settings and select the Perks tab. Then, select Enable File Upload Pro.

Then, select Enable Cropping. When cropping is activated on a File Upload Pro field, it automatically activates image optimization for any images uploaded to that field. This optimization happens even if the user doesn’t crop their image.

If you want further optimization, set Max Dimensions for images. File Upload Pro will automatically downscale any image files to within those maximum dimensions, further optimizing your image sizes.

Step 4 – Enable GF Media Library

Enabling GF Media Library is as easy as selecting the Upload to Media Library option in the Perks tab.

That’s it. Your files will now automatically be offloaded to your cloud storage provider, and if the file is an image it will be resized and optimized according to your settings.

Here I am uploading a 3 megabyte file that’s 4608×3456 pixels large.

And here it is resized, optimized, and hosted on Amazon S3 seconds after I click the Submit button.

Taking It Further

Rename and Organize Files with File Renamer

In addition to offloading and optimizing images, you can rename the files easily using GP File Renamer. Files are renamed before they are added to the Media Library, ensuring that the offloaded filenames match your preferred schema. You can use merge tags to rename files based on values submitted with the form entry. File Renamer also automatically depuplicates file names and gives you control over where the incremented value is located.

Further Optimization with EWWW Image Optimizer

EWWW Image Optimizer adds additional optimization, further customization, and additional format support. It can automatically convert images to WebP and supports compressing PDF files on top of JPG and PNG files. They even offer a paid service that includes features such as lazy loading, CDN support, and other great features.

There’s a ton more options in the settings for the plugin. I recommend having a look at the documentation for a deep dive in those.