How Gradient Layers Show in Browsers?

jank

OK ill try make this short and sweet.

In my website I have a 2 layers, one is just a fixed layer of red while the other layer is just a picture which sits on top of it in the right-hand site.

Now I want to have a gardient layer that will gradually go from the color red to the picture, so i used the gradient tool.

This looks fine and perfect in photoshop but when i we it in a browser then it looks all kinda blotchy or pixelated (not really sure how to describe it, ill try throw up an example)

My question is, is there anything I can do as i appears to be a browser problem or is there a trick I can do to overcome this?

Should I save that slice as a Gif?

P.S. using IE5

impr0v

I'm not sure I fully understand what you're saying but It sounds to me like your export settings in photoshop are set too much towards minimising filesize and are compromising the quality. Gradients are especially vulnerable to pixellation and you'll have to up the filesize quite a bit to get it smooth. If it's a .gif try exporting the image as a .jpg and playing with the quality settings and smoothing.

talos

I don't know if it will help, but try to save as PNG as well.
or better, try different formats. And see what the results are.

NeVeR

it would be better to upload a sample.

but i kinda know what you mean.

In a gif , the colour is broken down into 256 colours, if there are more is will change some and make it look crap. you could alway save it as jpeg, but if you want it with a tranparent background i would say the best thing is to slice the main image a few time so there are only a few different colours in each slice, and holpfully it wont lose the colour,,

I tried using a PNG image before but it added a sh1ty looking background colour. but you could try it aswell.

dead air

Another reason for images appearing pixelated may may be a change in the dimensions of the image as defined by you in the html code. I mean, if you have a 100 x 100 pixel gif image but you specified it to be 75 x 75 pixels (or a certain percentage of the original size) in the html source code

i.e. [HTML]<image src="example.gif" width="75" height="75">[/HTML]

pork99

Can't say too much without seeing it but if you save a gradient as an indexed color gif you will get a banding effect

Use a jpeg wth low compression - an image the right width but only 1 px high will achieve the effect because it will automatically repeat - and keeps the file size manageable

or you can use background-repeat in css to control it

jank

Ya cheers all, it was the compression that was giving me probelms all along so i just changed the slice to a jpeg and up'd the quality of it making it much better on the eye

Cheers again folks, im learning everyday.

If anybody wants to see it just PM me as the website contains Private info and I dont want to give my ID away