Losing quality when I re-save images

[LastZion]

First post here, heard great things about this place, hopefully someone can help me out. I'm quite new at all this.

Newbii question here:

Here is my situation. I am starting with an image in illustrator, taking it and placing it in Photo Shop as a new file then saving it as a gif. It is in this last step where I lose quality. The images are words (to be used as links) with no background. When I add the new layer ontop of my page in dreamweaver it looks like crap. The edges of the new gif are horrible and messy. How can I keep the high quality that I have in Illustrator and Photoshop even?

Thanks for any help/suggestions.
LZ

[smokeyb]

Welcome to WebmasterWorld LastZion
I sometimes find it hard to het a satisfactory result with tranparent gifs. I usually end up matching the background colour to that of my webpage, and saving it as a jpeg (of course this won't work with a patterned background). By the looks of it you don't need Illustrator in the process, and I would try compressing the image with Imageready, to see exactly what you get before you use the image.
HTH

[benihana]

can I keep the high quality that I have in Illustrator and Photoshop even

sorry. you cannot. images for the web are compressed, and there wil always some element of quality loss. the best you can hope for is to find a good balance between filesize and quality.

The edges of the new gif are horrible

this is to do with MATTING.

use imageready to do the compression, and change the matte color to one that closely resembles your page background.

also play with:

a) the number of colors used (you want as few as possible at an acceptable quality)

b) the amount of dithering (as much as possible at an acceptable file size)

to get the best image you can.

matching the background colour to that of my webpage, and saving it as a jpeg

you may find that it matches perfectly on your monitor and you wont see the join, but you could get a shock looking at it on a few different computers, - even using websafe background colors.

[limbo]

does your compression process include image resizing? This will make mush of text that is not vector based.

you may find that it matches perfectly on your monitor and you wont see the join, but you could get a shock looking at it on a few different computers, - even using websafe background colors.

This is really good advice. Always test you site on as many different computers, monitors, browsers and platforms as you can. This'll ensure you can find any bugs and zap em before you hit the 'live switch'.

[smokeyb]

Even though it was I that suggested the jpeg option, I totally agree with the other posts that warn against it. However, you could always use a tiny tiled jpeg, the matched colour, tiled as a background - but I think Netscape 4 won't render it?

[leppjc]

LastZion: silly question - in Photoshop (or Illustrator) when you say 'save as gif file' are you using "save as" or "Save for web"?

"Save for web" with the 4-UP tab is very useful for trying different settings, like all the ones mentioned above. You can instantly see how quality of the image as well as size & download time are affected. Great if you are new at this.

[john_k]

When you save as a gif, the maximum number of colors you are going to get in your palette is 256. GIF files do not utilize an alpha layer. Transparency is achieved by specifying a specific color (and only one color) from the palette as transparent. The software which renders the GIF is supposed to render any occurrence of that specific color as transparent. Colors which are close, but not exactly the same, will be rendered according to the palette.

So, the ugly effects you are seeing are a result of anti-aliasing or similar blending that occurs at the edges of your text. The pixels involved with the anti-aliasing are extremely close to your specified transparent color, but they are not exact. Also, even if your graphics program displays the image with a transparent background (usually with white and gray checkerboard), the GIF file you save will have an actual color for those pixels. Usually this is white, but it can be set to other colors.

Worded a little differently: The GIF format doesn't support an alpha layer (controls transparency). So your "nearly transparent" pixels are saved to the GIF format as "nearly white" or whatever color you have designated as the transparent color. The fact that they were supposed to be "nearly transparent" is lost in the GIF format.

Depending upon the image and the background(s) against which you will display it, you might be able to manually clean up the edges. It can be a painful process as you need to edit at the pixel level.

As others have said:
If you can set the background (transparent) color to one which approximates the background the image will be displayed against, then that is your best option. The next best option is to create an image with the text over the background and save that as a jpg.

[LastZion]

I managed to get one to work nicely. As saving it as a GIF with the background from photoshop. I was madly saving from PhotoShop with Save for Web and changing the settings but I wasn't entirely sure what I was doing (selective,adaptive,web,dither levels and other settings).

I can get the images to look solid when I save them as jpegs however there is now an outline around the outside of the square... how do I avoid this?

I just figured it shouldn't be that hard with either black or white text.

How do I specially the color to be transparant? Or will it matter? Because its just going to be "messey" anyways.

does your compression process include image resizing? This will make mush of text that is not vector based.

How do I tell? I am not resizing the image manually. And sorry I'm not sure how you mean "vector based".

I am trying to learn the matting and other stuff... workign my way through photoshop help.

Thanks for your suggestions so far guys!

[lexipixel]

If you can find a decent font to work with, and NOT use anti-aliasing you will have much better luck.

[limbo]

And sorry I'm not sure how you mean "vector based"

Vector based components (e.g. fonts) are scaled using numerical values . Bitmaps (e.g. GIF) use a pixels surrounding pixels to scale themselves. So vector based graphics can be scaled with 0 loss where as bitmaps will lose clarity the larger the change. This is often evident when fonts have been embedded in an bitmap image and then resized. They look pixelated and can become illegible quickly.

That said, by constraining proportions when resizing you can limit the damage but it is always best to try and optimise your graphic at the scale you need it, so that there will be minimum loss to your text in the final state.

All said and done you are not scaling the image anyway, but it's good practive none the less :)

>> a side note - text within an image will not be spidered by a search engine so if you may want to work using straight html and css to style - this is my opinion but shared by many here.

[LastZion]

I think I can solve the problem with your suggestion of saving it as a jpeg... however I need to be able to angle the jpg. As some of my angles are around 30 degrees. Is there a way to rotate in Dreamweaver? Or a way to save an jpg in a rotated position?

When I try to rotate the jpg it rotates alright, but then it creates transparent space in the background to complete the rectangle. And that creates a mess when I place it over top of my original back ground.

[john_k]

I think we need a little background on the difference between transparency and color. Transparency is not a color. It does not get a spot in the color palette of the saved image. Certain image formats allow you to specify transparency in different ways. One common way is with an Alpha layer. When you edit in Photoshop or other graphics programs, and you see the checkered background, it is utilizing an Alpha layer to remember the transparency information. Neither GIF nor JPG support Alpha transparency. Another common way to specify transparency (used by GIF files) is to specify a tile from the color palette as being transparent. JPG does not support transparency in any fashion.

When you save to either GIF or JPG, you are saving a raster (bitmap) image. Think of your image canvas as being a grid of pixels. Every pixel points to a tile in the image palette. For GIF files, that palette can only be 256 tiles. For a JPG (or most other 24-bit color images), the palette size is not limited.

Regardless of whether or not you are saving as a GIF or JPG, you are saving a grid of pixels, each of which MUST be linked to a tile in the color palette (for JPGs the grid is compressed). So even if you see transparency in your graphics program, when you save to JPG format, the transparency is lost. The transparent areas will be saved with whatever background color is specified for the image. You can test this by creating a simple image with a transparent background and text, save it as a JPG (with RGB color), and then open that JPG back up in the same graphics program. The background area will not be transparent.

A JPG file cannot be made to have a transparent region. GIFs are limited to 256 color palettes, so anti-aliasing and feathering will get ugly when you save to that format. All of the advice that has been posted on this thread has been meant as suggestions for ways that you might get around these two facts.

So, when you rotate your text, you are increasing the background area that is no longer transparent.

btw - this entire discussion is one of the primary reasons you do not see more elaborate backgrounds on most websites.

[LastZion]

THank you.
I understand now.

But now, all that is limiting me in Dreamweaver is my inability to rotate the layer... is this possible? It looks like there is an option to rotate the jpg at the bottom when the image is selected... however this is grey'd out.

[LastZion]

THank you.
I understand now.

But now, all that is limiting me in Dreamweaver is my inability to rotate the layer... is this possible? It looks like there is an option to rotate the jpg at the bottom when the image is selected... however this is grey'd out.

[smokeyb]

In Photoshop, open the image and rotate "canvas" not the layer's content.
HTH