Save for Web producing inconsistent results

Hi-
I am currently working on a printed book that will also be available online. I am a print designer, and am having difficulty saving for the web. I am setting type in illustrator, and then adding a pixel font for annotations. When saving for the web, I first rasterize the pixel font with anti-alias off, (which is working fine), but when I save for the web, (png-24), the results of the system fonts are mixed; some text is blurry, some text is light, and other text is dark, (the pixel font is okay). I am really stuck here. I have tried rasterizing all the text, anti-aliasing the system fonts, creating outlines, but nothing seems to work. Is there anyone out there that knows what I am doing wrong???

are you rasterizing your non-pixel font your text with preserve hinting in the rasterize settings?
this topic always spurs a lot of controversy here, mostly because Illustrator does a pretty mediocre job of rasterizing text, compared to what Safari, Preview, and Reader 9 can do. There's no one good way to do it in illustrator.
Can you post a sample of the results you are getting?

Similar Messages

Save for web doesn't match artboard

I have been using the artboard tool to try and save icons individually from a document with several dozen icons on the work space. I click the artboard tool, drag a box around the icon and then do "save for web". The resulting image I see in the save for web screen is slightly cropped and does not match the area that I selected with the artboard tool.
Am I doing something wrong?
I am running Illustrator CS4 on a Dell PC (64 bit) with Windows 7 Professional.
Any help would be greatly apprecaited.
Paul

You don't use pixel preview and possibly also do not work at 72dpi, do you? That's why your crop lands on sub-pixel values and is quantised to the next whole pixel, changing the effective output dimensions. Aside from that, why bother with artboards? You could just use the slice tool and save it all in one go...
Mylenium

CS4 Save For Web GIF settings confusion

Hi,
I am working on a new website and have run into a problem I just can't seem to solve: my navigation links are made using a GIF and for some reason the background color of the GIF is not matching the background color of the page.
The test page is here:
http://www.johnblaustein.com/webtest2/
Note that nothing in the page is working yet. If you look closely, you will see that the navigation image is a slightly different color than the background. Very slight, but different. (Once I solve this color issue, I will make each link into a separate button with slices.)
In PS, I have created a file as follows: new file (72dpi), fill background with the same color I use on the webpage: c4c0b4. Create new layer and add the type. The new file is in Adobe RGB, but I convert to sRGB before saving for web (although I don't think that matters). When I Save For Web, I started with the default GIF settings, but when I got the color mismatch, I tried any number of other settings. I read a post here that suggested turning off the background layer of the image before Save For Web, but that resulted in the text looking bad. I've tried different color settings (32, 128), matte settings and other settings with no luck. Convert to sRBG is always checked.
I like solving these things on my own, but I struck out on this one. I am here in the hopes that one of you gurus can tell me what I am doing wrong.
Thanks very much.
John

SUCCESS!
Curt.... you were correct. I needed to create the new file in sRGB, not create the file in Adobe 1998 and then convert.
Here is another test, showing that the text box has completely disappeared:
http://www.johnblaustein.com/webtest2/nav-srgb-test
The text box is exactly the same size as in the original page I posted.
What I did is this:
Create new file to specified dimensions. In the New File dialog, for Background Contents, I selected my webpage color, c4c0b4. I clicked the Advanced arrow and selected sRGB as the color profile. I added white text, then flattened the image. In the Save For Web dialog, I clicked the Preset dropdown and selected GIF 128 Dithered and did not change any of those preset settings. I inserted the new image into a copy of the webpage and you can see that there is absolutely no indication of where the image ends and the page background starts.
I may not need 128 colors, so I'll play with that, but at least I know where the problem is.
So... thank you Curt!
What would we do without these forums?
John
By the way... I see your message was cut off in the forum, but the full message came to my email: "I am over my head on this subject. The only thing I noticed is that you are adding the color in AdobeRGB and then converting to sRGB. Will this give a slightly different color than using sRGB for the New Image from the start?"

Ps CS6 Save For Web - various resampling choices give identical result

Ps CS6
OS X 10.6.8
Save For Web offers 5 resampling algorithms (the same 5 as in Image Size, ignoring "Bicubic Automatic", of course) for when the output is being resized.
All choices except "Nearest Neighbor" output an identical image (which is different to all results of Image Size). Although the "Bilinear" output contains the same pixels as the output of the 3 bicubics, its file size is slightly different then their shared file size.
I normally resize with Image Size, so this post is not a request for help. This is only to alert Adobe to the apparent problem.

conroy2009-
i am happy to report the issue for you, with some more information to better understand the problem.
i would recommend you take a look at the following link:
http://www.jeremymoore.com/GettingGoodPictures/PhotoshopResample/
http://help.adobe.com/en_US/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7945a.h tml#WSfd1234e1c4b69f30ea53e41001031ab64-793ca
http://www.photoshopessentials.com/essentials/resizing-vs-resampling.php
the link above better explains the differences in the three resampling modes.
-janelle

When i 'save for web and devices' in illustrator, the resulting jpg is cropped

Has anyone run into this before? I'm trying to 'save for web and devices" in illustrator, but the resulting jpg doesn't show the whole artboard. its cropped off some of the top and bottom. my file is a simple box with text inside. no other graphical elements of any kind.

Thanks Monika. I have a 3.25x3" artboard that has just text on it. I selected "save for web and devices" and the preview window shows the artboard smaller than actual size so some of the text is cut off or pushed to the edge. I saved it just to see what would happen and the resulting file is just as was with the preview. I also tried doing a 'save as' for the jpg and same result. Oddly, I outlined the artboard with a box and the jpg came out fine. Any ideas?

Why does the Fireworks save for web function give better results than in Photoshop?

Having used the trial version of Fireworks, I have noticed that the save for web function gives greater compression and image quality than saving for web in Photoshop. Why is this?
As Adobe are not continuing in developing Fireworks, does anyone know if will they will improve the save for web function in Photoshop to match the Fireworks version?
Are there any third party companies who anyone can recommend who will process large volumes of images for web?
Thanks

One of my favourite topics ;-P
First, the save for web function in Photoshop has not seen any real updates in a long time. In Fireworks PNG export allows for fully transparent optimized files with indexed 256 or less colours, which is impossible in the save for web function in Photohop. It is unsupported.
This is one of the reasons why Fireworks does a much better job than Photoshop. Another reason is that Photoshop adds meta junk in its exported files, and this also increases the file size (and should be removed, because there are also a number of fields which include information about your setup).
One other caveat is that Photoshop's save for web functions neither allows for a choice in chroma subsampling, and instead decides automatically below a certain quality threshold to degrade the colour sharpness quality. The user has no control over this. (Fireworks also limits the user this way.)
One thing to be careful of: FW's jpg quality setting, and PS's quality settings are very different - a 50 in Photoshop is not the same 50 setting in Fireworks.
For jpg optimization I generally use RIOT (free): http://luci.criosweb.ro/riot/
(When you install, be careful NOT to install the extra junkware!)
Fireworks cannot change the chroma subsampling to 4:2:0, which does degrade the quality a bit compared to RIOT and Photoshop in my experience. Photoshop adds useless meta information, even if the user tells it not to do that. RIOT allows you to remove that information, saving 6k. RIOT also offers an automatic mode that optimizes existing jpg images without degrading the quality further, and often saves 10k or more, depending on the images.
Interestingly enough, in my tests exported Fireworks jpg images are always reduced in file size by RIOT, due to FW's jpg export limitations, without any image degradation.
In my tests FW's jpg quality versus file size turns out to be the worst of all three. RIOT generally wins, or is at least on par with Photoshop.
As for PNG export, Photoshop's save for web function is quite abysmal. No 256 colour full transparency export is possible, while Fireworks does support this.
Having said that, there is a free alternative that leaves both Photoshop AND Fireworks in the dust: Color Quantizer. http://x128.ho.ua/color-quantizer.html
CQ is an amazing little tool: with it anyone can create PNG files with full transparency and reduced to ANY number of colours! It means that a 512 colour PNG with full transparency is now very easy to do. On top of that, for more difficult images a simple quality mask brush tool allows the user to control and retain even small colour details in a PNG, while reducing the file size to an absolute minimum.
CQ is one of the best kept secrets of a Web Developer's toolkit. And it is free!
Both RIOT and Color Quantizer have a built-in batch mode. Both are available for WIndows. Not for Mac. If you are on a Mac, try imageOptim. Not nearly as good as RIOT and CQ, but quite passable.
PS to be fair, the newest versions of Photoshop do allow for export of 8bit PNGs with full transparency through the use of its Generator functionality. But again, it cannot compete with CQ. And as far as I am aware, Generator cannot be used in Photoshop's batch processing (which, btw, is very slow! For simpler daily image processing tasks I have to do in batches, I prefer IrfanView, which is lightning fast! IrfanView).

Gif becomes grainy/pixelated in 'Save For Web'

Hello! I recently switched laptops and I have been having major issues trying to regain the quality gifs I used to make. After I have my gif set to go, I go to save it in 'Save For Web'. This is where all of my problems start. My gif no longer looks smooth, but the entire thing has a grainy or pixelated look -- and it doesn't change no matter how I fiddle with my settings. When switching from the 'original' to the 'optimized' tab in the save for web page, you can obviously see a loss of quality. It may be slight, but it makes a huge difference to me.
Here's a side by side reference:
Not sure if it will help, but here are my settings when saving (I have changed from 'pattern' to 'diffusion' and nothing changes):
Thank you for any help you can provide!

First, JJMack is correct: lots of colours (around 32100) in this example do make it harder to convert without grain.
Second, the quality of the GIFs you produced in Save for Web (SfW) prior to the purchase of the new laptop were never any "better" - it merely means that the previous screen was unable to display the results at a decent enough quality to actually discern the differences between the original and the GIF version with reduced colours. Screen quality does matter.
Second, Photoshop's Save for Web colour reduction algorithms are quite old-fashioned, and (far) better methods are available. Not in Photoshop, however. For a good conversion you will have to look elsewhere.
Here is the original version @2x zoom (32101 colours):
Photoshop's version. The best visual quality I could achieve in SfW (diffusion dither at 81%, perceptual). Obvious banding issues, and a very grainy result.
Next up: RIOT (Radical Image Optimization Tool). RIOT features a newer "NeuQuant neural-net" colour quantization algorithm. Notice how the gradients are quite nicely retained, although here and there some issues pop up (lips/makeup, building, arm highlight, and greenery are missing colour). Overall, though, the final result is much less grainy looking than Photoshop's effort. At the expense of smaller areas with unique colours.
Next, let's try Color Quantizer with standard settings, a two factor gradient priority, and 256 colours. Dithering was set to Shiau-Fan @75%. Slight banding in the lighter areas of the background, and the building and lips are again missing colours from the original. Much less grainy than Photoshop's version.
Colour Quantizer features a quality mask brush, which allows us to safeguard smaller areas with unique colours from colour degradation. I painted a mask for the lips, the building and greenery in the background, the skin of the woman on the right in the background, the lighter area around the vent, and the forehead to preserve those areas' quality as much as possible.
I feel this result speaks for itself. There is slight banding visible in the lighter area of the wall on the right, but still much less pronounced compared to SfW's version. The colours are all there, especially the important ones for the makeup and the smooth facial tones of Kate. The shoulder's highlight is also preserved nicely. Even the woman on the right in the background looks spot on (which was yet another sore point in SfW's version).
Arguably the best version. Far superior to Photoshop's failed effort.
Fourth, if you are still using GIF to optimize still images: STOP NOW. GIF is terrible in comparison to properly optimized and compressed PNG files. Only use GIF when small animated movies are your goal.
Here is a 512 colour version produced in Color Quantizer (Photoshop's SfW function lets us down once more, unfortunately: there is no option to reduce an image to 512 colours for PNG):
This last version is visually (mostly) indistinguishable from the original, and clocks in at only 52kb.
Of course, if you are saving this as a still image, jpg should have been your choice in the first place, since it is a photo.
Conclusions:
- avoid Photoshop's "Save for Web" function if your intention is a quality colour reduction;
- avoid GIF for still images. Either use PNG or JPG. JPG works best for photos;
- avoid Photoshop and SfW if your intention is to optimize PNGs well. Sfw cannot save PNG files with reduced colours beyond 256 colours;
- fall back to external and/or online utilities to optimize PNG and GIF files. Color Quantizer and RIOT deliver better results than SfW. Or use online optimization tools to optimize animated GIFs (Optimize animated GIF). You can also optimize each frame in a tool such as CQ, and then import the individual frames into a animated GIF utility. Remember, each frame can save its own custom 256 colour palette;
- for optimum quality a quality mask tool, such as the one in CQ, is a very effective and efficient method to guarantee the best possible conversion;
- file sizes of png files created in external utilities almost always beat the ones generated in Photoshop and SfW;
- a better choice to export PNG files is Photoshop CC Generator. At least that one allows for 8bit PNG files with full transparency (another missing essential feature that SfW fails to provide).
Other resources (these refer to png, but are also effective for GIF optimization in Photoshop):
http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/
PNG Optimization Guide: More Clever Techniques - Smashing Magazine
Color Quantizer: Color quantizer
RIOT standalone version (no installation required): http://download.criosweb.ro/download.php?sid=R

A different take on the "Save For Web" color shift issue...

Ok, everyone who has fussed much with photoshop and "Save For Web" knows about the color shift issue. If you want your colors to look right after you "save for web", you have to work in the sRGB colorspace, and have Proof Colors checked (soft proofing on) and the proof color setup set to Monitor RGB, otherwise what you get looks terrible when displayed in a browser.
But of course if you are editing for print, this is exactly what you DON'T want to do. Well, I work in both. In fact, often the same images, and I want them to appear as close as reasonably possible in both print and web formats, and without a lot of fussing on my part. And I'm pickiest about the print mode, since I have the most control there, so that's the way I want to edit by default.
Nothing new here.
Now comes the interesting part (in my mind, anyway). Obviously there is a known remapping -- because PhotoShop DOES it when you select Proof Colors. So the inverse mapping must also be known (with some gamut issues, but I'm not concerned with those, because, after all, I'm VIEWING it on a monitor anyway!). What I want is a plug-in that automatically applies that inverse mapping so that, when I do a Save For Web, I end up with the colors I've been viewing all the time when setting the shot up in print mode. Then, too, I don't have to worry about what mode I'm in when I'm editing -- it just fixes it when doing a save-for-web.
Again, I want to edit in my normal print mode (typically ProPhoto colorspace, and with soft-proofing off or set to the printer/medium combination I expect to use), then do a single operation (might be a multi-step action) to "screw up" my colors so that when I then do a "Save-For-Web", the resulting image, when viewed on the average color-stupid browser, looks like the image I've been seeing in Photoshop.
Anyone know of such a beast?   I would gladly pay for a plug-in that really works and fixes the problem.
And if you have other solutions, I'm interested, but the absolute requirement is that it I do one single edit pass for my colors for both print and web use, and I get what I see on the screen in PS on both the prints and on the web display (i.e., working in sRGB/Monitor RGB mode all the time won't cut it). And PREFERABLY, let me do all my editing work in the ProPhoto (or at least AdobeRGB) colorspace so I have a gamut closer to what the printer can do.
Anyone got a decent solution for this?

Sorry, I think I'm being unclear. This has nothing to do with individual monitor profiles. In Proof Setup, "Monitor RGB" amounts to turning off ALL color management, and simply letting the monitor do what it will. It is what the vast majority of web browsers do (even if the operating system provides color management, the browsers don't take advantage of it), so that is what you need to consider for images that will be viewed on a web browser. If you convert your image to sRGB, select Monitor RGB in Proof Set up, and turn on Proof Colors, you will see the image as it would appear on a web browser (after you save it as a jpg or use "Save For Web/Devices" to save it as a jpg).   Since almost everyone is running different uncalibrated monitors, there will be lots of variation in how it will look to them, so precise control of the color is unimportant.
That said, I would expect the color on a calibrated monitor (such as the one I use when editing) to be reasonably close to the colors I am seeing while editing in PS. To the extent a monitor deviates from "calibrated", those colors will vary, but a good monitor should show good colors.   Unfortunately, this is NOT the case, as my previous post shows. The colors produced by the steps above are oversaturated and significantly shifted in hue. There is, to my mind, anyway, no reason for this. Adobe clearly knows what the mapping is between the colors as it displays them in PS and the un-controlled "Monitor RGB" -- that is, it is the color map they are using during normal editing display. If they were to reverse-apply that map prior to saving it as a jpg, then the image would appear on a browser on that same (presumably calibrated) monitor very similar to what you set up when editing. Anyone else viewing the image on a web browser with a calibrated monitor would also see good colors. To the extent other viewers' monitors are out of calibration, their colors will suck, but there's nothing you can do about that.
I guess in some sense I AM "asking for a Color-Mamangement-solution for a "non-Color-Management-situation", but specifically I'm asking for PS Color Management to do the best it can for non-Color-Managed situations that we all face every day.
Does that make more sense?

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.

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

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?

How differs soft proofing in View - Proof Colors and Save for Web - Preview?

Hi, I'm currently confused with one inconsistency. My working space is Adobe RGB and I use calibrated monitor. After I finish my work on image I go to View -> Proof Colors -> Internet Standard RGB. Image looks terribly with the overall violet/purple hue. Then I open Save for Web dialogue, I check Convert to RGB and from Preview options I select again Internet Standard RGB. Now the previewed image looks as expected. The same results I get if I manually convert image to sRGB before soft proofing and saving for web. So... what's the difference between preview in Proof Colours and in Save for Web? Thank you for your opinions.

Hi 21, thank you for your input. All what you say makes perfect sense, it is exactly how it should work and how I expected it works. My problem was, that while testing this theory in practice, I have come to different results. I expected, that if I stick to the theory (meaning keeping in mind all rules you perfectly described) I should get the same result in both soft proof and save for web preview. But... it was not the case. Save for web preview offered expected results while soft proof was completely out of any assumptions and colours were totally over-saturated with violet/purple hue. Also, Edit -> Assign Profile -> sRGB gave another result then Soft Proof -> Custom -> assign sRGB (preserve numbers), but the same as save for web preview. What troubled me was why this is so.
Today I've made tests on hardware calibrated monitor and... everything works exactly as you describe and as I expected.
Then I went back to another monitor which is software calibrated (both monitors are calibrated with X-Rite i1 Display Pro). And again... I received strange results described above. So I did the last thing I thought and disabled colour calibration on that monitor. And suddenly... both soft proof and save for web preview gave the same result.
Probable conclusion: soft proof and save for web preview (together with Edit -> Assign Profile) are programmed to use different algorithm which is evident on standard gamut monitors with software calibration. Question can be closed.
Gene and 21, thank you for your effort.

Save for web is very jagged

The attached file was produced in Photoshop with the text set to "smooth" but the result when I do save for web is very jagged. How can I resolve this issue?
The right is a screen shot of the name online, the left is the actual photoshop file.

I saved for web again and I realized it was saving as a png, which is what studio press does for their web templates, so I then saved as a jpg and it's better. thanks for your direction.

CS6 Save for Web image size limit (Retina)

I have been designing for a lot of mobile sites these days, in particular: iphone retina display (640w). Most of the time these designs can be long in the tooth with the height of these documents - exceeding 8000 pixels at times. I noticed that 8000 pixels is the threshold limit for the "save for web" export. Anything greater than 8000 pixels will be downgraded in quality on retina devices by scaling the image. The jpg will still be the correct height and width, but when viewed on an iphone, you can easily see the degradation. Images and text are blurry. This is no bueno when trying to show a client what their site will look like on an iphone.
So my question is, is there a work around? A preference to be changed? Am I missing something to get the full quality of my design comp in order to preserve retina display quality?

Justin, what about your screenshot that I'm posting here:
You posted that as an example of SFW downsizing to 78% to make its output be no taller than 8192 px, resulting in a width of 500 px. The iPhone will scale a 500 px wide image to make it fit the screen's 640 px width.
And my CS6 SFW set to progressive JPEG (or anything else) refuses to allow a dimension to be greater than 8192 px. Here's the message when I try to make it larger:
Likewise, the scale percentage cannot be made greater than the value which produces a dimension of 8192 px.
Anyway, I'm glad you found a solution.

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)

Save for Web producing inconsistent results

Similar Messages

Maybe you are looking for