Optimizing image file sizes in Studio and using URL parameters for width and format.

Hi everyone, happy Friday! 🎉
I wonder if someone can help me when it comes to images.

Some of the images we are uploading to Studio are very high res which results in file sizes of between 1 - 3Mb which is being downloaded client side and it obviously not good.

I am already appending URL parameters to the asset url and specifying min & max widths for the images, however this doesn't seem to optimize the file size of the image.

Is it possible to return an optimized file size for an asset or do we need to optimize the assets before uploading them to Studio?

Thank you.

Hi User! Our image pipeline should handle that for you. Intention is that you should be able to store your originals. You can force jpg, specify quality params and use

format=auto

to get

webp

for browsers that can handle it.

Thank . I am still however get an asset back that is 1 - 3Mb though as that is what we upload to Studio.

Have a URL?

hm. in chrome i’m getting that as a 200Kb webp file, but it’s still a lot of pixels. looks like you’re missing a

&

in the above and when I just give it a width I’m getting a scaled

webp

back https://cdn.sanity.io/images/r50v8e4h/production/6a912497854e88e7daa8fded79ac53247eb3af7e-4800x2400.png?auto=format&w=100

Thank you, . There was an

&

missing.
But what if I want a max width of 2000 in the smallest file size?
🤔

Instead of using an explicit width as per your example?

Unless you’re using this with a hotspot/crop and fit modes the server side won’t have any context on what size you actually want. 🤔

Thank you, .

If you want to use hotspot / crop functionality and have it depend on client display I’d use a helper to generate the right URL https://www.sanity.io/docs/image-url

Alternatively you could craft srcset URLs using widths/heights.