2

I am trying to optimize the graphics for a webdesign, since I am not satisfied with the performance in terms of load-times. The logo is quite big and in PNG24 so I experimented to see how much I could shrink it. It was thrilled to see that I could get from 158KB to 61KB with practically no image quality loss until I started implementing the picture in the design and noticed white "ghosting" transparency issues around some of the edges. Then I started playing around with transparency dithering, but the best result I managed to get was with diffusion dithering enabled, but the amount set to 0% (yeah, it actually still has an effect?!), but I still find the edges a bit to jagged for what I am looking for. I made a collage where I put the tree versions of the logo on a subtle gradient, which makes it easier to see the issues on the following link:

images

Any suggestions on how I can get closer to that attractive ≈ 60KB filesize without giving up on the smooth edges when not performing dithering?

BTW: I'm using the "save for web" dialogue in Photoshop CS5.5 in case you're wondering.

|improve this question
  • There seems to be quite a lot of scum around the edges if there is that much dithering going on in the first image. May be a silly question, but have you verified it's a clean edged image? – Scott Apr 12 '13 at 15:26
  • It looks really clean up close. I just tried disabling the layers - suspected that the textures might interfere with the edges - but I had the same issues when trying to export. – funkylaundry Apr 12 '13 at 15:59
  • have you considered a JPG? – DA01 Apr 12 '13 at 17:40
  • What is the final background that this will sit on? Knowing this will help with suggestions. – Tims Apr 12 '13 at 22:50
2

1.) In PhotoShop, Save For Web and save as a 24-bit transparent PNG.

2.) Use a third party to compress the image. I like https://tinypng.com/

3.) Your image was compressed down to your target 60kb with lossy compression preserving full alpha transparency. No white edges, no image quality loss.

|improve this answer
1

I know you didnt say this but why wouldn't you just code everything in CSS if you are worried about load times and file sizes?

EDIT: Other circular questions on the stack here and here

|improve this answer
  • I considered doing that and plan to do it for simpler elements on the site, but with all the textures and shadowing going on I don't think I will get a good enough result for the logo. I'm also planning to provide a fallback of the site for non-CSS3 browsers and I would need the logo there, although I would probably simplify the rest of the design a lot. – funkylaundry Apr 12 '13 at 13:47
  • Have you considered then separating each area? Code the circle with CSS but use a background image for the effect? Also have you considered an option to file size optimization such as punypng.com – DᴀʀᴛʜVᴀᴅᴇʀ♦ Apr 12 '13 at 13:50
1

I did some playing with the image... extracted a copy from your PNG24 example and tried several methods. In the end I'd use this, myself:

with matte

(not great on white.. better on a grey)

What I did was use PNG8 with no color diffusion, then set the transparency diffusion to 50% dithered, and added a grey matte color (#dddddd). That slight grey matte helps the edges look clean on a wide range of greys even if they don't match the specific matte color. You can play with various CSS background colors using this jsFiddle link. You'll see it seems to work well on a range of lighter grey backgrounds. It seems to start failing once you pass #999 for the page color.

It is far from the smooth edge of a PNG24. But there's no way to get the PNG24 smooth edge in an indexed color image (PNG8) So it's a trade off... which is more important the smooth transparency or the file size? And granted I'm working from an extracted copy of the image. Your results may be better with original files.

|improve this answer
  • I have heard rumours that png8 supports alpha transparency, but has imperfect browser support and Photoshop does not export it. – horatio Apr 12 '13 at 19:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.