how to combine responsive images with signed urls

Viewed 61

I am using signed urls for images but also would like them to be responsive. Do I really need to sign all size versions of the picture? It seems more efficient if first the actual size that will be shown is determined so I only need to provide a signed url for that image. Is there a common approach for this?

So e.g. this html:

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Would I need to sign all elva-fairy urls in the srcset?

1 Answers

Yes, you will need a different signed URL for each unique image. Signed URLs don't automatically resize or redirect to other objects in your storage bucket.

Related