Link to home
Start Free TrialLog in
Avatar of Andrew Angell
Andrew AngellFlag for United States of America

asked on

Photoshop Save for Web and Export to PNG causing ugly results..??

I'm working with some caricature artwork in Photoshop that I'm trying to export / save for web so I can use them on my website.  I've done this hundreds of times over the years and I've never had this problem, but suddenly I cannot get Photoshop to export a clean image.

Using Save for Web (and I've tried the different options for re-sampling, although I never had to mess with that in the past) I'm getting images that look like this:  https://snag.gy/p1vcDS.jpg

You'll notice it has a nasty, hard edge and isn't clean.  I can't figure this out for the life of me.  Again, I've done this many times and I've never had this problem exporting transparent PNGs out of Photoshop, but I just cannot get these to work.  It's even happening on artwork that I've done this in the past with and didn't have any issues.  I've also tried the general Export to PNG and it's doing the same thing.

The original artwork is available here.

EDIT:   When I use PNG-24 (or simply Export As instead of Save for Web) it looks fine, however, the image size is 60kb vs. the 18kb size I get with Save for Web.  The smaller file size looks perfectly fine except for the hard edge, and again, I've never had this issue before using it so I'm completely confused why this is acting this way all of a sudden..??

Any information on what could be going on here or how to get this working properly would be greatly appreciated.  Thanks!
Avatar of von Axl
von Axl
Flag of Slovenia image

Could you provide original file?
Avatar of Andrew Angell

ASKER

Sorry, updated the question with a link to the original artwork.
The jaggies you're seeing around the edge are aliasing artifacts where something in the original image didn't actually have a clean edge but a feathered edge.  If you put that on a white background, they probably disappear.
It's already a PNG. What exactly are you trying to do? Resizing to get low kb file?

If so, you should convert it to a smart object and then use crop tool to remove the transparent space. Use the same procedure to save as web and chose bicubic sharper in quality next to image size.

Let me know the results
Hmmm, mine works by just adding a background (as new layer), resizing and saving as PNG (fast and slow)
[see attached]
guru-drew1.png
guru-drew2.png
Avatar of Kat Donegan
Kat Donegan

Let's try this: When you export as PNG, there should be a dropdown labeled Matte. Select "None" and the white edges should disappear.
@Dave Baldwin, the original does look very clean, though, and if I save to PNG-24 then it looks fine, but the file size is much larger.  It does look fine on a white background, but I need to use this on a variety of different backgrounds throughout the site, so I really need transparent.

@Obaid ur Rehman, Yes, the original PNG is 700 ppi and very large file size.  The goal is to convert to 72 ppi and smaller dimensions, and then "Save for Web" for optimized file size.  PNG-24 works fine, but results in 90+ kb where-as PNG-8 256 results in 19kb, but gives me these nasty edges.

@Shaun Vermaak, I actually tried that, too, although it's not ideal, but even that isn't working smoothly for me.  I wind up with a hard edge around the whole image so  you can see a line on the page like this:  https://snag.gy/jDP6iZ.jpg.  Again not something I've had an issue with before.  

@Katrina Donegan, removing the matte does get rid of some of the additional garbage, however, the edge is still ugly unless I use PNG-24.
Try using the PNG-24 and reducing that.  Also use other programs to do it.  I use Irfanview for these operations all the time and almost never have problems.  I have two images for you.  The first is with Irfanview to scale the original.  The second is using GIMP to put a green background behind it.
User generated imageUser generated image
Thanks Dave.  This first one is actually quite a bit larger than what Photoshop is giving me with PNG-24.  The second one has green all over the character itself.  

I tried using Tiny PNG and other similar tools, and I also tried using the SmushIt plugin in WordPress but it says it's already optimized as much as possible.  I guess this is the best I can do.  Just not sure why I've been able to get better results in the past.  I notice that PayPal now has the Save for Web feature labeled as deprecated, which is interesting.  Lots of people in the Adobe forum upset about that.  I wonder if something changed since previous versions..??
The green in the second one is coming thru from the background which implies that the first one has some transparency in those areas.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.