Poor image quality 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

First try the Cleaner. here's the link for CC but there exists one for Cs6 as well Use the CC Cleaner Tool to solve installation problems | CC, CS3-CS6
Everything I have read says that you kind of have to compromise file-size for quality. Could you post a screenshot of your settings?
also, if it helps: Creative Suite * Optimizing images

Similar Messages

I am using adobe photoshop cs6. I am facing a problem. When i save any image as "save for web". After saving image it show cropped. An image show many parts of the image after saving the image. Please help me. Thanks in advance.

I am using adobe photoshop cs6. I am facing a problem. When i save any image as "save for web". After saving image it show cropped. An image show many parts of the image after saving the image. Please help me. Thanks in advance.

Just go back in photoshop and use the Slice Select tool, then just click and select the slice and hit delete - if you're not sure which one is the active slice just right click and find the one that has the Delete Slice option.
It's possible you either added the slices by accident or if you received it from someone they just had the slices hidden. For the future, you can go to View > Show > Slices to display (or hide) slices.

Poor quality save for web exports

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

Not an Illustrator expert at all, but did you align your art work with the pixel grid? If you didn't, there can be results as you describe them. As I said, I am not an expert, but online searching for the subject may help.

Naming images using 'Save for Web' based on layer name

Hi All
Hope someone can help, I'm a bit stumped!
I've got a PSD in Photoshop CS4 which is for some T-Shirt Designs. I have 15 colours of shirts, all on 15 different layers. Then I have the design of the t-shirt on the top layer. I want to create 15 images with the design shown on each of the 15 shirt colours.
Is it possible to automate the saving of the files? ie Always have the top layer (the shirt design) on, but save a file with just one of the shirt layers on, and save the file so the filename reflects the layer name?
I seem to recall Imageready doing something like this, though maybe it was in the Animation section, its been a while :-)
Cheers
Mark

Have a look at layer comps and File>Scripts>Layer Comps to Files.
more about layer comps:
http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7870a.h tml
MTSTUNER

Save for web color shift - only on images smaller than 150x150px

I'm getting a color shift only on small images (150x150px or smaller) when I save for web in Photoshop CC and CS6. That's very weird as it doesn't happen to images larger than 150x150px! That issue happens with images with different measurements as well (e.g. rectangle), the small looks dull and the larger display the right color.
My Color Settings are set to "Monitor Color". Under save for web I have the following options not ticked: Embed Color Profile and Convert to sRGB. (viget.com/inspire/the-mysterious-save-for-web-color-shift)
I'm running the OS X 10.8.4 on a macbook pro, I tested that on both, Safari 6.0.5 and FF.
The squares in the screenshot were saved exatly the same way. The largerer displays the right color #FFCB32, but the smaller displays the color wrong.
I appreciate your help.
Cheers
P

JPG & PNG = Color Profile "Don't Color Manage this document". Save under save for web I have the following options not ticked: Embed Color Profile and Convert to sRGB. (viget.com/inspire/the-mysterious-save-for-web-color-shift)
Resizing in photoshop (Image Size), but the color shifts even with cropped image after save for web.

Why do my images appear washed out when I use Save for Web?

Q: The color/brightness/tone of my image changes when I use
Save for Web. Why?
A: Photoshop is a color-managed application. The Web is not. Normally, when you view an image in
Save for Web or
ImageReady you are viewing it without color management and see it how it will appear when uploaded to the Web.
To minimize changes, Convert your image to sRGB (i.e from
Edit menu choose
Convert to Profile )before using
Save for Web. You should also make sure that
Save for Web has been configured so that images are displayed using the document color profile (see attached screenshot for guidance).
You should also ensure that your monitor properly calibrated and the gamma is set to 2.2.

Same here. Didn't get any good New Years Eve photos indoors.

Save For Web vs. Resizing vs. File Size vs. PNG

In playing around with some settings while saving a .png file, I noticed some weird results. For this example, the original image is 300 x 300, but I want the final size to be 200 x 200. I get different results depending on the order I perform the following operations (I never thought the order mattered until now).
1. start with 300 x 300 image, choose save for web, select png-24, with transparency, white matte, convert to sRGB, change image size to 200 x 200, then save - the file size is 37kb
2. start with 300 x 300 image, use Photoshop's "image size" to change to 200 x 200, then save for web, etc - the file size is 111kb
So depending on which step I resize the image, the file size is significantly different - if I resize BEFORE using save for web, the file size is much larger. This is just weird to me, but I always resize AFTER choosing save for web, so that's why I've never caught this until now. In case you ask, while using Photoshop's "image size", all three options are checked at the bottom of that window, so nothing is getting re-sampled or anything like that.
The only thing I can think of is each of those methods treat pixel data differently when reducing the dimensions. When I overlay both exported .png files on top of each other, I see no difference in pixel quality and/or color shift - so why the big difference in file size? Unsurprisingly, if I just save the file straight to .png, the sharpness is much better, and the file size is 46kb. I did notice when saving for web, the colors become a little more saturated.
Are all these results typical? I've never really paid much attention to the results when exporting .png's. I always thought the results were lossless (in general).

Too many variables
What? There are 2 variables here (variables = scenarios = steps). Only two different operations.
1. resize the image, THEN use "save for web" = 91kb
2."save for web", THEN change image size = 157kb
Hopefully my logic translates here:
All other settings are the same. I even made sure the .psd was sRGB this time. The specific question was "why does the different workflow order produce such a big difference in file size"?
In creating a new test file (http://www.shan-dysigns.com/userForums/photoshop/savePNG.zip), I did notice an interesting thing: (I'm including my files in case you want to follow along or test for yourself)
If I merge all layers BEFORE performing the steps above, the file sizes were relatively closer to one another - 168kb and 157kb (respectively from the 1, 2 list above)
One thing to note is all the .psd layers are either shapes or text - this whole scenario may be totally different if each layer had rasterized content (actually, it does, by about -20kb).
The file size in step 1 above didn't jump until it had to consider rastered text/shapes into the calculation. So all this tells me the difference in file size has to do with how each process handles vector data. Maybe when you allow PS to resize the image first, the overall file size is smaller because the vector data gets recalculated???
I don't know how to properly interpret all these differences, but I do know there is something about PS's operation of resizing the canvas with vector data versus resizing the canvas with rasterized data - this has to be where the difference in file size lies.
Maybe I've just wasted a bunch of time on the obvious, but I think I learned something here. Now my head hurts and my eyes have popped out of my head.
So, Chris, I guess there ARE more variables in this situation. My curse is being nosey and wanting to know more technically about PS than most casual designers probably would care about.

Adobe Save For Web Error???

i have a core2duo, xp sp3 running 8GB of ram
3.5GB as my main memory, 4.5GB as my virtual memory.
setup by Gavotte Ramdisk.
and my photoshop cs3 scratch disk is set to a 500GB drive with more 300GB of free space. and i let photoshop cs3 uses upto 100% of the memory (1707MB) and i'm pretty sure i've read all the memory optimization for photoshop cs3 that i could find on the web...
yet i still get this error when trying to save an image using save for web.
my image dimension is 2560x1600 72dpi and saving using jpg high quality 60 settings, the image size is showing 702K. but once i click on save, this msg shows up...
Adobe Save For Web Error
Could not write the file, there is not enough scratch memory available.
what's going on? can somebody help me out?

I have 200gb available on my hard drive as well. I am also experiencing the same issue. Plenty of RAM, plenty of hard drive space. I'm getting more an more of the not enough scratch disk errors, even though I've got 2 scratch disks on separate volumes. I know the files I'm working on a pretty large, but normally I'm saving web versions from print resolution files. Photoshop should handle it. Older versions on slower machines would. I'm sure the error is something else, even though it's telling me that there is not enough room.
For me it appears it's only with the preview though.

Save for Web filetype default in PSE 8 on Windows 7

I just installed PSE 8 on a new Windows 7 system. On my earlier Windows XP system running PSE 6, the Save for Web filetype defaulted to JPEG Medium, which is what I wanted. On this installation, it defaults every time to GIF; I change it and save the file as a JPEG, and the next one defaults again to GIF. Closing PSE, rebooting Windows, nothing changes that. I would like to make the default JPEG Medium; is there a way?

On a MAC it does seem to stick on the last option you saved e.g. Jpeg if it was a Jpeg image.
For windows, this seems to work:
Find the file PhotoshopElementsEditor.exe using explorer (in the C:\Program Files\Adobe\Photoshop Elements 8.0 folder) right click on that file and choose Run As Administrator.
Go back to the editor, open an image, select Save for Web and choose jpeg; then save that file. The next time you run the editor and use the save for web command the jpeg type should hopefully stick as the default.

Activation of "Convert to sRGB" in "Save for Web"

Hello,
I am using a script scaling and exporting my image via "Save for Web and Devices". When I open the menu there's a checkbox called "Convert to sRGB" - I want to activate that checkbox via Script, as then I get the wanted colour results. I already had a look at the guide PDFs, but I didn't found that option, not as part of the export options array, nor generally elsewhere in the PS scripting guide.
So here's my question: how can I activate that checkbox with script?
Thank you
Thomas

I believe the 'ColorSpaceType' of the Export options is what you need.
EDIT: Sorry, I may have misspoken, I was under the impression that was part of the Export Options, but it does not seem to be.

Crop tool doesn't work in Save for Web GRRRRRR

Hi,
I'm working with Illustrator CS3 and seem to have a problem with the crop area tool. When exporting an image in "save for web", however, Illustrator just ignores the settings and crops to the artboard.
Is this a know bug? Or my computer going nuts? What should I do?
I took this from the lost archiveâ¦ I seems that slices influence this.
Anybody any clues? (AI 13.02/ OS X 10.4.10)
thnx

Basically, I would do this as James does. However, James is assuming you know what he means by "Use two applications of Transform effect to make the 3 x 4 array." Since you or another reader may not, I offer the following recipe that I prepared some time ago for a class. It's for 8-up business cards that will fit on letter-size stock.
SETTING UP THE ELEMENTS
New document, rename Layer 1 to Cards.
Make a rectangle 3.5 X 2 inches (the size of a standard business card). Give it no stroke and a light gray fill (so you can see it as reference; you can clear the fill later).
Make a single set of crop marks for the top left corner. I made a 27-pt. square (3/8 inch) - no stroke or fill - and another at 18 pts (1/4 inch) - .25 stroke, no fill. Copy a horizontal segment from the smaller square, paste, and drag it to snap its left anchor to the bottom left anchor of the larger square. Copy a vertical segment from the small square, paste, and drag it to snap its upper anchor to the top right corner of the larger square. Delete the small square and group the segments/large square. Drag this group into the Symbols panel so you never have to make one again. The group on the page is now a Symbol; drag it by its lower right anchor to snap to the upper left corner of the business card rectangle. The two quarter-inch crop marks are offset from the card by 1/8 inch.
Select the crop symbol.
Go to Effect > Distort & Transform > Transform
Move Horizontal: 3.5 inches (the width of the card)
Move Vertical: 0
Copies: 1.
Reference Point (tic-tac-toe thing): right column
Reflect X: On
OK. The crop marks appear on the upper right corner of the card.
Effect > Distort & Transform > Transform
(Warning box: Apply New Effect)
Move Horizontal: 0
Move Vertical: -2
Copies: 1
Reference Point: lower row
Reflect Y: On
OK. Crop marks appear on all four corners of the card.
At this point you can give the card rectangle a fill and stroke of None, and save the card/crop marks combination as a symbol. Call it BC.
Delete all the unused Symbols and Save Symbol Library: "BC"
Target the Card layer (click on the circle)
Effect > Distort & Transform > Transform
Move Horizontal: 4 inches
Move Vertical: 0
Copies: 1
Reference Point: any
Reflect: Both Off
OK. A copy of the card with its crop marks appears 1/2 inch to right of original.
Effect > Distort & Transform > Transform
Move Horizontal: 0
Move Vertical: -2.5 inches
Copies: 3
Reference Point: any
Reflect: Both Off
OK. 3 new rows of cards and crops appear below the first row
You now have crop marks for 8-up business cards; the original crop symbol and card rectangle are selected.
Go to the Graphic Styles panel and make this a new graphic style; name it BC 8-Up. Delete all the unused Graphic Styles, and Save Graphic Style Library as "BC 8-UP"
USING THE ELEMENTS
New document. Drag out an instance of the BC symbol, and put it in the upper left corner of your letter-size page.
Click the BC 8-Up Graphic Style. Eight blank business cards are laid out.
New layer. Over the top left business card create or place any combination of type or art you want repeated on all the cards.
Target the layer and click the BC 8-Up Graphic Style. The artwork appears in place on all the cards. Any editing you do in the top left card is instantly reflected in the others. Also, because the style is applied to the layer, anything you put on this layer will have the style applied to it.
New layer. Over the top left business card place any type you want to be different on each card. With it selected as an object, click the BC 8-Up style - the type appears on all the cards.
Object > Expand Appearance. The type on each card is now individually editable.

Color management in Save for Web not working

The Save for Web dialog box in the CS6 Beta is ignoring color profiles, so color is not managed. This has not been a problem in previous versions.

The saved output is just fine. I was referring to the images in the Save for Web dialogue
I just checked my settings. CS6 apparently changed my Preview setting from "Use Document Profile" to "Monitor Color." It also changed my Metadata setting. It should not do that!
Restoring the correct Preview setting solved the color management problem, but ONLY for the Preview image. The Original image is still not color managed.
I'm on a wide-gamut monitor, so sRGB images come out looking garish if there's no color profile embedded or it's ignored. That's what's happening here with the Original image in Save for Web. I imported an sRGB image with profile embedded, and it looks just fine in Photoshop while editing. Then I went to Save for Web, with the settings Embed Color Profile, Convert to sRGB, and Preview: Use Document Profile. The JPEG preview too looks just fine with these settings, but the Original looks garish, showing a lack of color management. The color in the two views is showing as completely different, though they both represent the same image with the same color profile embedded.
Going back to CS5, the same image is properly color managed in both Original and Preview. Both images show identical color, as they should.

Save For Web always saves as a GIF

Hi Guys,
I think I may have a bit of a bug with Photoshop CS6 on my Mac. Every time I try to save an image through Save For Web, the file will automatically save as a GIF, regardless of what option I choose from the drop down menu. I have tried a reinstall of Photoshop and checked my setting against someone elses machine but I can't seem to resolve the problem.
When I enter the Save For Web window, in the bottom left hand corner it says 'GIF' (just above the preview button and zoom button), if I was to change the drop down menu in the top right hand corner to JPEG or PNG, the GIF in the bottom left hand corner would stay the same, meaning that the file format would stay as a GIF.
I've added an screenshot to show whats going on, the image in the preview is just text with a outer glow around it.
Any ideas on this, as i'm a bit stumped on what my next move should be.
Cheers,
Chris

Never seen this problem before. Have you tried the classic; resetting your preferences? http://forums.adobe.com/thread/963474?tstart=0

Save for web preview not working in Photoshop CS4

Hello all.
I'm having a problem with Save for Web in Photoshop 11.0.2. Basically, whenever I move to save an image using "Save for Web & Devices," the preview window is stuck in GIF mode. I can move the Preset settings to any of the choices, and also change to any of the 5 image types underneath, but only a GIF setting at 100% dither/Selective palette/256 colors preview will show in the preview window.
I have trashed both the Adobe Save for Web 11.0 Prefs and the com.adobe.Photoshop.plist files, and have repaired permissions, but this doesn't resolve the problem.
Thanks in advance for any advice you can offer.
--jody radzik.

I fixed the problem by erasing "Save for Web" from within Photoshop rather than outside in the file tree.

How to save for web AND overwrite original files with Action?

Hello,
I want to compress a batch of images with "save for web" using a Photoshop Action, and I also want to preserve my folder structure and overwrite source files. The structure is important because it's complex and needs to be structured this way.
The Problem:
When I choose "save for web", I must define a destination. What happens is all optimized files from within the structure are saved in a single location.
Here's an example of the folder structure
Folder A
     - Subfolder A1
     - Subfolder A2
Folder B
     - Subfolder B1
     - Subfolder B2
          -Subfolder B2.2
Folder C
     -Subfolder C1
Summary
Is it possible for me to use a Photoshop Action with "save for web", and overwrite my files without moving them from the structure?

No need to re-invent the wheel.
Just learn how to use the Image Processor, Image Processor Pro, or Dr. Brown's Services 1-2-3 in Photoshop and/or Bridge.

Poor image quality save for web

Similar Messages

Maybe you are looking for