Why do graphics with text and/or images in Fireworks CS5 become more grainy or blury when saved/exported for web use? Compared to results in Photoshop, text, image and graphic rendering when saved for web in Fireworks is lower quality or poor (grainy and blurry). Why?! Should I not use Fireworks and only use Photoshop CS5? Isn't Fireworks designed for creating web graphics? If so, what am I missing? Any help would be appreciated.
So you feel like the quality is degrading at the export stage... Do you have any samples of this?
Are you using the Image Preview command to export, or one of the Preview modes (e.g., 2-up, 4-up) in conjunction with the Optimize panel? Have you tried different file types? Are you resizing?
I'm using export in 2-up preview and the optimize panel at 80% quality for a jpg. I've tried every file type and tried various options with the how the text is rendered (smooth, crisp, strong, etc.). I'm thinking I should just use photoshop, the results and quality seem to be superior, expecially when there is text. Here is a sample... and thanks for your help!
Yeah, I'd encourage you to use whatever works for your situation.
I should have asked you to include a screenshot of your original for comparison. I do see obvious JPEG artifacting around the letters as well as the images; this graphic has a lot of flat color, which would prompt me to try saving it as a GIF or PNG-8 (or even a PNG) instead of a JPEG.
The cover images do look quite blurry, but I suspect they must look blurry in your original as well. Incidentally, if you saved these graphics as symbols, you could resize them multiple times in your layout without losing any quality—kind of like Smart Objects in Photoshop. (I'm assuming they might have been larger initially?) Also, you could check your Preferences to see what Interpolation method is being used when resizing. This could impact the appearance of the cover images, if they are being resized.
Text rendering is tricky at small sizes. Making a seemingly minor adjustment to the pixel size can have an impact on how the text is rendered at this small of a size, depending on the font. As far as anti-aliasing goes, System Anti-Alias can be a good choice, sometimes; you might also explore the Custom Anti-Alias option. You might also have smoother results if you create the layout at twice the size (or more) initially—a display font will look better when rendered with more pixels—and then output it at half size.
An interesting thing about Photoshop: If you zoom in to the highest setting, you can use the arrow keys to create subtle adjustments to the text rendering, depending on what kind of aliasing you've applied.