Client-Side Image Resizing for Faster Form Submission

Fast websites give users a better experience and convert more visitors. Now Formidable offers client-side image resizing - a way to dramatically speed up your WordPress form image uploads!

The importance of fast image uploading

I recently discovered first-hand the difference that fast file uploading can make. The project was a mobile-optimized pay per post classified ads website. My client wanted to allow each new listing to have up to ten images attached.

During the initial testing we realized that the average size of each smartphone photo is between 4mb and 6mb. When a new listing was submitted, up to 60mb of data had to be uploaded. On a mobile internet connection this often took over three minutes and server timeouts became an issue!

A three minute delay on any online form is unacceptable. It would mean lost users and lost sales. We started looking for ways to resize images in the browser before upload. Using client-side image resizing we managed to get that three minutes down below 20 seconds.

You don't need full resolution images online

Modern camera technology is amazing, with even smartphones producing professional quality images. High resolution images are sharper and more vivid than ever before. Modern iPhones have 12 megapixel cameras that produce stunning images. I recently saw an Asus phone with a 23 megapixel camera!

Will a reduced resolution look bad on your website?

Simply put - No! Full resolution images are only needed for print applications, not for on-screen use. Even modern screens cannot display every pixel. Ultra HD 4k screen resolution is only equal to 8.3 megapixels. Most websites today are optimized for "Full HD" 1080p screens - the equivalent of a 2 megapixel image.

With these resolutions in mind, think about how much screen space your images will be using. Most images will not be full page width, so you can drastically reduce the image size, with zero negative impact on your website.

What is client-side image resizing?

Because of the emphasis placed on page load times, it's easy to dismiss upload times for online forms. But any long delay, regardless of its reason, is bad for user experience. The new feature of the Formidable upload field resizes the image dimensions right in your user's browser. This happens before the upload process to the server even begins.

Since v3.01, the Formidable upload field now has a setting to specify the maximum width or height for uploaded images. The system then resizes the images in the browser. Hey presto - an image that was 5mb is now a fraction of the size.

Speed isn't the only advantage of client-side image resizing. It also reduces the server storage space your website requires. For sites that rely on user submitted posts and content and get hundreds of uploads every day, this could mean a big reduction in hosting costs.

Faster uploads on your existing WordPress forms

It's easy to switch this feature on for existing forms. Simply open your form builder page and click on the upload field to open the field settings panel. Next, check the new "Resize files before upload" box, define your maximum image width or height, and save your form.

That's it! Check and see how quickly your upload fields submit.

** Pro Tip ** Web pages are designed to scroll vertically, meaning the height of the image is usually less important than the width. For this reason its often best to define the maximum width of images when resizing.

What about existing uploaded images?

This new feature only resizes new uploads, so previously uploaded images remain unchanged. That doesn't mean you should ignore old images though.

Optimize your existing images to save space on your server and help your pages to load faster.

There are many plugins and services available for this. Personally I use the service from Kraken.io for my websites but you should investigate which best suits your unique needs.

Read more: How to let users submit photos on your WordPress site

How do I get started with client-side image resizing in my WordPress forms?

The File Upload field is a Pro feature. Formidable Pro has many more amazing features that will transform your online WordPress forms.

Read more: 6 options to look for in a WordPress File Upload Form

If you're not using Formidable Pro yet, take a look at all the Pro features including field calculations and conditional logic. Check out the form creator plans to pick the perfect package for your needs.