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.
- Install and Activate these Plugins
- Configure WP Offload Media
- Configure GF File Upload Pro
- Enable GF Media Library
Once they’re installed, we’ll configure everything.
Follow these guides for setting up your provider:
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.
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.