What is the correct input for the 'data-original attribute' in Webflow?

When integrating lazy loading of images into a Webflow project, understanding how to use the data-original attribute is essential.

​

1. Understanding the data-original Attribute

• The data-original attribute is generally used to store the original source URL of an image that will be loaded later (lazy-loaded).
• Typically utilized in custom scripts to enhance image loading performance by deferring the loading of offscreen images until a user scrolls near them.

​

2. Correct Input for data-original

• Store the Original Image URL: Assign the actual URL of the image you want to lazy load. For example, if the image URL is https://example.com/images/photo.jpg, this URL should be set as the value of data-original.
• This attribute acts as a placeholder until the image is actually required to load.

​

3. Implementing Lazy Loading with data-original

• Modify Your Image Tag: Typically, you would have an image tag that looks like this <img data-original="https://example.com/images/photo.jpg" alt="Descriptive Text">.
• Include Lazy Load Script: To make use of data-original, include a lazy loading script that reads this attribute and updates the src attribute of the image tag when it's time to load the image.

​

4. Using in Webflow

• Custom Code Embedding: Often requires embedding custom JavaScript in the project’s settings or on a page to manage lazy loading functionality.
• Ensure Webflow offers image attributes or embed options to add data-original correctly without conflicting with other Webflow-native attributes.

​

Summary

The data-original attribute is used to store the URL of the image intended for lazy loading. Set this attribute with the actual URL of the image, and ensure you incorporate or integrate a lazy loading script to swap the data-original URL into the src attribute during runtime.