How to optimize image file sizes in Sanity Studio beyond width parameters?

Good news! You're on the right track with using URL parameters, but you need to add a couple of key parameters to properly optimize your images. The file sizes you're seeing are large because you're only specifying dimensions without compression optimization.

Add Quality and Format Parameters

The most important parameters for reducing file size are:

1. auto=format - This automatically serves the most optimized format (WebP/AVIF) based on browser support
2. q=75 - Controls compression quality (0-100, default is 75 for JPG/WebP)

So instead of just:

?w=800&h=600

Use:

?w=800&h=600&auto=format&q=75

Example with Lower Quality

If you need even smaller files, you can reduce the quality parameter:

?w=800&h=600&auto=format&q=60

Quality around 60-75 typically provides a good balance between file size and visual quality.

Using @sanity/image-url

If you're using the @sanity/image-url helper library, you can do this programmatically:

import imageUrlBuilder from '@sanity/image-url';

const builder = imageUrlBuilder(client);

const url = builder
  .image(imageAsset)
  .width(800)
  .height(600)
  .auto('format')
  .quality(75)
  .url();

What These Parameters Do

• auto=format: Automatically returns WebP for supported browsers (much smaller than JPG) and can even serve AVIF for newer browsers (even smaller than WebP). This is determined by the browser's Accept header.
• q (quality): Controls compression - lower values = smaller files but more compression artifacts. Defaults are 75 for JPG and WebP.

Additional Optimization Tips

• Use fit=max if you don't want to scale images UP beyond their original size
• Consider using responsive images with different sizes for different screen sizes
• The CDN automatically caches transformed images, so subsequent requests will be fast

Important Note

You don't need to optimize images before uploading to Studio - Sanity's image pipeline handles all the optimization on-the-fly through these URL parameters. This is actually one of the key benefits of using Sanity's asset CDN! Upload high-resolution originals and let Sanity's CDN serve optimized versions based on your URL parameters.

The combination of auto=format and an appropriate quality setting should significantly reduce your file sizes from 1-3MB to much more reasonable sizes for web delivery.