Formidable Forms

Formidable Forms

  • Features
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Njones35 / Last Updated August 3, 2021

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!


Client-Size Image Resizing for faster WordPress Forms

The importance of fast image uploading

client-side image resizing with Formidable upload fieldsI 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.

Formidable Forms is the best WordPress Form Builder plugin. Get it for free!

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?

automatic image resizing on upload in WordPress forms

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 WordPress 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.

image resize options in the Formidable Forms upload field

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 online calculator forms and conditional logic. Check out the form creator plans to pick the perfect package for your needs.

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Comments

  1. ruslanjon says

    May 4, 2018 at 4:30 am

    goon news

    Reply
  2. trevellyan says

    May 31, 2018 at 3:40 pm

    Nice! I just enabled this on a site where customers were abandoning the form due to delays and timeouts with uploading.

    Reply
  3. flaresys says

    September 6, 2018 at 6:51 am

    Very good news! Thanks for such a great update.

    Reply
  4. wsu says

    December 14, 2018 at 12:51 am

    Is this feature supporting with contact us 7 forms and WCK forms? Thanks

    Reply
    • Nathanael Jones says

      December 14, 2018 at 2:02 am

      No - this only works with Formidable Forms.

      Reply
  5. miki says

    January 25, 2019 at 6:05 am

    hello, this feature is available with wich plan? is the "personal" plan enough?

    Reply
    • Nathanael Jones says

      January 25, 2019 at 7:24 am

      Yes, this feature is included in all paid versions of Formidable.

      Reply
  6. Roger Rowles says

    February 19, 2019 at 12:04 am

    Holy cow. This is amazing.

    Reply
  7. Wei says

    August 28, 2019 at 4:18 am

    Does this only work with WordPress? I've got a website built with Java.. Anything for that? THanks!

    Reply
    • Nathanael Jones says

      August 28, 2019 at 11:32 am

      Sorry Wei - this only works with WordPress & Formidable forms.

      Reply
  8. Cary Chandler says

    May 6, 2021 at 4:02 pm

    This is fantastic! It looks like un-cropped, portrait-mode iPhone images get rotated by default when this setting is on. Is there a way to prevent that ?

    Reply
    • srwells says

      May 13, 2021 at 1:47 pm

      Thanks for letting us know. We'll have to look into this to see if there is a way to prevent this in the future.

      Reply
      • Vas says

        January 15, 2022 at 9:43 pm

        Hi, this still appears to be a problem. Any progress on this?

        Reply
        • Nathanael Jones says

          January 16, 2022 at 6:50 am

          Hi Vas,

          This issue is related to EXIF data in images and how different devices handle it (Apple devices are the main culprit). It isn't specific to Formidable - this is a core WordPress issue.

          Since WordPress 5.3 there has been functionality built into the WordPress core to fix this issue - so if you are running an older version of WordPress, simply updating may resolve your issue.

          If you are already running a newer release of WordPress, then I would recommend trying this plugin: https://wordpress.org/plugins/fix-image-rotation/

          Reply

Leave a Reply Cancel reply

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

Get Email Updates

Popular Resources

    • How to Create a Searchable Database on a WordPress Site
    • Create a WordPress Custom Calculator: Easy, Powerful Results
    • How to Create a Fitness Tracker in WordPress
    • Formidable Views: The Best WordPress Custom Application Plugin
    • How To Require Email To Download Files in WordPress
    • How to Create Conditional Drop Down Lists in WordPress Forms
    • The Best Gravity Forms Alternative: Formidable Forms vs Gravity Forms
    • How to Make a Quiz in WordPress
    • WPForms Alternative: Formidable Forms vs. WPForms Compared

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Forms
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directories
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews