Is there a way to take advantage of Webflows responsive image feature via HTML embed?
I’m using a lazy load plugin to serve my CMS images using the markup: <img src="placeholder.jpg" data-src="image.jpg">. I’d like to create a srcset and sizes for each image automatically in an attempt to decrease my load times (like shown in the Webflow blog post below).
Is there a custom code solution to tap in to this feature? It would be perfect if I got this working with my lazy load.
Thanks!
Why not using regular (Webflow) image? and lazy loading. Please add the code/library of you lazy loading.
I guess no way to do so (Each image with other variants depend on the “default size”).
Anyway, no problem to mix webflow with any lazyloading library.
This can’t be a regular image because the lazy load uses data-src to call the image and you can’t change the webflow img source from src.
I’m using yall.js
You understand that Webflow automatically creates additional responsive images from your source image and serves them up using the img srcset property automatically, right? Or am I missing something.
As I noted in my post, I am serving images from data-src to the src after the page is loaded. So the original src is not the image, but a placeholder. Taking a look in the inspector shows that there are no responsive image sizes showing:
<img src="https://uploads-ssl.webflow.com/img.png" class="item__img" data-src="https://uploads-ssl.webflow.com/img.png">
The issue is “automatically”. For images placed on a page, using the image element, webflow auto-populates the sizes and srcset attributes. Browses will load the initial image in src, then if a bigger image is available, load that. So this part is happening on the page load.
Now, let’s assume you wanted to add lazy loading behavior to images. Webflow is not creating a data-src, data-sizes, and data-srcset attributes for you. If it did, you could just add the script, initialize it and go. There is a wishlist you could vote on. > Add option to 'lazy-load' images to improve load | Webflow Wishlist
You can use javascript to copy the attributes of the targeted image src to data-src, and so on but the images have already been loaded by the browser. So there really is no point as there is nothing left to lazyload.
Another way would be to load a target image up to a page so you can see the source, copy the HTML, go back and paste it into an embed, and change the attributes name(s) and set the placeholder src.
This would be very painful to do with lots of images. If the page was in a cms template, you could opt to use data stored in fields for the correct values, but you would still need to fetch them.
Right now I think the best option would be to use a third-party service to handle the generation and serving of the images for you. Cloudinary, for example, has a feature to that allows you to upload one high resolution image to Cloudinary, and have it automatically adapted to the resolution and size appropriate to each user’s device or browser on-the-fly.
With a third-party solution, you still need to add custom js code, and HTML embeds, after loading the images to the third-party.
Webflow should just give us a switch to enable the data-attributes we need, and switch the name of src to data-src, sizes to data-sizes, srcset to data-srcset. Of course, if the lazy loading script was not loading, you would have a problem. They could just add the code to the webflow.js core.
That is the current state of affairs based on my inspection.
I should also point out that Webflow doesn’t use size or srcset with src images inside of an HTML embed (<img src="img.jpg">). So the problem isn’t even about Lazy Loading, it’s about HTML embed <img> tags not being responsive enabled.
You would need to get the HTML off a published page. Not in the designer or preview. Since you would be referencing images that webflow did generate, you can use them anywhere, including HTML Embeds.
BTW: I was deep diving another services docs you may want to look at. I have a pending project that requires lazy loading and responsive images that can be sized and manipulated (color, shape, cropping on faces) on the fly. I tested it, and it does what I need.
Consider the disastrous implications if webflow modified custom code.
This looks interesting. I assume you still need to upload all of the image sizes into the CMS though? Would you be able to share more info about how to get this hooked up to Webflow, possible share a test link that shows your setup?
No, with imgix, you are simply calling the same high resolution source image (located on a source you set up) with dynamic parameters, which renders a different version on the fly, then it caches that on its CDN.
So anywhere you can use an external image path, it would work. As I said, that is nowhere except for embeds.
The docs are the docs, so that is the reference. I would be using the service I am paying for to demo it here.
In your case you might want to look at this;
So if you link in the CDN then any img that uses data-src will automatically be sent to their servers and distributed to size?
What does your embed code look like for your image? Can you show a screenshot of your image markup?
<img src="https://yoursource.imgix.net/imagename.jpg?w=320"
data-src="https://yoursource.imgix.net/imagename.jpg?w=400 400w, https://yoursource.imgix.net/imagename.jpg?w=900 900w,
etc...
>
And if that’s too much work, check out the JS Api. It can do it for you on the fly.