"serve responsive image" ... error

Design help Custom code
1

Hello dear all :slight_smile:

I am trying to find solution to optimize to the maximum the loading time of a future website. I have found a realy interesting article from google dev team regarding various azy loading techniques. I used one of those within webflow and it seems to work super fine.

When I however analyze the website with the web.dev measurement website from Google (I believe) i have errors telling me to serve responsive images… I thought Webflow would do that for us ? I thought when we’d upload a high res picture, Webflow would create subsets of that pictures that would be then served depending the device the user is using.

Is that not the case ? Should I really use custom attribute like:

data-srcset="small.jpg x1, big.jpg x2"

I have checked similar posts but it seems the issue hasn’t been resloved yet.

Screenshot%20(1112)
Screenshot%20(1112)1920Ă—1080 103 KB

Thank you for your help !
Anthony

Here is my read-only link:
https://preview.webflow.com/preview/lazyload?utm_source=lazyload&preview=5977c81161805de94bf7f2d257e76c93

2

It did on the first image.

<img src="https://uploads- 
ssl.webflow.com/5c7fec401d33846019f9fc4e/5c7fee691d33846824fa0646_5_x1.jpg" 
alt="maison" srcset="https://uploads- 
ssl.webflow.com/5c7fec401d33846019f9fc4e/5c7fee691d33846824fa0646_5_x1-p-500.jpeg 
500w, https://uploads- 
ssl.webflow.com/5c7fec401d33846019f9fc4e/5c7fee691d33846824fa0646_5_x1-p-800.jpeg 
800w, https://uploads- 
ssl.webflow.com/5c7fec401d33846019f9fc4e/5c7fee691d33846824fa0646_5_x1-p-1080.jpeg 
1080w, https://uploads- 
ssl.webflow.com/5c7fec401d33846019f9fc4e/5c7fee691d33846824fa0646_5_x1.jpg 1400w" 
sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px">

The other images is what Google’s web.dev is complaining about. No src defined means no automatic srcset image generation on the webflow side.

3

Hi @webdev,

Thank you so much for getting back at me !
Does that mean I have to manually specify data-srcset="big.jpg 1400w, small.jpg 500w" etc… so that the lazyload script can serve different images widths for different devices ?

May I also ask how you founf the code you mentioned with the listing of all sizes ?
Help always appreciated ! :slight_smile:

Thank you !

4

For sake of simplicity, let’s suppose I wish to serve two images, one for desktop and another one for smartphone. Would something like this work ?

<img src="placeholder.jpg" alt="hello"
srcset="lazyimage-p-500.jpeg 500w, lazyimage.jpeg 1400w"
sizes="(max-width: 767px) 100vw, (max-width: 991px) 728px, 940px">

Would you what those three sizes arguments refer to ? If I wish to serve only two responsive images, I would only need two sizes argument ?

Thank you ! :slight_smile:

5

Yes. If you want to lazy load images, you need to handle the generation of the code. You won’t be able to lazy load via srcset.
If an image has a srcset propery, the browser is going to load the image specified for its viewport.

Browser inspector/developer tools.

I was working to address this for another client, and settled on using a third party service / CDN for embedded images with a JS API.

1 Like
6

@webdev mmh very interesting indeed ! I had a quick look and imgix sounds quite promising. Did you use lazysizes to lazy load your images aswell ? The documentation of imgix mentioned that library which seems to be more flexible than the simple lazy load script article I found on Google Dev: Fast load times

From your experience and perspective, before I go further in my research - is it possible to combine imgix and lazysizes within a webflow project ?

Thank you for you help ! :slight_smile:

7

I believe my question could be edited that way :

Is it possible to use the srcset images generated by Webflow so that lazysizes progressively and responsively serve those images depending on the device the user is using ?

An idea would be to use a custom data attribute “data-placeholder” for each images where a low res picture would be manually loaded so that we can use the main src attribute which webflow would then transform into various srcset images to be used by lazysize…

Is that a mad, insane, lunatic idea ?

8

The problem is that your lazy loading script is running after the page loads, and the browser is already downloading images. This is why all references to lazy loading leverage a data attribute(s).

The API link I sent you includes information on lazysizes.

The issue in webflow is all of this will need to be done with custom code. Every image will be an embed. The upside is the amazing array of manipulations you can do to images on the fly. Look at the image API. I use this inside of custom apps and I am building a photography site with this service as well because I can specify each atrribute I want per breakpoint without having to create multiple images. All from one image source.

1 Like
9

Interesting ! Thank youf for sharing your thoughts @webdev !

EDIT: imgix isn’t free of charge, as all transformation transit through their servers right ?

I’m trying to build a really simplified prototype using imgix.
I’m diving into the doc though, and can not understand how they generate higher resolution images from a small one ? To me, it looks like they are multiplying the resolution of a lowres image to get twice respectively three time the original resolution. It surely can’t be ?

Screenshot%20(1122)
Screenshot%20(1122)1186Ă—925 183 KB

10

It’s not free, but pretty cheap versus my time.

You upload your high-resolution image to your source. I use an s3 bucket. I then reference the imgix path for my source and file with any transformations I desire. Those are created on the fly and then served from their CDN. You can control whether a can be scaled larger than original.

My source files are much larger than what I need them to be, the DPR reference is a way to auto scale images for retina displays. In that example the image w=400&dpr=3 would be 1200px. My source is larger than that so no issue. If I don’t want the image to scale larger than the source (which it could do) then I would add &fit=max

Using the fit=max parameter on an imgix URL will ensure that an image is never delivered larger than its original size. This way, when requesting a dpr=3 image, there won’t be any image extrapolation. Read more about fit in the documentation.

This is what I am doing.

Added text fields to CMS collection. rimage1, rimage2, rimage3, for example. These are holders for a html block. Each block is a precoded (off wf) set of parameters for a responsive image, with lazy loading (if I want) or just srcset attributes with sizes. I generate the code block in a local app, then push the value to the field via the API. The template simply has HTML Embed blocks in the layout. Boom.

I can also just generate a path to a regular image and push that with the API. Webflow takes that image as the source and then copies it to their CDN renamed. Then they create responsive images from that if it is displayed in the template as a normal image.

My embed use case is this. I am creating images that can’t be copied and dropped on a general CDN as there are copyright restrictions on how they can be used. I don’t want to wast time making varients manually. This way I don’t ever give the image to webflow. I am serving it, and I control its distribution and lifecycle and I can create endless variations from one image like black and white, cropped to a face, the whole enchilada.

This opens up the use of WF for me with much larger projects that are media rich. I already manage assets, I don’t need webflow to do it for me. My media management systems are more sophisticated (I track source, endpoints, metadata, lifecycle and more).

As a professional photographer, I license my work to clients. This also allows me to control my copyrights and puts me in charge.

2 Likes
11

This is so interesting !!

Ok I need some time to wrap my head around that API and how to imlement it within a Webflow project. I am at the moment struggeling with some of the most basic concept… I set up a Google Cloud account, hosted an image, made in public, set up an imgix account aswell, connected it to my Google Cloud with all secret keys required but still no image to be seen in this simple use case in codepen: https://codepen.io/anthonysalamin/pen/XGRZzj

I need to dig some more :slight_smile:

Anyway, thank you so much for your input ! Precious infos right there !

12

Your pen is close. Change your html → 

<img
  ix-path="/further-design/f_25p_x1.jpg"
  ix-host="storage.googleapis.com"   
  ix-params='{
    "auto": "compress,format"
             
  }'
  alt="image test"
>

which will automatically create …

alt="image test" sizes="100vw" srcset="https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=100 100w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=116 116w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=134 134w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=156 156w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=182 182w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=210 210w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=244 244w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=282 282w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=328 328w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=380 380w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=442 442w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=512 512w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=594 594w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=688 688w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=798 798w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=926 926w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=1074 1074w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=1246 1246w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=1446 1446w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=1678 1678w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=1946 1946w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=2258 2258w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=2618 2618w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=3038 3038w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=3524 3524w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=4088 4088w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=4742 4742w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=5500 5500w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=6380 6380w, https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress,format&amp;ixlib=imgixjs-3.4.0&amp;w=7400 7400w" src="https://storage.googleapis.com/further-design/f_25p_x1.jpg?auto=compress%2Cformat&amp;ixlib=imgixjs-3.4.0" ix-initialized="ix-initialized">
2 Likes
13

Thank you so much @webdev !!
Time to explore the possibilities of imgix now :slight_smile:
have a great weekend !