Is Webflow image variants really that effective?

Design help General
1

Hi there,

I am still struggeling with this image performance thing.
Should I use a lazy loading technique for my content or not ?

I found a very interesting article from Webflow, explaining why they precisely don’t use the placeholder technique to load their picture faster but it seems that the automatic variant generation with progressive image loading isn’t really that effctive or is it ?

I made two similiar project, one with webflow native srcet generation and another one with custom srcset attribute and a lazy load script to swap the src placeholder with the highres retina ready picture defined in the data-srcset.

Eventhouth the difference is really small in my example, I think it would make a huge difference on a super long feed. Lighthouse is giving warnings regarding the offscreen pictures that seem to be taking more time to load than with the lazy loading technique.

What are your thoughts on that ?

Read-only link for Webflow native image variant
Read-only link for Lazy Loading technique

Thank you ! :slight_smile:

Some screenshots of the benchmarks:

Lazy loading

Screenshot%20(1167)
Screenshot%20(1167)1920×1080 117 KB

Webflow image variants

Screenshot%20(1166)
Screenshot%20(1166)1920×1080 117 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

The approach that makes the most sense, will be based on the potential page layout you are planning on creating and how many images / media elements you are trying to force the browser to load. The largest unknown variable will be the client connection.

The specs for SRCSET are clearly defined, and since browsers have implemented them, they believe that they are beneficial for most use types. So do site engines that implement it, like webflow.

If you are building a pinterest or instagram type site feed displaying hundreds of images, the user would benefit from lazy-loading the media.

You have to look at your audience, their target devices, connection speed, and behavior with the content, and what content to answer the question.

If you focus on just Google guidelines (which they don’t even follow or can’t half the time themselves), you miss the bigger point about optimizations. People do not want wait for content. They want fast responses and they won’t wait. Slamming the browser with a boatload of media elements and 20MB+ pages, can kill conversions. I could tell you stories…

4 Likes