Illustrator ‘save for web’ anti-aliasing problems

Update: it seems I was completely wrong about this and Illustrator does have a special anti-aliasing option for type optimisation. The option is buried in a slightly strange place in the ‘Save for web’ dialogue, under ‘Image size’. Select ‘Type optimized’ instead of ‘Art optimized’. Thanks to Monika Gause for telling me about this! Incidentally, another way to achieve this would be to use Effects > Rasterize and again set the option for ‘Type Optimized (Hinting)’.

Adobe Illustrator is a great tool, but it seems to have some real problems rendering anti-aliased text when using the ‘Save for web’ function. Text from very thin fonts is a particular problem. In these cases, the text looks fine while you are working on the file – I usually have the anti-aliasing set to ‘Sharp’ and it does look crisp and clear. However, as soon as you go to ‘save for web’ the results are awful.

So here is what I see while working on some text (this is set in Museo 100). This image comes directly from a screenshot in Mac OSX:

And here is what Illustrator gives me when I select “Save for web & devices”:

The text is rendered very poorly.

As an experiment I created the same text in Photoshop and did “Save for web & devices” and it has no problems at all:

It’s a really annoying bug, and it’s been around since at least version CS4, as we can see from this post on the Adobe help forums.

I use Illustrator for nearly all my web work – it’s a great tool and very quick to work in, and ‘pixel preview’ mode and ‘snap to pixel’ mean you can produce precise graphics for the web. However, it looks I might have to start using Photoshop more. Disappointing.

9 thoughts on “Illustrator ‘save for web’ anti-aliasing problems

  1. What you describe has more to do with the way operating systems render text, rather than with Adobe Illustrator itself. Adobe Photoshop uses a completely different rendering engine for text, independent from the OS text rendering (displayed on your screenshot). This Photoshop text rendering engine was introduced by Adobe at a time when exchanging files between Windows and Mac Photoshop users became a common thing.
    Somewhere between 2002 and 04, Microsoft and Apple decided to go in two different directions with rendering tet. Inheriting its engine from Adobe (PDF is a foundation in Mac OS), Apple went for monochrome font rendering and Microsoft used a technique that involved more colours of the screen. This allowed more accuracy in following postscript outlines and with hinting, it led to sharper text on the screen.
    When you render an image in Adobe Illustrator, it uses its foundation rendering engine, which is Adobe PDF. Although PDF was made to be for both, printing and screen alike, its screen rendering was never updated to modern screens.
    Modern text rasterization uses hinting with anti-aliasing and sub pixel rendering. Illustrator uses PDF as output format, which it then turns it into PNG (unlike Photoshop, which starts with pixels and uses its own text rendering engine). Hinting with monochrome rendering. leads to the thinner looking result with a lightweight font.
    See also: http://en.wikipedia.org/wiki/Font_rendering
    If Adobe would make proper use of Apple’s font rendering engine, it would lead to a much better result (compare Apple Pages and Keynote screen and PNG output results with those of Adobe Illustrator rendered PNGs). Adobe ignores the rendering engines of operating systems to ensure equal output results on all platforms.
    A remedy which could help you short term would be turning text into outlines, just before you output the final image. I understand that rendering text to outlines will eliminate hinting, therefore it might lead to a result with stronger lines, but it will also eliminate some of the font’s finesse.
    Another trick is to render the image in double or triple sized dimensions, and reduce it later with Photoshop.

  2. Thanks for the info Henning.

    What I don’t understand is why Adobe would still use this old rendering engine in Illustrator but not in Photoshop. The text looks fine while working in Illustrator, so it is rendering it OK at that point. And if they are using the PDF rendering engine for print, that’s understandable, but clearly they should not be switching to use it in the *Save for web* mode!

    I tried turning text into outlines before exporting, but as you say this removes the hinting, so doesn’t give good results either.

    I will try your idea of exporting double-size and then reducing in Photoshop, but I suspect when I need the best quality web graphics possible, for example when producing a logo with some thin type on it, I will need to move over to using Photoshop to produce it.

  3. Hello, just stumbled on this thread and it is really helpful.  However, I am still having font problems.  I am trying to create some web graphics for this page:

    http://designdefinedblog.com/ourteam/

    No matter how I save the graphics, which are created in Illustrator CS5 on a PC, the font appears blurry when I upload the graphics to the website.  I need super clean, crisp font for these web graphics.  I have tried saving for web using the thread described above, with Type Optimized.  I have tried saving at 300ppi.  Rasterized, not rasterized, I have tried everything, but I am only an amateur designer, so I really get stuck sometimes, and I would love any suggestions on creating the font that is optimized for web.  I have the entire CS5 suite too so I don’t necessary HAVE to use AI, I just find it quick and easy.  Thank you in advance! 

  4. Hi Shari

    Firstly, it’s really not a good idea to create all your text as images in that way. The text is not searchable or indexable by Google (so people won’t find it), and anyone who does get to your site won’t be able to re-size the text or select it, etc. It also makes the page much slower to download. 

    The only cases you might occasionally need to use images for text is for a logo (as I was in this example) or for large headings, etc where you cannot get an appropriate web font.

    In the example of your web page, the reason your text has become a bit blurry is that you are displaying the image at a different size than it was created at. Make sure you export the image at exactly the dimensions you require. Otherwise you are forcing the browser to resize the image – hence the blurring.

    Hope this helps. 

  5. Thanks for your prompt response, Ben, much appreciated.  Yeah, I know a page heavy with images isn’t a great idea but it is what the client wants, that particular font, set up this particular way. I will play around with it using your suggestions regarding sizing.  Also, is there a good tutorial link somewhere to creating text for the web in Illustrator?  I occasionally run into problems with this issue, my fonts (in a graphic) often look blurry, particularly, I have noticed, when it is black text on white.  I am self-taught so totally missed the lesson on anti-aliasing, rasterization, etc. would love to find a good overview.  Thank you again, I really appreciate when people take the time to help! 

  6. It’s good that choice of rendering engines is there in Illustrator. I have just found on my latest project that fine vector objects look like crap in Photoshop and need to be saved out of Illustrator, using the Optimize for Text rasterization option. If Illustrator used the same rendering engine as Photoshop, exclusively, there would be no way to get a desirable file out. I wish PS had that option, too. (Maybe it’s buried somewhere, and I’ve missed it?)

  7. Just wanted to post a quick comment to say thank you. I feel I was looking for the “needle in the haystack” until I did a google search and this post was the first link to come up. Thank you for directing me to the “Art Optimized” or “Type Optimized” setting under the “Image Size” tab on the “Save for Web & Devices” window within Illustrator.

    In my situation, the end user accidentally changed this option to “None” yesterday and didn’t know it. Because this option change is saved automatically, she was unaware what she had done/changed, therefore she came to my tech team for answers.

    This post gave us that answer quickly. Thank you so much for posting this.

  8. Thank you so much for this post! I was wondering what the heck was wrong with Illustrator, but then realized that it was set on the wrong type of sub-pixel rendering option. Oh thank God. 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>