Optimize and Offload Uploaded Files with Gravity Forms

Automatically optimize images and offload files uploaded through Gravity Forms.

wordpress image optimization

This article requires GP Media Library and GP File Upload Pro.

Buy Gravity Perks today and get 47+ premium Gravity Forms plugins, including these perks!

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:

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:

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.

File Renamer Settings in action!

Further Optimization with EWWW Image Optimizer

EWWW Image Optimizer adds additional options for optimization, customization, and file 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.

Comments

    1. Samuel Bassah
      Samuel Bassah Staff January 24, 2024 at 7:52 am

      Hi Victory,

      Currently, this doesn’t work for files already uploaded and not in the media library folder.

      Best,

  1. Jeff Hester
    Jeff Hester March 6, 2023 at 6:11 pm

    We have a CPT created via GF. We’re currently using multiple “Post Image” fields, which also uploads to the Media Library and associates the image to the newly created post. This allows us to display a gallery of all associated photos on the post itself.

    I’ve love to have ONE upload field using GF File Upload Pro and maybe also the file renamer. Can files uploaded using Upload Pro be automatically associated with the post?

    Reply
    1. David Smith
      David Smith Staff March 6, 2023 at 9:34 pm

      Yessir, Jeff!

      1. Add a Multi File Upload field to your form.
      2. Enable File Upload Pro for the enhanced UX and functionality.
      3. Enable File Renamer to give the uploaded images a better naming convention.
      4. Enable Media Library to import uploaded files into the WordPress Media Library.
      5. Use this snippet to auto-attach the uploaded images to the newly created post.
  2. Matthew Cowan
    Matthew Cowan October 26, 2022 at 1:58 pm

    Do you know if this will work for files already uploaded using the field, or if any additional work would be required? Or does this only work for files uploaded moving forward.

    Reply
    1. Ryan Donovan
      Ryan Donovan December 15, 2020 at 9:12 pm

      Hello Jerry, this would be found in your media —> Library. Click on one of the images and you should see the details.

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.

Grab a bundle of free Gravity Forms plugins

Enter your email and receive our most popular free plugins and snippets, plus access to hundreds of others.

This field is for validation purposes and should be left unchanged.