Photoshop CC "Save as" creates a PNG that I can't upload (problem with remote site or upload)

  • 2
  • Problem
  • Updated 5 years ago
  • Not a Problem
  • (Edited)
I'm using the new Photoshop CC for Webdesign and creating Web-Elements.
Today I found a bug with the "Save as PNG" option.

When you save a image as a PNG with the "Save as" menu, you get a corrupted PNG file which you can view on your windows/mac/linux system and as well in your web browsers (Firefox/Chrome/IE), but when you implement this PNG file on a HTML-Website with CSS parameter (i.e. with background-image), the image isn't displayed.

But when you save the exact same image with the "Save for web" menu and save the image as a PNG-24, it works like charm.

When I save the image with Photoshop CS5 with the "Save as" menu, it works.

I can reproduce this bug in my company with all Browsers and Versions (Firefox/Chrome/IE) as well as with all PCs.

Can anyone also reproduce this bug with Photoshop CC and CSS parameters?

Thank you guys!
Photo of Andrew

Andrew

  • 3 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 2
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 823 Reply Likes
I haven't heard that one before.

Where can we see an example of these "corrupt" files?
Photo of Andrew

Andrew

  • 3 Posts
  • 0 Reply Likes
Hello Chris,

Thank you for your reply!

It's very strange.
I'm uploading my images on my own FTP Server with a script and these PNG files aren't shown on HTML/CSS files when I save them with the "Save as PNG" menu.

But I uploaded the image on a image file hoster and the images are displayed right! That’s really strange, because with the CS5 the "Save as PNG" works also on my server.

Did Adobe change the algorithm for the PNG files?
Here is my "corrupt" file, maybe you can analyze it :-)

http://i.imagebanana.com/img/3tst2fcz...

Thank you!
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 823 Reply Likes
The file appears to be a valid, clean PNG image. It opens in every application I have tried. Resaving in Photoshop CC also results in a valid, clean PNG image - but slightly larger because of the included XMP metadata. Both files open just fine in Safari, Firefox and Chrome.

The only thing that has changed for PNG saving was adding XMP metadata in Photoshop CC. Other than that, the PNG code hasn't had many changes.

My only guess is that there is a problem with your FTP, or with you HTML/CSS code.
Photo of Andrew

Andrew

  • 3 Posts
  • 0 Reply Likes
Hello Chris,

thanks for your reply and for testing the PNG!

Its really strange because it works also on all may applications, but only with a CSS parameter it won't display right.
But know I know that there must be a problem with my upload script, thank you very much!
Photo of Emily

Emily

  • 2 Posts
  • 0 Reply Likes
Andrew -

Thanks so much for your post on this. I've been trying to upload .png images made in photoshop to my website, and been struggling for ages trying to work out what the problem was (thought it was my FTP client, or my links, or to do with the uploading) but then I came across this and this was my exact problem!! I just needed to save for web instead of save as.

So thank you so much - its definitely a bug!!
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 823 Reply Likes
It was a bug in his upload script or on the receiving site, not a bug in Photoshop.
Photo of Emily

Emily

  • 2 Posts
  • 0 Reply Likes
Well we both had the same problem then....when I tried to open the 'corrupt' pngs in my images folder in my website files it said the image contained errors. When I saved image for web instead of directly as a png in photoshop then it worked perfectly.
Photo of Chris Cox

Chris Cox

  • 20280 Posts
  • 823 Reply Likes
That means that there is some problem with your website, or the upload of the files. The PNG files exported by Photoshop are quite clean, conform to the format specification, and work in other applications.
The difference with SaveForWeb is that it doesn't include as much metadata (or none if you choose), and your website seems to be choking on the metadata in the file.