Poor image quality with save for web

It doesn't matter whether i'm exporting from Ai or Ps or whether it's CS6 or CC. I have changed the raster settings in Ai and i've also tried all optimization options with all different export file types (jpg, png, gif) at all different quality settings. It doesn't matter if I start with an ai, eps, pdf, png... the export result is always poor quality.
I have tried exporting at 300ppi and that does fix the quality issue and bloats the file size, but this way (the export route) is so time consuming since you have to resize your artwork each time as well as the artboard so that it doesn't cut off pixels. Save for web never used to have these quality issues and it also never used to cut off pixels around the edges. These workarounds prove very time consuming and produce file sizes that are not ideal.
When i first noticed this issue I was using Mavericks with CS6 and since am using Yosemite and Creative Cloud.
Steps to reproduce:
1. Create any bitmap or vector graphic in Ai or Ps, It doesn't matter whether you convert text to outlines or not
2. Save for web
3. View image in any application or browser to see poor quality and pixel trimming. Others running the same version and system are not having this issue, but I have checked many forums and found many others that do have this same issue but can't seem to find a solution.
Results:stair stepping, degradation, pixel trimming, general poor image quality
Expected results: Previously the save for web feature allowed for a decent quality image

I thought of that too so I tested on another machine with retina display and the file i saved on my machine looked bad on my machine and on the other comparable machine/display. So I sent them the original vector ai file and watched while they saved it the exact same way on their machine and the file looked fine on both of our machines/displays.
All of the settings they used appeared the same as what I used but with different results. I don't recall changing anything but does anyone know if there is some setting that could have been changed that is causing this issue?

Similar Messages

  • Photoshop batch production - issues with 'save for web'

    Hi,
    I'm having an issue with 'save for web' on a batch. I've just spent the last 2 hours searching the web and this forum and although the issue gets touched upon, the threads either suddenly head off in another direction, end, or i just struggle to make sense of the answers given.
    I have 350 images that i want to resize to thumbnails and then save for web. 2 hours ago this seemed like a 5 minute job.
    I creat an action called 'batch_thumbnail' and press 'Record'.
    I then select 'File' > 'Open' and select an image to open using the dialog box.
    I then select 'Image' > 'Image Size' and resize the image to the thumbnail size (200 x 125) and press 'OK'.
    I then select 'File' > 'Save for Web and Devices', set my optimisation settings and press 'save'.
    Using the dialog box that pops up, i navigate to a pre-created directory called 'thumbs' and press 'save'.
    I then select 'File' > 'Close' and on the dialog box that pops up i select 'Don't Save'.
    I then stop the action from recording.
    So far so good.
    I then select 'File' > 'Automate' > 'Batch...' and the dialog box appears.
    I select my action in the 'Action' drop down menu.
    In 'Source' i set the drop down menu to 'Folder', select 'Choose' and select the target directory with my 350 images in.
    In 'Destination' i set the drop down menu to 'Folder', select 'Choose' and select the target directory (thumbs), where i wish to save the thumbs.
    In 'File Naming' i leave the first box as 'document name', set the second to '_thumb' and have the third as 'extension'.
    I then click 'OK'.
    And this is where the problem begins. Everything works fine till it trys to save the second image. I can see what's happening, as the directory path and image name that are used whilst setting up the SFW part of the action, are getting hardcoded into the action. So every resulting image is being saved as the same file, instead of being overriden by the settings in 'File Naming'.
    I've tried selecting 'Override action 'Save' command', but it doesn't make any difference. Is it actually possible to batch produce files using 'Save for Web and Devices'?
    Cheers,
    James

    I have written a couple of Save For Web batch processors, they may be of use to you?
    They can both resize and run an action if required.
    CS2-CS3 http://www.ps-scripts.com/bb/viewtopic.php?t=2374
    CS4 http://www.ps-scripts.com/bb/viewtopic.php?t=2276 (This handles metadata)

  • Problems with "save for web" app low quality messed up images

    Please help I have never had a problem with the "save for web" application before (over three years) I am currently running A.I. cs3 on windows vista. in the past whenever I save anything this way the images were always clean. as of yesterday everything I try to save through the save for web app the images are very low quality all the vector has jagged edges, it is very low rez looking and the file sizes are very small, half the size they normaly would be. What did I do to change the settings or better yet how can I get it back to the way it was.

    Thank you for your help I moved the folder but it still did not fix this problem. it is also not just the jpg option under the save for web app but all the setting ie. gif, png, ect. ect. Also the the files sizes are much less, example I exported a design as a jpg with the quality setting about 6 the file size was 374kb when I exported the same design through the save for web app the file size was only 45 kb on the quilty setting of 100. further more in the preview screen of "save for web" the original images as well as the optimized both look messed up. The "save for web" app has always worked for me in the past never a problem and I use this app alot so it is very important.

  • Help - problem with save for web when jpg image is placed in file

    I have a jpg image that I placed in my Illustrator 5 file to use as a backdrop and then created several vector buttons on top.  When I attempt to create an arboard around a single button and then save for web, it ignores the artboard dimensions and shows the entire jpg dimensions.  If I create the same file without the jpg backdrop image, I am able to use the artboards to save just a single button.  Any time I place a jpg image in my Illustrator file and attempt to use the artboards, the artboards are ignored and the entire area of the jpg is saved.  I am able to use the slice tool to do the saving, but I prefer to use the artboards.  Does anyone have any suggestions on how to get the artboards to work when a jpg is placed in the file?  Thanks.

    THANK YOU!!!
    It says, "Clip to artboard".  I wasn't sure what clip meant, but that was it!  Thank you.

  • Batch doesn't seem to work with Save for Web

    Using Photoshop CS3 on Leopard. This should be simple: I want to create thumbnail images of a folder full of PDFs.
    I create an action that opens the PDF, opens the first page at a width of 200 pixels, flattens it, Save for Web at 60% quality, and closes without saving.
    I simply cannot run this action on a folder of PDFs without it trying to overwrite the same filename each time. 'Override Action "Save As" Commands' checkbox makes no difference, nor does choosing a different folder as destination.
    What am I doing wrong? I've been trying everything, and searching the web, for nearly 2 hours.
    francois

    Hi Paul,
    Thanks for the suggestion. I've tried it, but there are two problems:
    1) I use the "First page only" setting, but in some of my PDFs, it comes out with a double-page spread consisting of the last page and the first page.
    2) File sizes are much too big. If I use Save for Web at 60% quality, the same file comes to 16K, and with this script, 100KB. (This is for web use.)
    I doubt that the script could be adapted to fix these problems, so I'm still hoping somebody can advise how to make Photoshop's Batch function work correctly.
    francois

  • Script Needed to work with "Save for Web" Tool

    I am looking to compress the JPG image files using the Save for Web tool within Photoshop CS2. As you know, this tool yields better results in image quality and file size than the standard Photoshop Save As command.
    To this end, I would like to batch process multiple images within multiple sub-folders. Unfortunately, I havent found a process that will allow the use of the Save for Web JPG compression, batch process the JPG files within a sub-folder structure and re-write the images to the same folder.
    What I have managed to accomplish up to this point, is create a Photoshop Action incorporating the Save for Web tool. However, the Save for Web menu always prompts to save a file to a specified folder. This seems to be the Catch-22 to the batch processing capabilities. When using Photoshops batch processing feature with this Action, and also enabling include all sub-folders, all the resulting files created are always saved to one specified folder.
    I need a script (perhaps Java or Visual Basic) which will run in Photoshop, and allow the use the Save for Web tool (JPG High, Quality 60, Optimized), batch process a series of images contained within a sub-folder structure and then re-write the image files to the same location. Can anyone help with this?

    The files must be very large.
    On my machine
    AMD Athlon 64 3200+ 2.01GHz 1GB Ram
    It failed with an uncompressed file 347.6MB (40.9MB on Hard Disc) with not enough memory.
    It managed to do a 277.4MB uncompressed file (34.3MB) with no problem although it was slow.
    With such large files it might be betted to just do a folder at a time so there are two new vars that you can alter.
    MAXJPGSIZE this is the size of the file on the Hard Drive.
    SUBFOLDERS setting this to true will include subfolders and false will only process the selected folder.
    Paul.
    //GLOBAL vars, amend values to suit.
    //Maximum size of file in Megabytes  to process (This is the file size on the Hard Drive)
    MAXJPGSIZE = 34;
    // "true" = include subfolders - "false" do not include subfolders
    SUBFOLDERS = true;
    var imageFolder = Folder.selectDialog("Select the folder with JPGs to process");
    if (imageFolder != null)  processFolder(imageFolder);
    function processFolder(folder) {
        var fileList = folder.getFiles()
         for (var i = 0; i < fileList.length; i++) {
            var file = fileList[i];
      if (file instanceof File && file.name.match(/\.jpg$/i)) {
         if((file.length/1024/1024).toFixed(0) < MAXJPGSIZE +1){
                  open(file);
    var doc = app.activeDocument;
    var strtRulerUnits = app.preferences.rulerUnits;
    var strtTypeUnits = app.preferences.typeUnits;
    app.preferences.rulerUnits = Units.PIXELS;
    app.preferences.typeUnits = TypeUnits.PIXELS;
    var saveFile = new File(decodeURI(activeDocument.fullName.fsName));
    saveFile.remove();
    SaveForWeb(saveFile,60);
    app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
    app.purge(PurgeTarget.ALLCACHES);
    $.gc();
    app.preferences.rulerUnits = strtRulerUnits;
    app.preferences.typeUnits = strtTypeUnits;    
      } else
    if (file instanceof Folder && SUBFOLDERS) {
           processFolder(file);
    function SaveForWeb(saveFile,jpegQuality) {
    var sfwOptions = new ExportOptionsSaveForWeb();
       sfwOptions.format = SaveDocumentType.JPEG;
       sfwOptions.includeProfile = false;
       sfwOptions.interlaced = 0;
       sfwOptions.optimized = true;
       sfwOptions.quality = jpegQuality;
    app.activeDocument.exportDocument(saveFile, ExportType.SAVEFORWEB, sfwOptions);

  • Colour issue with 'Save for Web' - Photoshop Elements 6 (Mac)

    Cross posted here, but no answer so far. Sorry for cross posting. For me, this is urgent, but I know it's not for anyone else, so apologies for putting 'urgent'.
    http://www.mac-forums.com/forums/images-graphic-design-digital-photography/150670-colour-i ssue-save-web-photoshop-elements-6-a.html#post840419
    This is a similar issue to this:
    Save for web color issue
    Except the user who posted the above was using photoshop cs3, and I'm using Adobe Photoshop Elements 6.
    When I work on a photo, I get it just right, then go to Save for Web, and the original it previews is loads lighter than the orginal I was working on in the first place. See 'Picture 1' attachment.
    I have changed the colour settings on the Save for Web options - I've chosen each one in turn, and none fix the problem.
    There seems to be no similar option in PSE6 to this that fixed it in CS3:
    IN the save for web box there is a small round button with an arrow in it (near the Done button).
    In the list when this button is pressed deselect Convert to sRGB
    I used to use PSE2 on a PC, and never had this problem. I didn't need to mess about with colour profiles or anything similar on the PC. The original was the original, not a washed out version of the original. Why spend ages getting the file just right, only for Save for Web to screw it up?
    Any advice to fix this would be much appreciated.
    Thanks

    Thanks very much for your reply.
    I've uploaded the images here:
    http://jimpix.co.uk/images/Picture 1.jpg
    http://jimpix.co.uk/images/Picture 2.png
    I deleted the prefs. file you suggested, and then opened PSE6.
    I then tried the profile setting you suggested - but it's not an option:
    http://jimpix.co.uk/images/Picture 3.png
    I tried 'remove profile' just in case that worked, but the same effect happens on Save for Web.
    Not sure what to try next!
    Thanks

  • Huge file size with Save for Web but preview is ok

    Hi,
    I have googled but not found anything about this but I have the same problem on my computer and also on a colleagues computer so it seems it should not be totally unknown.
    This is what i do
    1 Open a eps file, one color logo, 72dpi, size it to 110x21
    2 save for web
    3 select png-24 format. preview says file size ~1.3 kB
    4 save -> actual file size on disk is 4 kB (ie 3 times bigger file size than it should be)
    5 Preview and then right click in browser + save image as gives correct file size (on my colleagues computer this does not work, he always gets the wrong size)
    I have also tried with gif and various settings, image sizes etc and the result is the same.
    I'm using Windows Vista 32-bit and Photoshop CS4.
    Is this a known problem?
    Thanks

    Thanks for your reply but i don't think that's it. When I check properties on the file in Windows it tells both "Size" and "Size on disk", where the latter is actual size on disk (depending on cluster size) but the size I am talking about is the first one.
    Also just to be clear, when I say Preview, I mean clicking the Preview button that opens the file in a browser window. Not the preview within the Save for Web and Devices dialog. So I think this file is correctly created and *should* be the same as if I click Save (but it obviously isn't)
    This sounds very much like a bug to me, anyone else who have seen this or can recreate?
    Thanks

  • IBooks author color shift with "Save for web devices..."

    Hi! I'm a web developer and I'm learning to use iBooks. It's a really easy tool, but there is a problem with color management wich is driving me crazy. This happen when I export images from "Save for web devices..." from Photoshop, then drag it to iBooks author.
    As I do for web development, I do this:
    1) Configure photoshop Color Settings to work with "Color Monitor"
    2) Remove any color management from my document
    3) Proof Setup > Monitor RGB
    4) Disable Proof Colors
    5) Use "Save for web devices..." with ICC profile and sRGB unchecked
    The exported JPG looks fine everywhere... Photoshop, Preview, Safari, Chrome, FF... but looks washed out when I drag it to iBooks Author. Why?
    I solved this issue converting to sRGBIEC61966-2.1 profile and checking ICC profile when  "Save for web devices...", but I'm not confortable with this workaround because I'm not sure about what I'm doing exactly, and I am not sure if this images are gonna look good on any device (I only own an iPad 3).
    Somebody know a best method to deal with this?
    Thanks!

    Hi KT. Thanks for your response. I'm already using this formats. Anyway, the problem occurs within iBooks Author interface. I mean: I can see the color shift (or washed out...) at iBooks Author at my computer screen. Of course, when I test it on iPad it also looks bad.
    It's incredibly strange because the JPGs I'm using looks fine everywhere else except iBooks Author.

  • IPTC issues with Save for Web

    I have images with the copyright notice field, copyright status, provider and source fields filled in.
    When I do a save for web, I'm trying to adjust the IPTC data that gets saved but nothing I do seems to work. On thumbnails, I don't need any of that data but I can't get it removed. No matter what I select, there's always stuff in the copyright notice field.
    Similarly, if I try to simply change the copyright status field and leave everything else as is, I usually lose (data gets wiped out) provider and source and I get extra data put into the copyright URL field which wasn't there before.
    I also get the file data cannot be read error when opening up these files sometimes because photoshops seems to mess up how it writes the IPTC data. Image data seems file, it's only when photoshop fills in the copyright url with the same data from the copyright notice without asking me.
    In CS2, I had to use ImageReady because it would wipe out all the data and then I just used iView to easily put back in the 3 fields I was using. Now that IR is gone, I figure I need to migrate this to CS3 but no matter what combination of options I select, it seems metadata handling is horribly inconsistent.
    Can anyone tell me how it works? I've tried making a script step to set the data I want, I've tried working with an image with the fields the way I want them and then doing the save for web so it records the data I want, I've tried both with and without the include XMP option but I can't seem to get anything to work properly.
    Edit: Didn't make it clear but I'm trying to record a batch action where I scale images to 6 different sizes and then do a save for web at each size.
    Please help.
    Thanks

    Depending on your use of the image in context, won't the transparent strip "disappear?"
    The only solution I know is to open it in Photoshop and manually crop out the transparent strip. AI or Save for Web also seems to antialias the edge of free-standing art over a transparent background. I just make the artwork slightly larger than the final cropped size, save for web, then crop in Photoshop.

  • Error message - image exceeds size save for web was designed for

    When I try to Save to Web in Illustrator CS3, I get the following error message: "the image exceeds the size save for web was designed for". Even when I click that I want to go ahead and save it, it sends another error that reads "could not complete this operation. the rasterized image exceeded the maximum bounds for Save for Web".
    Earlier in the day yesterday, I saved for web with no issue. NOw, it doesn't matter how small my design is, it is giving this error.
    Please advise.

    > So in CS3 Save for Web grabs the Artboard, neither the artwork nor the Crop Area/Marks area?
    Creating a new document using "Basic RGB Document" and then "Save for Web & Devices" crops either to the artboard or to the artwork as selected from the "image size" tab in the save-for-web window.
    If your artwork extends beyond the artboard, selecting "clip to artboard" will obviously eliminate everything outside the artboard. Unchecking it will crop the image to the artwork in the file (and thankfully not any artwork that is hidden).
    If you make crop marks in the file, you can choose to either clip to the artboard or not. Not will clip to the crop marks, acting as kind of a secondary artboard.
    ETA:
    You can choose which type of on-screen file type you want your output to be. From GIF, JPG, PNG-8, PNG-24, SWF, SVG, and WBMP. And whether or not you want transparency in those formats that support it.

  • Issues With Save For Web CS6

    I'm having some issues with my file when trying to Save For Web. A band of transparency appears above my image even though I have everything cropped to the artboard, and the artboard is exactly the size I want the final image to be. If I uncheck "Clip to Artboard" the band of transparency disappears from the top, but reappears on the right side. It seems as if the artboard area is calculated differently in the Save For Web screen; its slightly off. I've included some images so you can see the issue.
    Trying to save for web as a .png with "Clip To Artboard" selected; a tiny (one pixel tall?) band of transparency on the top of the image.
    Trying to save for web as a .png without "Clip To Artboard" selected; the image seems to shift and the band of transparency appears on the right size. Also some of the pieces of the image appear on the bottom outside of the artboard.
    I made sure to crop each element of my image to fit exactly on the artboard. Previously, I had made sure to use a clipping mask exactly the size of the artboard and still had these issues. I would like my .png to not have a band of transparency. It has the same issue when I change it to .jpg, but instead has a white matte band. What am I doing wrong, or is this just an issue with Illustrator? Thanks in advance!

    Depending on your use of the image in context, won't the transparent strip "disappear?"
    The only solution I know is to open it in Photoshop and manually crop out the transparent strip. AI or Save for Web also seems to antialias the edge of free-standing art over a transparent background. I just make the artwork slightly larger than the final cropped size, save for web, then crop in Photoshop.

  • How to manage automated batch processing with save for web?

    Hi All,
    This has been driving me insane. I am currently in PhotoshopCC and I know that several versions back I had no problems doing this but now I cannot create a generic action that I can then have save out to different folders.
    What I used to be able to do and want to do again:
    I have a project that requires me to turn a print magazine into a website quarterly. I receive the files packaged from InDesign and I want to process the images to specific sizes and then save as web optimized.
    For each article I want to be able to select the source folder and then a unique folder to save to for each article, so that optimized  images for each article remain with the article files.
    I never had an issue  doing this until a version or two back, since then I can only create an action that will save for web to whatever folder is in the action.
    I resorted to using image processing scripts and never realized I was not resampleing  the images down to 72 dpi and am having an attack of how could I be so stupid.
    If anyone can direct me to creating an action that can accomplish the save for web with the ability to control what folder my files save to I'd really appreciate it.
    Thanks,
    Rose

    http://russellbrown.com/scripts.html akk you need is the Image Processor Pro.jsx and Image Processor Pro.xml  from his services install package just rename the file extension to Zip and extract its contents and copy the two files to your Photoshop's path presets\scripts\

  • Possible Problem with Save for Web and Devices?

    II've come here to the forum for some insight on why a gif file created by save for web and devices command is not showing up as an image in an uploading dialog box for my website.  I'm buildiing my website with word press and a custom freelancer theme.  I've created a customized header with Illustrator and have been saving the file with the save for web and devices command.  Once I have my gif file, I go to my theme uploader and try to upload the gif image and place it on my homepage.  I've not had any problems with doing this until yesterday, when I tried to upload an updated file.  What usually happens is that the thumbnail image shows up in the dialog box, I select my options, and click insert.  But what's started happening yesterday is that the thumbnail does not show up, unless I click on edit image.  This makes no difference, as when I click insert and go to my homepage and refresh it, the header doesn't show up.  I've tried working with the developer of the theme to resolve this problem and so far we've not found a solution.  I've tried to upload the header with different file types: jpg, png, tiff, but they don't work.  I thought I'd come here to see if anyone might have some suggestions.  The problem may not be with Illustrator's save for web and devices, but I thought I'd give this forum a shot.  Thanks for any and all respones. :[

    CT,
    If you can see and open the GIF/whatever (with any viewing application), the Illustrator Save for Web&Devices works. If not, you may ask about it in the Illustrator forum:
    http://forums.adobe.com/community/illustrator/illustrator_general?view=discussions
    If the image is there, to have the issue solved quickly, I believe you should ask in a forum covering the web building application.

  • Can't change image size % in save for web

    Hello,
    I'm using Photoshop CC. When slicing a web mockup, and saving for web, the image percent is blocked at 58.49% and I am not able to increase it to 100%. So my original image of 1024px wide comes out at 600px
    I haven't changed any settings (that I know of) and do not have this problem on any other mockup files I have. What setting do I need to adjust in order to save for web my slices at 100%?
    Thanks!

    I worked out what the issue was, my document height was over 8000px tall which is causing the issue, even though my slices are less than 2000px tall. When I temporarily crop the document to below 7000px, I can save out the slices at 100%. Annoying work around.
    It seems a bit random.

Maybe you are looking for

  • Illustrator CC crashes on startup after update

    HI guys, Updated Illustrator CC today, and it now crashes after the splash screen. Any advice appreciated! Process:         Adobe Illustrator [1038] Path:            /Applications/Adobe Illustrator CC/Adobe Illustrator.app/Contents/MacOS/Adobe Illust

  • Is there a way to add a column in a measurement file?

    Hello, Suppose I take several measurements from 3 channels (at the same time) and they all get saved in a text (.LVM) file using the "Write to Measurement File" method. For ex (note that I left the second column empty (with zero's) on purpose): X_Val

  • While surfing a small black window opens up with the firefox header and i cant close or minimize it

    When i browse the internet a small black window opens up in the bottom right corner that i cant close or minimize and it has the firefox header. It came up randomly and I dont use many addons. What can i do?

  • Number of digits in Skype number?

    I'd like to make a number for Australia. I'm just wondering how many digits are in a Skype number? And what numbers is the Skype number likely to start with? Thanks Solved! Go to Solution.

  • Rosettanet problem

    hello sir, i am getting one error while replicating the rosettanet sample in my platform domain. I am getting this error <<B2B-BPM-Plugin> INFO: Log from Workflow: PIP3A2_Customer_RN2 started. > <Error> <B2B> <000000> <<B2B-BPM-Plugin> ERROR: Error w