Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

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

45 replies
Last updated: Jul 16, 2021
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
Jul 13, 2021, 12:56 PM
Hey
user M
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
Jul 15, 2021, 3:21 PM
Hey
user M
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
Jul 15, 2021, 3:21 PM
Hey Andrew! I’m not sure what’s causing this here. What does the url you’ve built for this look like?
Jul 15, 2021, 5:20 PM
Hey! See my first comment for the URL, or do you mean the js I'm passing to the image URL library? Thanks
Jul 15, 2021, 5:25 PM
I mean the js you’re passing to the url library
Jul 15, 2021, 5:25 PM
<figure
                class="logo-inner"
                :style="{
                  backgroundImage: `url('${urlFor(logo.logo)
                    .width(560)
                    .format('jpg')
                    .quality(50)
                    .saturation(-100)
                    .bg('fff')
                    .url()}')`,
                }"
              ></figure>
Jul 15, 2021, 5:28 PM
I’m using vue
Jul 15, 2021, 5:29 PM
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)
Jul 15, 2021, 5:30 PM
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)
?
Jul 15, 2021, 5:36 PM
I want the Png to convert to jpeg because I don't need transparency and there is no png compression
Jul 15, 2021, 6:04 PM
I’m confused, why doesn’t the plugin support the bg parameter defined here in the docs? https://www.sanity.io/docs/image-urls
Jul 15, 2021, 6:19 PM
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
Jul 15, 2021, 6:21 PM
ps you see the bg param is outputted in the url - does this not mean it is supported?
Jul 15, 2021, 6:22 PM
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.
Jul 15, 2021, 6:33 PM
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.
Jul 15, 2021, 6:43 PM
Thanks for the info! I presumed auto(format) would serve the original image format, sorry
Jul 15, 2021, 6:43 PM
No worries, I feel like it’s a relatively unknown gem.
Jul 15, 2021, 6:43 PM
Bit annoying this though, every image will need to be edited before upload just to perform the flatten to white bg operation
Jul 15, 2021, 6:45 PM
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.
Jul 15, 2021, 6:47 PM
Jul 15, 2021, 6:48 PM
Ohh, v. nice!
Jul 15, 2021, 6:49 PM
you can see lower down in the logo and work sections images with black bgs
Jul 15, 2021, 6:49 PM
trust me I wouldn’t have shipped it like this I feel like I’m going mad
Jul 15, 2021, 6:49 PM
Thanks!
Jul 15, 2021, 6:49 PM
Sure I remember adding the bg method and being happy that it was working about a month ago
Jul 15, 2021, 6:50 PM
but guess it couldn’t have changed!
Jul 15, 2021, 6:50 PM
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?
Jul 15, 2021, 6:56 PM
Hey thanks, I'll test that!
Jul 15, 2021, 7:01 PM
Hey
user M
unfortunately that’s not working. The background on the url you sent is from the browser itself - the image is transparent
Jul 16, 2021, 9:28 AM
though it is a webp
Jul 16, 2021, 9:29 AM
I can actually show you this was working when I launched the site because it was cached on my phone
Jul 16, 2021, 9:32 AM
Cached version this morning
Jul 16, 2021, 9:33 AM
Cleared cache and reloaded
Jul 16, 2021, 9:33 AM
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
Jul 16, 2021, 9:34 AM
pps bg is supported in the plugin - see line 99
Jul 16, 2021, 10:05 AM
pps bg is supported in the plugin - see line 99
Jul 16, 2021, 10:05 AM
  if (<http://spec.bg|spec.bg>) {
    params.push(`bg=${<http://spec.bg|spec.bg>}`)
  }
Jul 16, 2021, 10:05 AM
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 !
Jul 16, 2021, 11:29 AM
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 !
Jul 16, 2021, 11:29 AM
You’ll notice that it doesn’t actually handle any parameters passed to
bg
, so, again no, it’s not supported.
Jul 16, 2021, 3:36 PM
Sorry you’ve lost me, this line here appends the params to the url no?
Jul 16, 2021, 3:41 PM
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
Jul 16, 2021, 3:43 PM
However as you can see from my screenshots it was working with the flattening of alpha channel too previously
Jul 16, 2021, 3:44 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?