Cloudflare image resizing with URL width help

We are trying to implement Cloudflare image resizing on a site built with Laravel. The dev team informed me they cannot do it with the image resizing because they don’t know the image width before the page is built. It is an ecommerce website and the product list page has the products at 250x250px on desktop while on mobile they get smaller and smaller. Do you have any tips on how to calculate the width? I imagine they should calculate the width based on the user device width and adjust all images via the URL method. Of course it would involve some calculations.

Thanks in advance for your help!

Determinating the perfect image size is definitely possible if they know what they do.
Just imaging your breakpoints are the ones from Bootstrap 5.1:

Breakpoint Class infix Dimensions perfect width of 50% wide image
X-Small xs <576px 288px
Small sm ≥576px 288px
Medium md ≥768px 384px
Large lg ≥992px 496px
Extra large xl ≥1200px 600px
Extra extra large xxl ≥1400px 700px

and your image takes up half of the width, then you can easily caldulate it. The height whatsoever depends on, if you like a fixed aspect-ratio and if so, which it is, but could be easily calculatable with one.

If it a a ecommerce page or a landingpage does not matter at all, webdesign is the same for all pages. The image sizes depends on the template and the used framework, eg, the brekapoints. Some pages do not have any brekpoints, there you still could know the perfect sizes of an image based on vw and vh, to implement it then you would need to define breakponts by yourself for the image, which defined on what screensizes it switches from one image-resolution to another.

3 Likes

If we implement with breakpoints wouldn’t it be the same as srcset? I thought we can get exact dimensions of the image.

right now for the product list we have:

  1. 1080p - 250px
  2. MacBook retina - 231px
  3. iPad pro - 224px
  4. iPad mini - 223px because now there are 3 pictures per row
  5. iPhone 8 - 177px

These dimensions I am measuring in the inspector. They advised we make all images with srcset but this will not be using the Cloudflare image resizing ( URL method or workers).

How do we go for this specific example? To use the URL method we have to define dynamically the image size via the url, but how to calculate the resulting picture width beforehand?

it could/should be implemented with srcset, yes. I prefer <picture> tag which are overloaded with additional media values which reflect how you want it to work.

Using an overloaded <picture> tag can use Cloudflare Images Resize. Take this as an example, how it could look: Responsive images? - #11 by M4rt1n

Thats the job of your webdevelopers. It is possible. But if they can do it, i can’t tell. Seems like your developers are not able to do it, judging from what I read.
And since I dont know your template/design etc I can’t do it for you eigther. But anyway, this is not a Cloudflare problem/bug etc. You have a problem, which is not related to Cloudflare, while using a Cloudflare product.

2 Likes

Yes it is not a Cloudflare but, I am trying to get help and I appreciate it from your side. The dev team is very good but haven’t implemented Cloudflare images so far.

Using an overloaded <picture> tag can use Cloudflare Images Resize. Take this as an example, how it could look: Responsive images? - #11 by M4rt1n

I am getting confused here. ‘Cloudflare image resizing’ has two options - URL format and web workers. ‘Cloudflare images’ - it is about srcset. With image ‘resizing’ you can specify the pictures’ sizes on the fly, while with the ‘images’ you have to commit to some fixed breakpoints. Also the ‘resizing’ is the paid option.

You are suggesting me to use the ‘images’ option which is easy to implement with the predefined values of the picture width/height. I already proposed we go with variants such as (70, 90, 110, 130, 160, 190, 220, 260, 300, 340, 390, 450, 500, 550, 610, 670, 730, 800, 940, 1000 ).

We are trying to use the paid option but have trouble calculating the width. Is there any easy way to do that? It is huge work to calculate for each and every image type (we have around 12) because their sizes change based on the media queries. (e.g 4 pictures per row or 2 or 3 pictures). From there of course it can be calculated when you know the device width, the amount of padding and number of pictures per row.

And thats how it is done. Like I said: since I don’t know your website/tenplate and CSS code I can not provide you with anything you could need.

Actually it’s never easy, but it’s doable.

Thats the job of your webdevelopers. Also this does not have anything to do with Cloudflare Images itself.
Calculating the perfect image resolution for the frontend is not related to Cloudflare Images. I see that you do have that requirement/request, but it simply is not part of it.

I know, I never stated anything else. It’s not easy, and once done it would be a lot to calculate in the head, thats why you should automate it.

Thanks for understanding.

1 Like

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.