Photoshop CC saves PNG files bigger than some PNG-specific tools

[name2941]

Hey,

as a web-developer i'm working with PNG files alot. Since the release of Photoshop CC i always need to go back to CS6 for saving what i did in CC. I thought maybe it's just an early bug which will be fixed soon but still nothing and annoying. Maybe i missed something and there is a benefit in this bigger files? So here is a short discription...

When saving a PNG file

( file > save as > PNG > Compression: Smallest/Slow and Interlaced: None )

the files saved in Photoshop CC are about 17kb bigger compared to the saving in Photoshop CS6

A former 0,3kb PNG file gets saved with 17kb in Photoshop CC.

I use the English Windows 64bit Version of Photoshop CS6 and CC.

A fix would be very appreciated.

Screenshot of both files:

Thanks,

Bye!

[charles badland]

What are your results if you use Save for Web for the example png file?

[name2941]

Stopped using "save for web" for PNG files a long time ago because of quality and transparency issues. I used "file > save as" instead. Maybe it's time to give "save for web" a new chance? I just saved a 24bit PNG file with it and didn't find anything wrong with the result. Also tried the Metadata controls resulting in even smaler file sizes compared to "save as" in Photoshop CS6... Do you think "save for web" in Photoshop CC and 24-bit results in (visibly) less image quality compared to the Photoshop CS6 "save as" dialog? And are there any know issues with transparency?

[Noel Carboni]

idothings2941 wrote:

Maybe it's time to give "save for web" a new chance?

I would, yes.

-Noel

[Chris Cox]

"Save As" will save metadata in PNG (CS6 didn't write all the metadata it was supposed to).

SaveForWeb lets you control whether the metadata is added or not.

[Herbert2001]

Don't even bother with Photoshop and the png export for the web. What I do is save for web as a full 24 bit png with alpha, and then use Color Quantizer to properly optimize the png.

http://www.softpedia.com/get/Multimedia/Graphic/Graphic-Others/Color-quantizer.shtml

Try it, and create fully transparent png images at a much reduced bandwidth load.

For mac imagealpha is a good alternative (better than Fireworks), but it does not support colour palettes above 256 colours with full transparency, unfortunately.

[name2941]

@Herbert2001 thanks for your tips - looks like you heaven't been happy with the PNG performance of the "save for web" feature of former Photoshop versions too. Can you describe the the problems with the "save for web" feature a little more in detail because i just tried this in Photoshop CC and selected 24bit there and was surpriced that the result looked kind of ok. Maybe the PNG weakness of the "save for web" feature is a relict of the past inside our heads?

[Chris Cox]

I'm not sure what problems you're referring to - the PNG code hasn't changed all that much since Photoshop 5.5, and it's the same quality if you ask for the same settings.

It sounds like you just might have gotten confused about the available controls in Save For Web.

[Herbert2001]

Chris and Idothings:

Here's a quick example that explains what I am talking about:

Download this 32bit png, and open in Photoshop:

http://www.estructor.biz/testje/heading.psd

In Photoshop, the only options in the save for web dialog I have for png are these:

and

Since I require the alpha channel to remain intact, I am forced to export to a 32bit png (png-24 with transparency checked). Png-8 would be a much better choice, since this image could be optimized with a limited colour palette, but Photoshop does not allow a full alpha channel to be included in that case. In short, a pixel's transparency is either on or off in 8bit png mode.

In Photoline I can choose a png with 32768 colours and full alpha transparency. This reduces the file size while I retain full visual quality.

Fireworks offers us an additional option:

Png 8 bit with Alpha Transparency. This gives us the power of full transparency and a limited index-based colour pallette. It also results in a much reduced file size.

Unfortunately, Fireworks' colour reduction algoritms are quite old, and you cannot really choose 128 colours: it wrecks the quality (in this case, at least). With manual colour choices this could be improved, but the time this would take kinda defeats the purpose of having a web optimization tool.

One other disadvantage to Fireworks: no further development. Adobe killed it.

Often 256 indexed colours are not enough. Color Quantize goes one step further, and allows for a limited colour palette of 512, 1024, 2048 and 4096:

This gives a web front end developer an incredible control over a limited colour palette, and yields the best balance between file size and visual quality, while retaining a full alpha channel. Color Quantizer also includes a very simple quality mask brush tool to paint over areas that must remain identical in quality.  The colour reduction algoritms are top-notch, so with the sample image even 128 colours are visually quite acceptable.

Final results:

Photoshop: full 32bit png - 254kb

Photoline: 32768 colours 32bit png - 207kb

Photoline: 256 colours 32bit png - 170kb

Fireworks: 256 colour 8bit png + 8bit alpha channel - 54kb

Color Quantizer: 256 colour 8bit png + 8bit alpha channel: 50kb

Color Quantizer: 128 colour 8bit png+ 8bit alpha channel: 41kb

Do I really have to explain any further? You'd have to be mad as a hatter to continue to use Photoshop for png optimization once you start to realize how limited its png output options are. Luckily, Color Quantizer (and ImageAlpha for mac) is completely free: so export to a 32bit png, and optimize in those.It will save a LOT of bandwidth.

Chris, you are correct in stating the png export options have not changed since v5.5 - it shows. Photoshop is stuck in the nineties as far as web export is concerned.

Oh, and one more thing: Photoline, Color Quantizer and ImageAlpha offer a wealth of dithering algoritms. While Photoshop users are limited to diffusion, pattern and noise, in Color Quantizer I have six different options plus other options to control the final colour reduction.

PS I could not check ImageAlpha for the mac, since I work on a WIndows machine at home. In my classes I do demonstrate ImageAlpha to the students, and it gives comparable results to Color Quantizer (since both use, I believe, the same colour reduction algoritms) at a low 128 colours. I recall a file size of around 46kb.

[JoomNinja]

WOW. I have been using Photoshops built in Save for Web for as far back as I can remember. I just tested it with the new Color Quantizer and I took a PNG I was working on from 36 kb to 15 kb with NO LOSS OF QUALITY. The transparency still looks great too! I can't believe I had no idea it was such a  difference.

Thank you Herber2001...

[Herbert2001]

Don't mention it. As Chris stated, Photoshop's save for web function remained static since version 5.5 (almost 14 years ago!!!).

It is a bit frustrating to tell my students that they have to look elsewhere for good web optimization, because Photoshop definitely does not deliver. Hopefully this will resolved within a couple of years, but I am not holding my breath.

In the meantime Photoline's newer betas export to webp format as well. Photoline also exports to a good quality SVG. And free tools like Color Quantizer completely destroy Photoshop's web output, which is a crying shame (for Adobe), since Fireworks is no longer available to make up for Photoshop's lacking web output. Photoshop: "the industry standard" - lagging behind the competition in every way as far as the web is concerned.

Not to mention the sub-par and ancient slicing tools! When is Adobe going to understand web front end developers moved on to a layered approach in combination with css3 properties??!! Tables and absolute positioning? Really?

And this in a time when image optimization has become more and more important again for responsive and mobile web and app design. In one word: pitiful.

Anyway...

Sorry for my rant - there are some real reasons why I left Photoshop nine months ago. I waited and waited for years to see some, ANY improvements in this area - and it did not happen.

[Herbert2001]

Hi Chris,

Any thoughts on this matter? With Fireworks discontinued, it's more important than ever to update Photoshop's web export. Are you guys planning on improving it in the near future?

Cheers

[Noel Carboni]

While less data size is better, isn't the connected world getting beyond the point where saving a few bytes doesn't matter as much as it once did?  Yes, I realize that with a graphics rich web site it adds up.

Do we know that the metadata isn't needed?  Adobe saw fit to include it for a reason.

Save As PNG got much smaller with Photoshop CS6 - a welcome change.  But beyond that, I agree that Photoshop, being THE image application, ought to have best-in-show file creation options.  Time to get someone working on a super duper PNG save update, Adobe.

-Noel

[JoomNinja]

Actually Noel, with the current trend to Responsive Web Design, I find that file size has become even more important. Because the mobile user might be downloading images they don't even see, the need to keep our file sizes down is now critical to good design. I also find that mobile users are even LESS patient when it comes to site load times...

But I agree with your other point. This needs to be in Photoshop's Save to Web functionality...

[IHICAP]

I have to agree completely with Herbert2001 (and thanks for stating the case so clearly). I have long been disappointed by how "save for web" is almost useful, but misses some important functionality. Very large file sizes and clunky alpha transparency have had me using Fireworks for many years for nothing but opening images I create in Photoshop, so I can re-save them as PNG with alpha transparency.

I haven't tried Color Quantizer. I will in the next few minutes. But I shouldn't need to, given the buckets of cash going into Adobe/Photoshop/CC. Surely it's time that Photoshop let us save images for the web in a fully featured way?

Like Herber2001 said, think of the bandwidth we could save the world...!

[Noel Carboni]

Perhaps some hard information might be useful here...

I threw together a silly dummy logo with some text and a simple graphic and saved it in PNG format both without and with some basic Layer Styles via Photoshop's Save As and Save for Web features.

The design:  http://Noel.ProDigitalSoftware.com/ForumPosts/Pinger.zip

With no effects:

36,660 bytes - Saved As PNG via File - Save As:

http://Noel.ProDigitalSoftware.com/ForumPosts/Pinger.png

19,553 bytes - Saved As PNG via File - Save For Web:

http://Noel.ProDigitalSoftware.com/ForumPosts/Pinger_SFW.png

With basic bevel and drop shadow effects:

95,739 bytes - Saved As PNG via File - Save As:

http://Noel.ProDigitalSoftware.com/ForumPosts/Pinger_DropShadow.png

77,508 bytes - Saved As PNG via File - Save For Web:

http://Noel.ProDigitalSoftware.com/ForumPosts/Pinger_DropShadow_SFW.png

For anyone with PNG tools they feel do better compression than Photoshop, I'm curious...  Can you please do the same saves/compressions using this sample logo and illustrate the differences?

-Noel

[IHICAP]

For me the issue is with transparency, not just file size. So you won't see it unless you layer the images I've included over another image, or over a coloured background.

Example here

Parts of this image (the square grey drop shadow in this example) need to be partially transparent (alpha), so that images below this one on the page are visible through it (in this case the diagonal noise). A page may resize and what is underneath the image may move, so the transparency needs to be real, not baked/faked into the .png

Here is the difference between Photoshop CC2014 and Fireworks CS6 working from the same PSD file:

Photoshop PNG24+transparency - 25kB

Photoshop can't do transparency at 8bit, the image without transparency was 12kB

Fireworks PNG8+Alpha Transparency - 13kB

Fireworks is half the size of only PS version I could output for web with transparency without trying to optimise any colours. Invariably, when I use "real" images with more varied colours, the quality is far superior from FW and the file size always much smaller than Photoshop. It's not possible to demonstrate that from this simple image though.

Fireworks can achieve this from a .PSD. Surely Adobe can insert that functionality into Photoshop? Don't get me wrong, I have loved Photoshop since I first used it in 1995. But it should do this better. It would mean I wouldn't need to install FW just to open and re-export images to attain reasonable file sizes.

[Herbert2001]

Interesting, the alpha in the FW version is 119, while the Photoshop version is much darker because the alpha is set to 179 (more opaque). The colour values for both versions, however, are identical.

Can you share your psd with us?

[IHICAP]

Yes, I noticed that too. The colour in the PSD is #88867e, at 70% opacity, so the Photoshop version is much nearer to the correct value (179 / 256 = 0.69). This could be to do with how FW opens the PSD. When I open the .PSD in FW and change the opacity of the shadow layer (imports "correctly" at 70%) to 100%, it retains some visible transparency, so it's obviously not dealing with something quite right there.

Things are more predictable when I output the .PSD with all layers at 100%, then reduce the "shadow" layer to 70% opacity in FW. I've updated the example page to show that.

Link to PSD: https://dl.dropboxusercontent.com/u/59797743/AdobePNG/Pinger2.psd

(Edited to show results of experiment with opacity export/import from PS to FW).

[Noel Carboni]

Did you not notice that the PSD I posted was all full of transparent regions (as were the PNGs I saved from it)?

-Noel

[Herbert2001]

Hi Noel,

My versions are as well.

I take it you checked the previews in dropbox? You must download the files with the download option, otherwise the transparency is somehow lost. The downloadable versions are the correct ones. I think the dropbox preview mangles the transparency somehow.

[IHICAP]

Did you not notice that the PSD I posted was all full of transparent regions (as were the PNGs I saved from it)?

-Noel

Sorry, I missed that! I clicked the links in the forum and ended up with solid backgrounds   That's why I showed a link to a webpage and the images over the striped background, it seemed the obvious way to demonstrate the transparency. Hopefully the demo images were still handy!

[Herbert2001]

When I open your psd in Photoline I get the same opacity value as in Photoshop: 179. So Fireworks must be interpreting the transparency value incorrectly.

IHICAP wrote:

Yes, I noticed that too. The colour in the PSD is #88867e, at 70% opacity, so the Photoshop version is much nearer to the correct value (179 / 256 = 0.69). This could be to do with how FW opens the PSD. When I open the .PSD in FW and change the opacity of the shadow layer (imports "correctly" at 70%) to 100%, it retains some visible transparency, so it's obviously not dealing with something quite right there.

Things are more predictable when I output the .PSD with all layers at 100%, then reduce the "shadow" layer to 70% opacity in FW. I've updated the example page to show that.

Link to PSD: https://dl.dropboxusercontent.com/u/59797743/AdobePNG/Pinger2.psd

(Edited to show results of experiment with opacity export/import from PS to FW).

[Herbert2001]

Here are my versions done in Color Quantizer:

logo_no_effect.png 7254 bytes 16 colours

logo_no_effect_8.png  6490 bytes 8 colours

logo_no_effect_6.png  5,851 bytes 6 colours

logo_effect_256.png  24,974 bytes 256 colours

logo_effects_128.png 19,274 bytes 128 colours

logo_effects_64.png  14,933 bytes 64 colours

The original effects version contains 4604 unique colours. The 128 colour version looks identical, and only by zooming in dramatically can any differences be discerned. Honestly, any of these versions look visually identical to the full colour originals - I placed all of these on a white canvas, and even when zoomed in I could hardly see any difference at all.

This, my friends, conclusively demonstrates how abysmal Photoshop's PNG export really is: the version with effects is equal in size or even smaller(!) when exported from CQ than the plain version exported in Photoshop.

Photoshop's versions are a minimum four times larger in file size, and in the worst case five times larger in file size.

In CQ the user can choose to limit the range of colours from 16, 32, 64, 128, 256, 512, 1024, 2048, and up to 4096 (or anything in between, and the user can set a lower value than 16 by manually typing the number). Also, a simple quality mask brush allows you to control which areas' quality should be given preference in the reduced colour set. In addition various dithering options and "expert" settings are available to further enhance the quality and reduce the file size.

PNG export in Photoshop is in dire need of a modernization - I would argue it is unusable for current web work. 'nuff said.

[michael-mahisqus]

logo_effects_64.png  14,933 bytes 64 colours

Btw, newest version of CQ packs slightly better: this image -  11,815 bytes. - http://kherson.myftp.biz/temp/logo-cq2013-vs-cq2015.png

Color Quantizer