Jagged edges from illustrator

Question

We built a game for facebook http://apps.facebook.com/jibrjabr that uses images created in illustrator and exported as gif.

This is a high res version of one of the achievements as it appears on the achievements page

When you "Brag to your friends", FB will place a statement on your wall that includes a image scaled from the one our app provides to the 90x90 size they store on their CDN.

The 3 images below are from left to right:

90x90 from FB, 90x90 from AI, 90x90 PNG24 from Illustrator

The designer, (also my girlfriend) is going nuts over the way the 90x90 jags up around the outside of the circle. So she goes to create 90x90s directly from illustrator to get around this problem and it appears that Illustrator is doing only marginally better than FB did.

Is it just impossible to get nice smooth edges at this resolution? Is there some trick to getting the small image to look as nice as the larger one? Is the transparent background causing this?

They are 256 color gif images. She's tried exporting them as PNG24, but gets the same effect.

Answer 1

She shouldn't have used GIFs in the first place since GIFs are an archaic format that doesn't support alpha channel transparency. That means you can't AA curves or diagonals without using a matte color, which means it'll only look properly on a solid background of that color.

That, in combination with a faster but lower quality downscaling algorithm, is probably what's responsible for the jagged edges on the first image. (Edit: as noted by horatio and Alan, the GIF image is also dithered to compensate for GIF's limited palette size, which itself produces some artifacts.)

The second and third images look fine however. You're using a relatively dark fill color and then outlining it with an even darker stroke while displaying it on a mostly white background. So your only options are to AA it further, which will soften the edges, or leave it looking crisper the way it is, but have more visible aliasing. That's just the limitation of your display and color choice.

The design you've chosen can have more AAed edges and still not look blurry though. This is demonstrated here:

That was done by simply dropping the original 180x181 GIF into Photoshop and downscaling it using bicubic resampling. You can try the other resampling methods, but I think this produces the smoothest results.

However, using a transparent GIF as the source material probably isn't the best option. So if she directly exports the vector image into Photoshop and then rescales the smart object and saves it as a transparent PNG with an alpha channel, she might get slightly better results.