Watch a live product demo 👀 See how Sanity powers richer commerce experiences

How to Generate an Image URL Using Auto=Format

6 replies
Last updated: May 6, 2022
Hi, quick question:when generating a url for my images in the front-end there’s the option to use
auto=format
to automatically use
webp
as image format if the browser supports it. is there a way to specify a fallback format (eg i want to use
jpg
if the original image file is uploaded as
png
) if the browser doesn’t?
May 5, 2022, 12:12 PM
Nah. If you want to use JPG because your image doesn’t need transparency, upload it as JPG in the first place instead of PNG. 🙂 The tool cannot know whether you need the transparency or not, and there is no argument to enforce a format as far as I know.
May 5, 2022, 12:13 PM
you can force formats with the urlBuilder
$urlFor(image.asset).format('jpg')
and a lot of clients just want to be able to upload images no matter the format. transparency doesn’t matter in most cases. (but i would generally agree
🙂)
May 5, 2022, 12:34 PM
Oh that's neat, I forgot about the URL builder. I wasn't aware, apologies. Thanks Bastian! ❤️
May 5, 2022, 12:48 PM
Not that I am aware of
user U
, no. Outside of the
auto
or
fm
URL parameters there isn't anything like what you are asking for to my knowledge.
May 5, 2022, 11:22 PM
You may be able to handle this depending on use case through client side logical conditionals, but this is not ideal from what you are seemingly looking for 🙇‍♂️
May 5, 2022, 11:28 PM
it probably doesn’t even matter anyway. the 2.5 people still using a browser that doesnt support webgl probably have different problems than downloading 200kb more because they are being served a PNG instead of a JPG… 😄 thanks
May 6, 2022, 10:09 AM

Sanity.io – build remarkable experiences at scale

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

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing