Q: I have been using Adobe Illustrator CS4 to create typographic images for the web by using the Save for Web & Devices… option. When I upgraded to CS5, the images looked really jagged, as if anti-aliasing was turned off. I poked around in Preferences for a solution, but could not find anything that might fix this, so I went back to using CS4. Now I’m afraid to upgrade to CS6 without resolving this problem, but don’t want to fall behind the upgrades. Can you help?
A. Okay, my dear readers, I have a confession to make. This is my very own query, and after much procrastination, I’m excited to say I finally figured out the solution to this frustrating problem.
Here’s the scoop on how to avoid the dreaded jaggies on typographic images: if you are using CS 5.x and using the Save for Web & Devices… command, click on the Image Size panel where you will notice a new drop down menu in the lower left. For an image that contains type, select Type Optimized, hit Apply, and voilà, no jaggies! The problem I had was due to the fact I was not aware of this new feature (CS4 did not have this rather sneakily located option), and that my default was set to None, resulting in no anti-aliasing and a very jagged image. But with a little research, the solution revealed itself.
Figure 1. This jagged typographic image is what I got when Type Optimized was not selected when using the Save for Web option in Illustrator CS5 and up.
Figure 2. When the Type Optimized option is selected, anti-aliasing is applied to the edges, making them a lot smoother.
Figure 3. Illustrator CS5 has a drop down menu with type and art optimization choices as well as an Apply button, all hidden away in the Image Size panel.
Having resolved this issue, I then felt confident to give Illustrator CS6 a try. To my delight, it worked pretty much the same way; the command is now called Save for Web… and there is no Apply as the changes happen automatically. In addition, when you hover over the Type Optimized option, a rollover popup now smartly says “Applies anti-aliasing to edges of the artwork”.
I did take the time to play around with both the Type Optimized and the Art Optimized option, and found that for this example, the type was a bit sharper with the Type Optimized option when NOT converted to outline. But when converted to outline, as I often do when the type is small and/or has thin strokes, it is virtually the same.
Figure 4. Illustrator CS6 has streamlined this feature by removing the need for an Apply button.
Now that you know where the anti-aliasing controls are, my advice is to play around with these options (especially if your image contains both type and graphics) and select the one that gives you the best outcome.
This article was last modified on January 8, 2023
This article was first published on August 22, 2012
Commenting is easier and faster when you're logged in!
Leave a Reply
Ilene, thanks for your help. You are an awesome person!
save for web worked just fine! thanks
You’ve got it exactly right, Ilene. Users can find this panel in the Save for Web dialog. Go to the column on the right and look for the section labeled Image Size. By default the setting is None. Experiment with the different settings to see the difference. Click the Preview button in the lower left corner to view your artwork in your browser. I assume a similar setting was possible in previous version of Illustrator, but I’m not able to test anymore.
Kenneth, look at Figure 4 which illustrates exactly where it is in CS6, outlined in red.
Ilene
.. .. .. .. .. .. .. .. .. .. .. .. .. ..
T H E T Y P E S T U D I O
Westport, CT
203.227.5929
http://www.thetypestudio.com/
A discussion of why this “feature” is included may be useful. The default seems silly.
Is the “type optimized” in the image size drop menus a PC thing? Iuse a Mac and .ai CS6 and I don’t see a drop menu in images for that.
I don’t see this setting in Mac CS6. Is this in a PC version only?