Skip navigation
Currently Being Moderated

Save for Web produces blurry images in AI CS4

Jun 9, 2009 12:20 AM

I'm running into this problem a lot and it's really annoying me. If I paste an image directly into Illustrator CS4, it will look fine while working on the files, but when I go to Save for Web it makes all the pasted images blurry. Also, if I copy and paste them from illustrator into Photoshop, it makes them blurry. There's no reason for them to be blurry as this is for web/screen resolution. I never had this problem with CS3. What is Illustrator CS4 doing and how do I stop it?! Help!

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Jun 9, 2009 2:53 AM   in reply to HeroicNate

    Nate,

     

    How are the images aligned to the Artboard/Work Area? You may see that if you use points/pixels as unit, or in Pixel Preview.

     

    If the image is not aligned to have edges following whole points/pixles, blurring may result.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 9, 2009 6:06 AM   in reply to HeroicNate

    Are we talking bitmaps here or vector artwork ? Why are you pasting images into Illustrator rather than using Photoshop ?A

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 9, 2009 10:29 AM   in reply to HeroicNate

    Are you using anti-aliasing when saving for web?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 9, 2009 12:27 PM   in reply to HeroicNate

    What's the resolution of the image in AI? If you go to Window>Document Info and select embeded images (or linked images) from the flyout menu what is listed as the resolution of the image?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 9, 2009 1:02 PM   in reply to HeroicNate

    As far as I know, it's either one or the other. Have you tried in Photoshop?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 9, 2009 1:09 PM   in reply to HeroicNate

    What happens if you take your AI vector objects into Photoshop as Smart Objects and do the compositing there?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 9, 2009 1:13 PM   in reply to HeroicNate

    Have you tried .svg as a save format?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 10, 2009 12:18 AM   in reply to HeroicNate

    Can you actually attach a file so one us can try.

     

    It looks a little strange to me one looks like 72 ppi and other looks like it is higher then that but is actually the same ppi
    i know you might not be able to attach the file but if you can perhaps we can see something.

     

    I thought maybe the quality but i really do not think this can cause this , may I asked if you are using any new plugins or new software?

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 30, 2009 7:03 AM   in reply to HeroicNate

    If it's any consolation, I can't replicate your problem in my copy of Illustrator CS4. Even when I intentionally place a bitmap image at fractional pixel coordinates.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 30, 2009 1:31 PM   in reply to HeroicNate

    No, I'm saying I can't replicate ANY of your problems. I have anti-aliasing turned on, and whether I paste or place bitmaps on the page, they remain crisp after opening the Illustrator file in Photoshop, or saving for web, or copying and pasting the bitmaps from Illustrator back into Photoshop. Absolutely no problems.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 30, 2009 12:56 PM   in reply to HeroicNate

    Nate,

     

    What happens if you Save for Web as PNG, or GIF, with Anti-Aliasing on?

     

    Depending on the colours of the surrounding vector artwork, you should be able to use PNG (with the fix for older IE browsers), or even GIF because the image has so few colours.

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 30, 2009 2:46 PM   in reply to HeroicNate

    > What operating system are you on?

     

    Leopard - 10.5.8

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 30, 2009 7:19 PM   in reply to Kris_Hunt

    I guess that's possible.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 14, 2010 7:16 AM   in reply to HeroicNate

    Nate,


    I'm having this same problem in CS5 and I'm on OS X 10.6.  Did anybody come up with a solution?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2011 6:32 AM   in reply to HeroicNate

    Got it !!

     

    Save for web panel >> Image size TAB >> select "Type optimized" or "none" just below "Contrain Proportion".

    If been looking for that for a long time !!!

     

    cheers.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 9, 2011 12:27 PM   in reply to HeroicNate

    Here's the thing that worked for me: In Illustrator, select only the photo part of your document. With the picture selected, go to Effects > Rasterize. Set 72 for the resolution, Transparent for the background, set Anti-Aliasing to None (this seems to be the key setting; you're letting the program rasterize the image BEFORE the save for web function rasterizes it, which for some reason makes a huge difference). Make a 0pt clipping mask, and choose OK. Now, when you save for web, choosing Anti-Alias under the Image Size tab will smooth out your arrows and lines without blurring your photo. Hope that helps at least someone who's been wrestling with this for months as I have.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2014 2:02 PM   in reply to HeroicNate

    I am trying to do the same: downsize a vector logo and save for web. I cant get a sharp image even downsizing by 100pxs. On top is my original and below is my downsized. How do I fix this?

    LogoShadowbig.png

    LogoShadowtest.png

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2014 2:24 PM   in reply to rickastleyjr2

    How do I fix this?

     

    you can't.

     

    There aren't enough pixels. Reduce detail.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2014 2:37 PM   in reply to Monika Gause

    For future reference, when creating graphics that will be small(under 200px) what should I do? Design them on smaller artboards?

     

    I dont understand how something like this Monika Gause is so clear and small?

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2014 2:51 PM   in reply to rickastleyjr2

    The larger version of that particular image isn't even crisp, so you can't expect a downsampled version to be crisp. The signal-to-noise ratio is too low.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2014 2:51 PM   in reply to rickastleyjr2

    Design them on smaller artboards?

     

    designing stuff in original size and pixel preview turn on would show you early on, what you'll be getting.

     

    It's just that there are not too many pixels in "under 200 px"

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2014 3:42 PM   in reply to KrisHunt

    This was my original design. Saving it in smaller increments decreased quality.

    LogoShadow.gif

     

    What about something like text. When I downsize that it gets grainy, too. As you can see in my logo, or www.driftcoffeehouse.com on the top left. Is there a way to make that better quality? It was created in illustrator as well.

    Screen Shot 2014-01-10 at 5.48.34 PM.png

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2014 4:09 PM   in reply to rickastleyjr2

    Is there a way to make that better quality?

     

    Reduce detail.

     

    Make all strokes at least 1 px.

    Choose a different font. Sans-serif will work better. Or serif with less fuzziness.

    Leave out the shadow or the white stroke.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2014 4:10 PM   in reply to rickastleyjr2

    The best thing to do is design it as a vector in Illustrator, if you have that. If not, then it's still possible to do it as a vector in Photoshop, but it's not as easy. Once you have it as vector art, it will resize much more smoothly.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2014 4:56 PM   in reply to KrisHunt

    Yes I these are done with Illustrator but downsizing has given me issues. As stated by others, I will try reducing detail.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 10, 2014 5:21 PM   in reply to rickastleyjr2

    It looks to me like you saved the logo as an 8-bit PNG and then reduced that to create the smaller 8-bit PNG. That will give you crap every time. Always reduce from a vector file, not a rasterized version of a vector file. And don't save your PNGs in 8 bits. Always 24 bits. 8 bit files don't have enough colors available to them to properly anti-alias. Although it's possible this website converted the file from what you originally uploaded it as.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 11, 2014 2:55 AM   in reply to KrisHunt

    Exporting your web or mobile/game graphics directly out of Illustrator is a terrible, terrible idea - the result is the worst case scenario compared to other options. This has everything to do with the chosen image sampling method, and the fact that Illustrator will export a version that is based on the actual size - which results in a horrid-looking quality.

     

    This is a bare-bones Illustrator web export @ 390px * 68px:

     

    tt2.png

    (open the image at true resolution to view the pixels in detail)

     

    It's dreadful. Fringes, the R's are destroyed, the G's bows cut off, and so on.

     

    Someone suggested in this thread that this catastrophic result is caused by the limited number of pixels - not (entirely) true. Illustrator merely sucks for this type of web work. Actually, all Adobe software sort-of sucks at web export - more about that topic down below near the end.

     

    So what are we supposed to do then? Well, the workflow should be changed - instead of exporting a web graphic at small (original) dimensions, we should import the art work as a vector object in Photoshop first. In Photoshop we can import the artwork as a smart object.

     

    Next, increase the size of the artwork. I scaled up my example to 2000px * 347px. Then rasterize the layer. At this point you will have a very large bimap version. This is key to this method (importing the artwork at true size into Photoshop and exporting that will also still result in less than ideal results).

     

    Lastly, reduce the large bitmap version to the exact size you need for the web page or screen work in Photoshop. In my case I reduced to 390px * 68px. Now, before you do this, you will have to consider the down-sample algorithm - some will work better than others. Suffice to say, almost ANY resample method will result in a much improved result compared to direct Illustrator export. Illustrator is THAT bad at web export.

     

    Here is a sample of different sampling methods (again, view this image at the true resolution!):

    tt3.png

    On the right Illustrator's Art and Type Web export. Not much to say about those - compared with the left column it's quite unusable and a anti-aliasing disaster.

     

    On the left 6 versions with different down-sampling algorithms applied.

     

    Notice how Bicubic Auto and Bicubic Sharper look jaggy compared to the others. Keep in mind that Photoshop now has Bicubic Auto set as the default(!) - which is not exactly the best method to down-sample images, as you can tell (this also holds true for photos).

     

    In this case the difference between the best ones (Bicubic smooth, Catmull, Mitchell) is neglible. Catmull seems to have the best detail preserved and still very nice anti-aliasing. This makes sense, since according to the theory it creates a slightly higher graph (luminance) compared to the other methods.

     

    Mitchell and Catmull work extremely well for down-sampling in general. You can check this page for the theory and some downsample examples to compare the different resample algorithms:

    http://pixinsight.com/doc/docs/InterpolationAlgorithms/InterpolationAl gorithms.html

     

    Unfortunately, none of the Adobe apps support either resampling method, I believe (I'd love to be proven wrong). I had to resort to Image Magick to resize the large version with Mitchell and Catmul with these commands:

    convert phimport.png -filter Mitchell -resize 390x68 mitchell.png

    convert phimport.png -filter Catrom -resize 390x68 catrom.png

     

    Not too much work, but I guess not very user-friendly for most people. It is, however, quite worth it in the majority of cases for down-sampling. Having said that, most designers will be quite happy with Photoshop's bicubic smooth version.

     

    For those of you who do want that extra tidbit of quality added, Image Magick can be downloaded here:

    http://www.imagemagick.org/script/index.php

    Just copy the convert command to your image directory, and convert them. It's also easy to do a batch, if that is required. You will get the best down-sample quality this way.

     

    If you are uninterested in optimizing your png web graphics and squeeze them down at least three-four times compared to Photoshop in file size, stop reading now.

    ......

     

    Now, back to why the Adobe products are not quite up to scratch when it comes down to web export: they all fail at proper png compression. Fireworks did a reasonable job, but is now dead in the water, and still cannot match what can be achieved easily with other (freely available) tools.

     

    It has mainly to do with the final png file sizes.

     

    Here is the final version with a semi-transparent background (again, review this at true resolution):

    final3.png

    I opened this version in Photoshop, and saved it as a 24bit png with transparency.

     

    The original file consists of 626 unique colours.

     

    Photoshop file size: 16.9kb. (Yes, I did turn off meta data, though it still insists in adding fluff, see below)

    Photoline: 9.4kb

    Qolor Quantizer 1024 colours  (http://x128.ho.ua/color-quantizer.html): 6.34kb

     

    Do I need to say more? And without any visual loss of quality I could have reduced the final image to 64 colours in CQ:

    final4.png

    Which gets the file size down to a magical 4.8kb. More than three times smaller than Photoshop.

     

    The reason is that Photoshop's web export has not seen an update since ImageReady times (proved by the fact that if you open the Photoshop version in TweakPng one of the meta data fields states it was generated by Image Ready). It is truly behind the times. Antiquated, I might add.

     

    To exacerbate matters, Photoshop and Illustrator cannot export a fully transparent png with a reduced colour palette - only in 24bit colour. That is a show stopper.

     

    Colour Quantizer can however, and allows us to create a limited colour palette in steps of 16, 32, 64, 128, 256, 512(!), 1024(!), 2048(!), 4096(!), and true colour.

     

    There are also issues with jpg web export - for example we still cannot control the exact chroma subsampling quality. Or remove all the meta data. So even for jpg files it is preferable to turn to look for other software (like RIOT - Radical Image Optimization Tool).

     

    Whew! Well, if you read this far, congrats! Suffice to say, stop using Illustrator as a way to export web graphics, and rethink your workflow. And if you have to deal with png images and the web, avoid Adobe's products and use more efficient software for png optimization. (Unless you do not care about delivering the fastest download times, of course.)

     
    |
    Mark as:
1 2 Previous Next

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points