Issue with bg parameter in Sanity image URL library for converting PNG to JPG

Hey all, thanks for the awesome platform! Love using it in a few of my projects. I have a question about images - if I convert a transparent png to a jpg on the fly, does the bg param not apply to the flattened image? Can’t seem to get it to work (though sure I saw this working in development a few weeks back).. it always sets a black background. Thx

example image - https://cdn.sanity.io/images/2d0aet24/production/19545ad97e616cb26f566e3a293a70769960e91b-1026x514.png?bg=fff&w=560&fm=jpg&q=50&sat=-100

Hey have you had a chance to look at this at all? Is it a bug or am I doing something wrong? Many thanks in advance

Hey have you had a chance to look at this at all? Is it a bug or am I doing something wrong? Many thanks in advance

Hey Andrew! I’m not sure what’s causing this here. What does the url you’ve built for this look like?

Hey! See my first comment for the URL, or do you mean the js I'm passing to the image URL library? Thanks

I mean the js you’re passing to the url library

I’m using vue

the site is live and I’m sure this was working a few weeks ago (I now have black backgrounds on images where pngs are being converted to jpegs)

Looking at the plugin ’s documentation, it does not have a

.bg()

method. What happens if you remove that and replace

format('jpg')

with

auto(format)

?

I want the Png to convert to jpeg because I don't need transparency and there is no png compression

I’m confused, why doesn’t the plugin support the bg parameter defined here in the docs? https://www.sanity.io/docs/image-urls

I may be misunderstanding the use case for this bg feature.. but the behavior I’m after is to “flattten” a transparent image and specify the color with which to fill the alpha channel

ps you see the bg param is outputted in the url - does this not mean it is supported?

Yep, I understand that you’re trying to convert from png. I’m trying to help you troubleshoot by trying different methods. Plus,

auto(format)

will convert to webP, which is preferable over jpg in most cases as the file size is 25-30% smaller. So hopefully this will at least show that we can get it to convert from png
It doesn’t appear that your application of

bg()

is having an effect on your image, so I would say based off of that and it’s lack of inclusion in the documentation that it is not supported. I’ll reach out to the creators to confirm.

I just checked the Github repo , and

bg()

is not supported in

urlFor()

. I’ll make a note that this is not in line w/the Sanity docs and pass it along for correction.

Thanks for the info! I presumed auto(format) would serve the original image format, sorry

No worries, I feel like it’s a relatively unknown gem.

Bit annoying this though, every image will need to be edited before upload just to perform the flatten to white bg operation

Yeah, it is strange that it’s included in the documentation but not in the approved plugin. I’ll make sure it gets some attention.

Here’s the url https://www.circa-healthcare.co.uk/

Ohh, v. nice!

you can see lower down in the logo and work sections images with black bgs

trust me I wouldn’t have shipped it like this I feel like I’m going mad

Thanks!

Sure I remember adding the bg method and being happy that it was working about a month ago

but guess it couldn’t have changed!

This url works. I changed

fm=jpg

to

auto=format

. Maybe try

auto(format)

so that you can still use the url builder without flattening the images before uploading?

Hey thanks, I'll test that!

Hey unfortunately that’s not working. The background on the url you sent is from the browser itself - the image is transparent

though it is a webp

I can actually show you this was working when I launched the site because it was cached on my phone

Cached version this morning

Cleared cache and reloaded

I’ll have to find another solution but can you flag this as it looks like something changed with the image pipeline at your end. Thanks for your help

pps bg is supported in the plugin - see line 99

pps bg is supported in the plugin - see line 99

Hey, I’ve pushed an update using the auto(‘format’) param and dropped bg() altogether so in modern browsers webp with transparency is served and file size is low as you said. It’s not a perfect solution though because in older safari png will be served without compression but hey ho at least it looks better !

Hey, I’ve pushed an update using the auto(‘format’) param and dropped bg() altogether so in modern browsers webp with transparency is served and file size is low as you said. It’s not a perfect solution though because in older safari png will be served without compression but hey ho at least it looks better !

You’ll notice that it doesn’t actually handle any parameters passed to

bg

, so, again no, it’s not supported.

Sorry you’ve lost me, this line here appends the params to the url no?

I think the implementation of bg is actually different to what I was after - it seems to be more aligned with aspect ratio. So if you request an image of a different aspect ratio to the source, bg tells it what color the added pixels should be

However as you can see from my screenshots it was working with the flattening of alpha channel too previously