Image Choices Lazy Loading for large forms

With the latest updates to JetSloth’s Gravity Forms Image Choices Add-on, we’ve included a highly requested feature, Image Choices Lazy Loading – to help with users that have lots of image choices in their forms.

If you’re already using a lazy loading plugin or have enabled lazy loading in an optimisation/caching plugin such as WP Rocket, you may have noticed that they don’t get applied to images in Gravity Forms, or in your Image Choices due to the way these are rendered. We realise that images usually make up the largest part of a page load, so we’ve finally tackled it with a dedicated implementation of lazy loading for image choices. Long overdue, we know.

We’ve helped reduce users page load times by half with this clever little feature just added to Gravity Forms Image Choices.

Image Lazy Loading in Image Choices

For anyone not aware, lazy loading is the practice of delaying a load of resources until they’re actually needed, to improve performance and save system resources. Lazy loading reduces page weight, allowing for a quicker page load time. It conserves bandwidth by delivering content to users only if it’s requested. And it conserves both server and client resources because only some of the images actually need to be rendered.

We’ve helped drastically reduce some customers page load times with this clever little feature just added to Gravity Forms Image Choices. In one instance, with several hundred image choices, the initial page size went from approx 6Mb down to just over 1Mb by simply enabling this new setting

How to activate lazy images in your Gravity Forms

It’s fairly simple to get your form lazy loading your images in Gravity Forms. Firstly, update to the latest version of Gravity Forms Image Choices form your WordPress dashboard. From version 1.3.21 onwards, Image Choices now includes image lazy loading as an option. See the changelog for more updated details.

Once updated, go to your forms settings screen and navigate to the Image Choices settings. Activate the image lazy loading setting from the settings screen as seen below.