🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

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

11 replies
Last updated: Nov 26, 2021
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.
Nov 26, 2021, 8:44 AM
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
to get
for browsers that can handle it.
Nov 26, 2021, 11:46 AM
user A
. I am still however get an asset back that is 1 - 3Mb though as that is what we upload to Studio.
Nov 26, 2021, 12:48 PM
Have a URL?
Nov 26, 2021, 12:49 PM
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
back https://cdn.sanity.io/images/r50v8e4h/production/6a912497854e88e7daa8fded79ac53247eb3af7e-4800x2400.png?auto=format&w=100
Nov 26, 2021, 1:07 PM
Thank you,
user A
. There was an
But what if I want a max width of 2000 in the smallest file size?
Nov 26, 2021, 1:11 PM
Instead of using an explicit width as per your example?
Nov 26, 2021, 1:11 PM
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. 🤔
Nov 26, 2021, 1:14 PM
Thank you,
user A
Nov 26, 2021, 1:14 PM
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
Nov 26, 2021, 1:15 PM
Alternatively you could craft srcset URLs using widths/heights.
Nov 26, 2021, 1:16 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?