Strange PNG Behavior

OK Weavers, this one has me baffled.

I am updating some of our staff pages and suddenly am getting PNG images that won’t seem to lose their backgrounds (Meaghan’s signature).

See the difference between how Amanda’s signature has the background knocked out in this Mask 3 stack from JW on hover, then try the same thing with Meaghan.

It’s because it’s MIME type is .jpg

here is a png:

3 Likes

Scott is right. Jpeg images do not support transparency. Png images do.

1 Like

Here’s where it gets weird. I have checked the file type and it shows PNG on my end. Could RW be changing it somehow?

Did you warehouse the image? (i.e. put on a server yourself). If not I think there are some combos of things that might transform it from PNG to JPG. I doubt many stacks do this, but it’s possible there are a few that do.

Also what does “your end” mean? Looking at the image as stored on your computer’s HD, or as stored at the server location?

1 Like

This screenshot is the image stored on my HD just prior to dropping it into the JW Mask 2 stack. I’m not sure I can use a warehoused image with this stack, although I will look into it.

What is strange is that I’ve been doing this for years. What changed?

Try the one I posted above, it is for sure a png. See if it changes

1 Like

@swilliam your PNG worked! AWESOME!

I wish I could figure out what is causing this problem on my Mac or with RW. This has never happened before.

Thanks

1 Like

I just ran into this same problem. For some reason, if you scale a PNG in RW, it loses it’s transparency. If you open the file in Photoshop, and scale it (reduce the pixel dimensions) then put into RW at 100%, transparency now works.

2 Likes

I’m having the same issue here. But I’ve tried the Photoshop hack, and that hasn’t fixed yet. And when you say you put it into RW at 100% I assume that means setting the image to “Flexible” fill mode, and the Flexible Width to 100%? It works fine in the editor, but the compositor is screwing it up.

This has got to be some quirk in the Stacks plugin or individual stacks. It doesn’t make sense that we are working so hard to format these images as PNGs and something is changing them back to JPGs.
Maybe @isaiah would have some helpful insight here.

P.S. I re-read what I wrote here. I did not mean to imply there is anything wrong with the Stacks plugin. Honestly, RW and the RW community would be lost without it.

The devil is in the details. There are ways for user’s to specify that they want an image exported as JPEG (see image)

There are also many ways for a 3rd party stack to modify an image. The Stacks-API gives all the same controls that user’s have when editing a image – to the stack developer too. So they can specify (for example) that all images should be exported as JPEGs if they think that’s best – or PNGs if that’s what they need.

So, in general, the decision to export PNG could be:

  • a setting that you chose.
  • some detail about the image.
  • just what that stack does.
  • a setting in the stack.
  • or some combination of all of the above.

Of course, I can provide really specific detail of why an image exports exactly like it does – but I’ll need really specific detail about the project file.

You can also probably learn a lot by experimenting a bit:

  • what happens if you drop the image onto a page by itself. still JPEG? or does it stay PNG?

if it’s coming out JPEG here – without you doing anything at all. then it’s probably something about the image – something is telling Stacks that this image wants to be exported as a JPEG.

  • what happens if you drop the stack in a page by itself and then put the image into it? still JPEG? or PNG?

if it’s coming out JPEG here – with the default settings of this stack – then it’s probably the default behavior of that stack. you’ll probably want to take a deep look through to see if there are settings that allow you to change that. if there aren’t, then it’s time to talk to the developer of that stack.

if it’s coming out as PNG in both cases – then it’s something more insidious – probably something you’re doing on the page. maybe a setting that’s shared between many stacks (like a Foundation/Foundry type thing).

Hope that helps out. If you do some of those experiments and still come out confused, put everything I need to see open the file (stacks, themes, etc.) and the project file together – zip them up – throw in on dropbox and send me a link. If you send it on my Slack channgel (http://slack.yourhead.com) I’ll probably get back to you pretty quick.

Isaiah

I had deposited the image outside of Stack completely and it still fails. That was one of the first things I tried. I can’t use a jpg as I need a transparent background for documentation illustrating some icons. As of now, I’ll just have to colorize them to complement the background colors of the page.

Wow, @isaiah this will be so helpful for troubleshooting. Thanks for taking the time to put this together.

@Proxima the deal for shedding more light on why it’s happening stands.

send me your file and i’ll let you know exactly what’s happening, why, and how you can change it.

Isaiah

Isaiah, I am still wrestling with this issue after following your troubleshooting. I drop a PNG image directly on the stacks page and it works perfectly. I have tried un-nesting the other stacks in an attempt to see where this change to JPG occurs, but I still can’t find it.
I’ll send the zipped file on Slack. Look for the PREMARITAL page.