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.

Similar Messages

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);

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

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.

Image resize quality not saved in Save For Web Preset?

L.S.,
I have been working on an Action to create 12 separate PNG's for further use in my icon-software. What I do is basically this:
Start out with a 256x256px image, save it for web four times in steps from 256, 48, 32 and 16px, (32-bit)
apply some masks / layers, save it for web again four times from 256-16px, (8-bit)
set the mode to indexed colour / apply other masks and layers, and save it for web again from 256-16px. (4-bit)
I let the sizing be done in the Save for Web step.
The 256-sized pics give me no problem as they are not scaled down.
The 32-bit pics give me no problem as they are scaled down, and antialias comes along, but they have 8-bit transparency: no problem.
In the 8-bit and 4-bit versions from 48-16px, I definitely want no antialias in the sized down versions. So I set the resize quality to 'Nearest Neighbor'.
However, Photoshop seems not to be able to remember different resize qualities in one Action.
In every Save for Web-action that I do, when I set it to resize, it does so. But the resize quality is not taken from the setting. It seems to be taken from the last used or recorded setting.
That is pretty annoying, because:
- When I let the downscaled ones of the first 4, be downscaled 'bicubic sharper'
- And I let the downscaled ones of the second 4, and third 4, be downscaled 'nearest neighbor'
Next time I run the Action, all downscaling is done by 'nearest neigbor'. That ruins my downscaled 32-bit icons - they get jaggy.
If I alter the steps in the action manually and set the first ones to 'bicubic sharper' again, suddenly all downscaled ones are done by 'bicubic sharper'.
That ruins my downscaled 8-bit and 4-bit icons: they get antialias, to lime green, and that shows...
I can save Presets in the Save For Web dialog, but as the groupbox already tells me: these presets only apply to the Image quality parameters, not to the sizing parameters. Those seem to be taken from the last run.
I have one alternative to this: before every Save for Web step, I downsize the image myself, and undo the history step after saving. It's quite some work and I would just rather see that the sizing parameters saved in the Preset!

That's never been saved as part of the S4W presets. Bloody annoying.

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 as HTML can't see anything when saved illustrator CS3 for windows

I'm working on a newsletter that will be used in a blast email. I am rather new at illustrator. I was told that I need to save it as html and did that but after it is saved and reopened there is nothing to see except boxes with a "x" in it. I tried linking and embedding the images but it didn't make any difference. Its not just the images its everything. Please help! I need to get this done today.
Thanks

When saving using the save for web you must use html with images or just images. Which one will depend on if you plan on using another html file or not.
The html file is not an image format. It is a text file with tags in it that tells your web browser where to find the images.
When you upload the html file to your web server, you also have to upload the images in the corresponding folder that matches the tag in the html file.
Example:
<img src="http://example.com/folder/image.jpg">
In your ftp program, once you access the folder that is visible to the world (where you store your default.html or index.html file) create a folder and in that folder upload your jpg image. Make sure you check capitalization of both folders and files as some servers are case sensitive.
If you need more help with the html portion I recommend that you post to the dreamweaver forum or see if your server has a forum and ask there. As there are several different methods in uploading files so I could easily miss something.
Good luck

I am done editing in Develop; how do I save edited images for web?

I get the import and development options in Lightroom but I was told by a LR representative when I called for assistance that LR does not retain any data. So, if I import photos from my camera (NEF files) and edit in Develop; where do I save the edited photos and how can I adjust them for optimum quality on the web? It seems that there are instructions on how to import and save photos from your camera, etc. but once you modify the photo using Develop, is the original then modified as well?
Sorry for the question, but I have modified several photos using the Develop Option and hate to lose all my work. I am lost as what to do now in order to save my edits. Ugh!
Thank you to anyone who can help! I am a MC Windows user if that helps.

Editing in develop is totally non-destructive. All your develop settings are saved automatically in the LR database (catalog)
For web usage select thumbnail(s) of your images in the Library and click Export. Choose jpeg, size, quality and resolution of 72 and set color space to sRGB. Add sharpening if desired. Choose a folder, sub-folder or desktop and export. Your jpeg copies will be ready to upload from your chosen folder when the export completes.

Save images for Web?

hi
i would like to ask you,why when i save images for Internet
(for my web portfolio) from Photoshop thought Save for Web and
import them in Flash they appear with rough ends ,not straight and
clear as in the original version ,please? I m saving them in couple
of versions some with Hight quality or medium but its all the
same....
please help me
what could I do that it doest occur that thing,please
Thank you

Are you rotating them once you import them into flash? They
will render with jagged edges. If you need images at an angle, I
would rotate them first in Photoshop then import them into flash,
also make sure under publish settings, you set you image quality to
high, of course this will increase the overall file size of your
swfs but give you better image quality. Hope this helps...

Converting illustrator graphics for web

what is the best way to convert Illustrator CS6 artwork for use on a website? I've tried Save for Web > PNG24 but the results are still not great when viewed in Preview or on my web browser.

Many thanks once again Jake. Your point about creating the image at the exact size as for final use is the information I had been looking for. I had suspected this to be the case but could never find any reliable confirmation on forums/google etc, so thanks for that. I've also just noticed that when creating a new file there is an option to increase the ppi resolution to 300, which seems to be an obvious solution to achieving sharper images. Thanks once again for your help, Jake

Formatting Illustrator logo for web

I have two questions regarding formatting a logo for the web.
1.) I am putting an Illustrator logo on a Photoshop web banner graphic. What is the best procedure to apply this to the banner? Right now, I am exporting it from Illustrator to a native Photoshop file with export options as follows:
Color model RGB
Screen 72 dpi
Write layers checked
Preserve text checked
Maximum editability checked
Anti-aliasing checked
2.) What is the best format to to send to my client if he plans to use this logo for future web use? Simple RGB, or should I output on Save for Web and Devices for other options such as a GIF or PNG-24?

The web is uncalibrated. Desktop browsers may be able to read image color profiles and correct them for monitor profiles, but that doesn't do you any good on mobile devices nor on the 90% of computers that are uncalibrated. just use the defaults - sRGB, no embedded profiles. the rest wil ldepend on what your client wants to do with it, but your post implies that he wants to merge the logo with other artwork and do his own web compliant version, so sending a PSD file would be the most lossless and efficient method.
Mylenium

Driving me nuts: Working with sRGB images for web

Good day ladies and gentlemen, I have a problem that's driving me nuts:
Basically, I want to create a graphic (a logotype) that is going to be used on a website, so I've learned that if I want to create anything for the web, I have to use the monitor color profile instead of the standard sRGB 2.1 because otherwise everything I make in PS will look completely different when opened in a browser or anywhere else, which I learned the hard way.
Now, as long as I only create original content with that kind of color settings - it works. The stuff I make in PS looks the same in a browser. However, as soon as I want to use a photo or in this case a separate graphic with the sRGB color profile - everything starts to fall apart. Everything sRGB I try to import into my non-profiled work turns bleak and with a yellowish tint.
If I change my working color profile to sRGB the photos look like they should, but then instead all my original content will still look completely wrong in a browser or any other application.
I don't believe it HAS to be this way, since there are so many websites that seem to be able to look great and have rich, good-looking photos in them at the same time. I mean, there must be a solution to this problem, no?
I'm using a MacBook Pro (Late 2008) with the 9400M/9600M GT and a Benq EW2430 external monitor over DVI. Mac OS X 10.6.8 Snow Leopard. Photoshop CS5 with the latest update (12.0.4 I believe?)
Big thanks for any help. It would be greatly appriciated. Let me know if posting any screenshots would help solve the problem.

try this (if you want to)
first highlight the OEM default monitor profile for your monitor in Displays> Color> Display Profile
reboot (and confirm the profile is still highlighted there)
then drag this PhotoDisc tagged sRGB image to your desktop and open it in Photoshop
USE THE EMBEDDED PROFILE (or Edit> Assign Profile: sRGB to be sure)
at that point the color should look correct (exactly as it looks in Safari here - if it doesn't look exactly correct here in Safari, it is because you have a bad monitor profile)
then in Photoshop: Image> Duplicate (to see two same files side by side for a comparison)
then on one image: Edit> Assign Profile (the monitor profile you have loaded in Displays)
be sure to set the profile in the bottom left (see below) so it displays (so we can see them in your screen shot)
THEN TAKE A SCREEN SHOT of the two windows side by side and post it here
(Command+Shift+4 and drag the area you want captured)
If I understand your advice right, you suggest that when I'm creating
stuff for the web, I should always, always use sRGB as my working
space? But then on export I should just not embed the profile, correct?
sRGB is the only color you should ever post on the Internet for web viewing
always CONVERT to sRGB before saving for the web (if it is not already in the sRGB color space) ie, leave that option checked in Save For Web Devices
i think most people don't embed the profile in web images, but this was hit on succinctly above post 13:
There is no true color management on the web. As different browsers offer different types of CM support, the
best that you can do as a designer is to convert to sRGB (if not
already) and save color-critical images with the embedded sRGB profile.
That's the general rule.

Saving Illustrator Image for Web

Similar Messages

Maybe you are looking for