Trouble saving images for web in CS3

Hello All,
I am trying to make buttons, etc. in Illustrator CS3 then saving them for web stuff as either gif's or jpg's. Everything was working fine for a while - the images and text looked great. Mid project the images and text started becoming super pixilated. No matter what type of image I tried to save it as, or what quality they're set to they're very jagged, grainy and awful looking! I don't think I've changed any setting and wracked my brain and the forums, FAQ's, help for a solution to this. Just seems like it came out of nowhere!
Thanks in advance for any advice and councel!!

I am wondering why my advice was any worse than yours. I admit I mistakenly suggested Monitor RGB instead of Windows RGB but as far as I know sRGB is the default for most monitors. This would put them all pretty close. Am I missing something?
I would think that having someone set the images with icc profiles and then adjusting their own browser to correctly display such images would cause the exact same problem you say my solution does. It would give the image editor an impression of the image that nobody else is going to see. I don't know anyone that uses icc profiles for web work. In general I don't think you will find many people who have set their browsers to correctly view images that have these profiles. So it seems like someone that has will be thinking the images look great on their system but not on someone else's.
If someone may eventually repurpose these for print then worry about icc profiles for the printer. It seems like a huge waste of time for anything that is purely on screen.
I am not trying to battle with you over who is correct I just want to understand what your saying.

Similar Messages

Saving Images for Web

Hi,
Whenever I save images for the web they seem to loose the richness of their color. I've not noticed this until working on a particular project that involves resizing and preparing images of artwork for a website.
The images are in sRGB color profile and I am "saving for web and devices" with ICC checked and optimization at 70. Still, the images look a bit faded overall. Is there anything else that I can do to retain the color?
Thanks!

I am wondering why my advice was any worse than yours. I admit I mistakenly suggested Monitor RGB instead of Windows RGB but as far as I know sRGB is the default for most monitors. This would put them all pretty close. Am I missing something?
I would think that having someone set the images with icc profiles and then adjusting their own browser to correctly display such images would cause the exact same problem you say my solution does. It would give the image editor an impression of the image that nobody else is going to see. I don't know anyone that uses icc profiles for web work. In general I don't think you will find many people who have set their browsers to correctly view images that have these profiles. So it seems like someone that has will be thinking the images look great on their system but not on someone else's.
If someone may eventually repurpose these for print then worry about icc profiles for the printer. It seems like a huge waste of time for anything that is purely on screen.
I am not trying to battle with you over who is correct I just want to understand what your saying.

Saving images for web - is there an aperture equivalent to adobe sfw?

I'm the web designer for a small school. Aperture has been a godsend for keeping track of my work, but I want to learn more about how to use it. I want to pick the brains of you web designers out there...
When I export an image to save to our webpage, I usually use Photoshop CS2's "Save for Web" dialogue. This works, but means I have to export out of aperture, open in photoshop, then save for web. I'm trying to streamline the process and was hoping there's a way to do this in aperture. Let me give you a scenario...
If I export an image in ps that is 400x400 at jpeg quality 7, it is ~30KB in size. If I use aperture's "Export Version" and check 400x400, no metadata, jpeg 7, I get a 100KB file. This is no good for my web pages. So... is there something in there that will get me the same small files, or am I stuck with adobe???

Interesting, yes - Aperture's export appears to create resource forks for the files. I'm guessing this is to hold the preview image.
I've just exported some images, and in the Terminal, with 'ls -l', they show up as 17k. In the Finder, they're 76k.
I created copies using 'ditto --norsrc', and the copies are now the smaller size in the Finder too.
Quentin

Saving two dimensions od image for web

Hi there,
I have made script (with your help ) to export images for web with dimensions 300x300 px. Now I want that my script do one more resize of that files so that i get two files one 300x300 and another 66x66 px. I will post my script and ask you to hel me find the bug
And one more question. My script exports file name + jpg but it also keeps orginal extension so I get ie. FileName.psd.jpg
can you help me fixing this in my script... else is fine...
thank you,
Voah
Edit:
In the meen time I managed to resolve the problem so here is the new script
But I have one more thing I would like to do. I have to manually make folder "300x300 and "66x66" or my script stops. How coud I make that script make that folders? (under inputFolder/300x300/ and inputFolder/66x66/)
// Save current dialog preferences
var startDisplayDialogs = app.displayDialogs;
// Save current unit preferences
var originalRulerUnits = preferences.rulerUnits;
preferences.rulerUnits = Units.PIXELS;
var inputFolder = Folder.selectDialog("Select the input folder");
//var outputFolder = Folder.selectDialog("Select the output folder");
ProcessImages();
function ProcessImages() {
var filesOpened = 0;
//   if ( inputFolder == null || outputFolder == null)
     if ( inputFolder == null) {
            alert("No source folder selected");
//     if ( outputFolder == null) {
//       alert("No output folder selected");
//else{
var fileList = inputFolder.getFiles();
for ( var i = 0; i < fileList.length; i++ ) {
       if ( fileList[i] instanceof File && ! fileList[i].hidden) {
                 open( fileList[i] );
                 ResizeImage();
                 filesOpened++;
return filesOpened;
function ExportPng(filePrefix, fileSuffix){
try
var docRef = app.activeDocument;
var docName = app.activeDocument.name.slice(0,-4);
var saveOptions = new ExportOptionsSaveForWeb();
saveOptions.quality = 70;
saveOptions.format = SaveDocumentType.JPEG;
saveOptions.optimized = true;
docRef.exportDocument(File(app.activeDocument.path+'/300x300//'+docName+'.jpg'), ExportType.SAVEFORWEB, saveOptions);
catch (e)
alert("Error encountered when attempting to save the image. \r\r" + e);
return;
// funkcija export 2
function ExportPng2(filePrefix, fileSuffix){
try
var docRef = app.activeDocument;
var docName = app.activeDocument.name.slice(0,-4);
var saveOptions = new ExportOptionsSaveForWeb();
saveOptions.quality = 70;
saveOptions.format = SaveDocumentType.JPEG;
saveOptions.optimized = true;
docRef.exportDocument(File(app.activeDocument.path+'/66x66//'+docName+'.jpg'), ExportType.SAVEFORWEB, saveOptions);
catch (e)
alert("Error encountered when attempting to save the image. \r\r" + e);
return;
function ResizeImage()
if (app.documents.length > 0) {
    var docRef = app.activeDocument;
    var n = docRef.pathItems.length;
        if((n>0)&&(docRef.pathItems[0].name!="Work path" )) {
             docRef.pathItems[0].makeSelection();
             docRef.selection.invert();
             docRef.selection.clear();
             docRef.selection.deselect();
   function fitImage() {
var docRef = app.activeDocument;
docRef.trim()
var docWidth = docRef.width.as("px");
var docHeight = docRef.height.as("px");
if (docWidth / docHeight > 4.8)
    docRef.rotateCanvas (315)
    docRef.trim()
else if (docHeight / docWidth > 4.8)
    docRef.rotateCanvas(45)
    docRef.trim()
if (docWidth < docHeight)
          docRef.resizeImage(undefined, UnitValue(270,"px"), 72, ResampleMethod.BICUBIC )
      else if (docWidth > docHeight)
                      docRef.resizeImage(UnitValue(270,"px"),undefined, 72, ResampleMethod.BICUBIC )
      else if (docWidth == docHeight)
                docRef.resizeImage(UnitValue(270,"px"),UnitValue(270,"px"), 72, ResampleMethod.BICUBIC )
docWidth = docRef.width.as("px");
docHeight = docRef.height.as("px");
if (docWidth < docHeight)
                    docRef.resizeCanvas(UnitValue(300,"px"), UnitValue(300,"px"), AnchorPosition.MIDDLECENTER);
      else if (docWidth > docHeight)
            docRef.resizeCanvas(UnitValue(300,"px"), UnitValue(300,"px"), AnchorPosition.MIDDLECENTER);
      else if (docWidth == docHeight)
            docRef.resizeCanvas(UnitValue(300,"px"), UnitValue(300,"px"), AnchorPosition.MIDDLECENTER);
var docRef = app.activeDocument;
var savedState = docRef.activeHistoryState;
fitImage();
app.displayDialogs = DialogModes.NO;
ExportPng( File( "",".jpg" ))
docRef.resizeImage(UnitValue(66,"px"),UnitValue(66,"px"), 72, ResampleMethod.BICUBIC );
            ExportPng2( File( "",".jpg" ))
docRef.close(SaveOptions.DONOTSAVECHANGES);
docRef = null;
// Reset app preferences
app.displayDialogs = startDisplayDialogs;
preferences.rulerUnits = originalRulerUnits;

Does this help?
main();
function main(){
var originalRulerUnits = preferences.rulerUnits;
preferences.rulerUnits = Units.PIXELS;
var inputFolder = Folder.selectDialog("Select the input folder");
if(inputFolder == null) return;
var fileList = inputFolder.getFiles(/\.(jpg|tif|psd|png)$/i);
var outputFolder1 = Folder(inputFolder + "/300x300");
if(!outputFolder1.exists) outputFolder1.create();
var outputFolder2 = Folder(inputFolder + "/66x66");
if(!outputFolder2.exists) outputFolder2.create();
for (var a in fileList){
open(fileList[a]);
var Name = decodeURI(activeDocument.name).replace(/\.[^\.]+$/, '');
app.activeDocument.trim(TrimType.TRANSPARENT);
FitImage(300,300);
var saveFile = File(outputFolder1 + "/" + Name + ".jpg");
SaveForWeb(saveFile,70);
FitImage(66,66);
var saveFile = File(outputFolder2 + "/" + Name + ".jpg");
SaveForWeb(saveFile,70);
app.activeDocument.close(SaveOptions.DONOTSAVECHANGES);
preferences.rulerUnits = originalRulerUnits;
function FitImage( inWidth, inHeight ) {
var desc = new ActionDescriptor();
var unitPixels = charIDToTypeID( '#Pxl' );
desc.putUnitDouble( charIDToTypeID( 'Wdth' ), unitPixels, inWidth );
desc.putUnitDouble( charIDToTypeID( 'Hght' ), unitPixels, inHeight );
var runtimeEventID = stringIDToTypeID( "3caa3434-cb67-11d1-bc43-0060b0a13dc4" );
executeAction( runtimeEventID, desc, DialogModes.NO );
function SaveForWeb(saveFile,jpegQuality) {
var sfwOptions = new ExportOptionsSaveForWeb();
   sfwOptions.format = SaveDocumentType.JPEG;
   sfwOptions.includeProfile = false;
   sfwOptions.interlaced = 0;
   sfwOptions.optimized = true;
   sfwOptions.quality = jpegQuality;
activeDocument.exportDocument(saveFile, ExportType.SAVEFORWEB, sfwOptions);

Saving object for web - pixelated & distorted

Trying to save an image for web in Illustrator. It's a "browse" icon that we use for our product. We're recreating the icons to look more "flat" with the outline state as the inactive and the fill state as the active. Here's what I get when I export it for the web as a .png.
**image when it's zoomed in using Preview
**image at it's normal size using preview.
**image after flattening transparency
I've tried to optimize, not optimize, flatten transparency, rasterize -- none of it's worked to make this icon look any better. The only thing that came somewhat close was flatten transparency -- that helped with the pixelation but the boxes all became distorted. Please help!

Image at normal size using preview is the most helpful piece of information. Would be good to knwo your exact pixel dimensions.
Did you use align to pixel grid? Try saving as .gif. This is as good as you can get with such a small size.

Trouble saving images on cRIO-9022

I'm having trouble saving images on my RT target cRIO-9022 (VxWorks). I get "error 53 occurred at Write GIF File.vi LabView: Manager call not supported" when running the code. What I'm trying to do is save periodic snapshots of front panel charts/graphs locally on the cRIO and download them at a later time.
I've also tried some of the report generation VIs and had broken arrows and compile errors. from what I've read in help and online, It seems perhaps it is not possible to do what I'm trying to do with my particular target. Is there any reason that I shouln't be able to save images locally to the RT target? has anyone else had a similar problem generating reports or saving images on the cRIO-9022?
Thanks for any help you can provide,
truth204

I've run into similar problem before... I was unable, at the time, to find a good workaround for saving front panel images to file on RT because the necessary report generation functions were unsupported on the RT environment. If you are just saving data from charts and graphs, you might want to consider saving the data as a binary file or a spreadsheet/.csv style file. This is ultimately what I did in my RT application, and then I created a separate desktop application that would read the data from those exported files and reproduce the charts/graphs that were created on the RT target.
Here is a KB describing your error, for reference: http://digital.ni.com/public.nsf/allkb/39B5B135F32902388625723B00683B27
Cheers!
Logan

Saving images for dreamweaver

I would appreciate any help in saving images for dreamweaver.
The images are optimized in Photoshop and are saved as jpeg's with
a quality of 60. Image sizes are 400 by 600 pixels. When viewed on
the web, the images look fuzzy. Can anyone give me any directions?
Are the original images not saved in a high enough resolution after
editing? I would appreciate any help at all.
Thanks.
JC

I had the same problem !!
When you export from fireworks 8, by shure you select in the
optimize panel
"JPEG - Better Quality" and JPEG in the second box. This
solved my problem,
and I hope your problem
www.samdesign.be
"jaycee911" <[email protected]> a écrit
dans le message de news:
f1g2k2$oth$[email protected]..
>I would appreciate any help in saving images for
dreamweaver. The images
>are
> optimized in Photoshop and are saved as jpeg's with a
quality of 60.
> Image
> sizes are 400 by 600 pixels. When viewed on the web, the
images look
> fuzzy.
> Can anyone give me any directions? Are the original
images not saved in a
> high
> enough resolution after editing? I would appreciate any
help at all.
>
> Thanks.
>
> JC
>

Which way to get image for webi report?

Hi,
I have to add image to webi report. So any way is there for adding image for webi intelligence.

check this thread:
Adding an image (logo) to webi report

I am using CS6 and when I go to save an image for Web the image does not retain its quality

I am using CS6 and when I go to save an image for Web the image does not retain its quality. The first week I did this it worked just fine and now the images save very pixely.
Here is a screenshot of my image on the artboard as I am editing it
Here is a screenshot of the image as I'm trying to save it for Web
As you can see, the image becomes pixely. I have tried to save it as every type of png and jpeg but nothing seems to work. I have no idea why it has started to do this. Please help!

Change None to Art optimized then click apply(alteast in CS5 there was an apply, believe they removed that in CS6 as so many people missed that part).

Save image for web/devices - random streaks

I have no idea why, but sometimes when i save images for web It leaves random streaks across certain areas. It has nothing to do with transparency/gradients because i've used normal fills and it still does it. It's probably something stupid but i can't seem to figure it out.

Document DPI vs. Save for web vs. preview. Make sure to always work in 72 DPI and you'll have a lot less problems to get predictable results. Also use the align to pixel grid options to avoid semi-transparent gaps and edges, where applicable...
Mylenium

Photoshop PNGs saved for web in CS3 v.10 still are not transparent in iWeb 08 2.0.4

I have read the topics and tried the tricks and still have black backgrounds on my photoshop graphics. After saving for web & devides as png8 with transparency I have a checkerboard pattern behind my graphic. I am using the magic wand tool, selecting the emptiness/checkerboard behind, then choosing to select the inverse, the ctrl c, then ctrl v in iWeb
Thanks for any help.
Kristie

When you use the Save For Web or Devices be sure to click on black in the pallet and then on the transparent "button" just below the pallet before saving as a png file.
OT

Saving Illustrator Image for Web

I have a simple logo that I'm trying to save for use on the web. The original has a transparent background but the edges are white so I have included an image with a dark background for reference. The challenge here is that the lines don't look smooth. I have tried setting AA to none as well as Art and Type Optimized. I've also tried blowing the image way up in Illustrator and scaling it down in the "Save for Web" Dialog box to match the size I need for the web.
In Illustrator the white lines are smooth and clean. When I save for web (or export at 300DPI) they are either blurry or blocky depending on the AA settings and never smooth. I've seen other vector art done in Illustrator that is smooth and clean, I just can't obtain the same results.
Thanks in advance for any help.

a screen-capture will only save your image to the monitor's resolution which is typically between 72dpi and 96dpi depending on if you're using Mac or Windows. I have found my Macbook Pro display resolution to be sharper than my HP tablet resolution though the pixels per inch are the same. I have found that to be true for the Macbook Pro vs my 30-inch display as well when viewing webpages. For some reason Apple has a sharper display. If you export your Illustrator document to a bitmap image with a high resolution such as 300dpi you will have a sharper result, though it won't be as sharp as a vector format file, such as PDF (Not Photoshop PDF, though--Illustrator PDF). Vector formats redraw the information based on mathematical equations which represent your drawing each time you upscale or downscale the drawing by zooming in on it. You will find this to be true with "Scalable Vector Graphics" which is the .SVG file format . It is not very popular currently because not every browser supports displaying SVG, though I have heard that this will change in the future with Internet Explorer 9 and other browsers. I think Apple Safari currently supports SVG. If you export your file to SVG it will export the file and an html file which is used to render the SVG xml data. In short it is similar to publishing a webpage of your drawing or publishing a SWF file into an HTML document from Adobe Flash Pro.

Raw, colorsync profiles, and saving/exporting for web

I'm having a bit of trouble dealing with my raw files, or more particularly, being sure that I'm saving for webpages with the right profile.
I have several thousand images in Nikon's NEF and/or DNG format. I'd like to have iPhoto be my main catalog for them, but I don't want to copy over the several gigs worth, so I set the prefs to NOT copy the files over. The working jpg files it creates seem fine, but I can't tell whether they have the AdobeRGB profile associated with them, since that's what I shot them with. I'd then like to export them, or save them, to jpegs for the web at a somewhat reduced size, but they need to be in sRGB format for proper web presentation, which I'll do much of the work with iWeb. But there's no color profile choice in the export dialog, or the edit dialog, or anywhere else I can find. Am I missing something?
Basicallly, I'd like to have all my images in albums, and then have subalbums with the web versions (say about 900x600, about 70% quality, and sRGB color space). Is this possible with iPhoto? I've been mucking about with Adobe's Lightroom, which does have the color space choices in the export dialog, as well as a ton of other features. And previously I used Photoshop CS2 / Bridge to handle everything. But I thought iPhoto would make things easier.
Mark

Thanks for that information, unfortunately I'm not really any closer to solving the issue since I've already tried that. 1) by default, doesn't Aperture automatically embed the sRGB color profile? 2) if I set view>proofing mode to sRGB shouldn't what I see on screen match what a "dumb" application such as Firefox does when it ignores the embedded profile and display sRGB? I've tried going into the preferences>export settings and changed everything to sRGB IEC61966-2.1 but I see no difference in the final image between that and the default setting.
I guess my question is more specific to Aperture since I don't have this problem with other applications. For example, in photoshop if I do Export for Web it strips out any embedded profile and when I open that image in Firefox and Safari side-by-side they are exactly the same. But not so when I export an image from Aperture, when opened in Firefox it is desaturated and flat and of course in Safari it honors the embedded profile and looks fine.

How to get a gif file to loop in PE11 with MAC 10.6.8? 480x320x72 pix/in. saved layers for web, check animate,preview plays fine but saved file doesnt

can't figure out why the gif file won't loop. Set up 5 photo frames 480x320pixels x 72pix/in in PE11, creating a layer for each. Each layer visible. Saved for web. Checked animate. The preview plays fine. But when I save the file and then click on the saved file to play, it re-opens the layers instead of playing the loop. The only SAVE option that shows up is "IMAGES ONLY"
Using photoshop elements 11 on MAC 10.6.8. Either I'm setting this up wrong or is there a hidden setting I need to change?

Thanks for the thought, Barbara B. Not sure if this counts, but emailed the file to myself [different email account, same computer] but it would not play as an email attachment. Any suggestions for a web upload where I can test your suggestion? Seems like there should be a different save option other than IMAGES ONLY but that is the only option I'm given.

Why am I having trouble saving images consistently with Photoshop 5

I have been trying to save images from one file to a final modified one. Two problems: 1) Some images are unedited and save sometimes but not always. Why? 2) Some are a combination of an original plus a transformed close-up from another image. When the finished edited image saves, it is much smaller than the few unedited images that did successfully save. Why?
The images are digital photos of my jewelry. In order to decrease the number of pages on my impending website, I am attempting to transfer, when one is available, a resized close-up to the other shot of the full set (close-ups are what sell the work!). Some of the images show 25% on the top bar but that doesn't seem to make a difference as to whether it will save or not. Others (I notice they seem to be more horizontal images) are 16.7% ? Does anyone still use Photoshop 5 or is this a fix that is so basic, it is the same for newer editions??? Anyone?
Also, while we are on this page: I tried to upload example images to illustrate what I am trying to do but kept getting an error message. Any advise?

For web use the resolution of the file has no meaning only the pixel dimensions.
It depends on the site your uploading to, some have specific sizes for the photos (pixel dimensions) that is usually listed somewhere on the site, but to give you a rough idea, the size might say something like no bigger than 800x600.
That would mean 800 pixels x 600 pixels (resolution doesn't matter) and the usual file type is jpeg. The 800 is for the long side of the photo.
To see the pixel dimensions of a particular file, go to Image>Image Size and i agree with the others on the % being the viewing (zoom) percentage of the image on the screen and doesn't mean anything as far as saving files. 100% is actual pixels.
If you double click on the zoom tool in the toolbox that % should change to 100% (actual pixels) In the photoshop 5 help, look under Looking at the Work Area-Viewing Images.
Do any of the files your saving have layers (more layers than just the Background layer)?

Trouble saving images for web in CS3

Similar Messages

Maybe you are looking for