saving photoshop images...

[xfusion]

What are the best settings to use when designing an image used on your site? Another thing is that when i save my file as a .gif and then post it on my page it loses its sharpness. Anyone have any pointers on getting a nice image from ps to the web? THanx!!!

[Croc Hunter]

Generally, if the image only has a few colours it's best to save in GIF format. A 200 x 200 image with only 3 colours will be about 8K as a GIF. If you saved the same image as JPG it would be about 28K. That said, if the image was to contain hundreds of colours like a photograph, saving as a JPG will give a much smaller filesize than a GIF. With Photoshop saving JPG for website quality I usually save at 30% of the original. When saving as a GIF you can remove colours from the image in the preview window just prior to actually saving it.

[joshuamc]

Croc Hunter, is it me or is your avatar kind of messed up?

[Skunkboy]

looks fine here... flashin' x-mas lights in the jaws of the Croc himself

[JGross]

I dont completly agree with croc here. If you have photoshop 7 or especially CS the optimization levels are pretty good. I usually save any file that not animated and dosnt have transparency as a jpg at 80% quality. 80%is generally the graphic designers benchmark for keeping near perfect quality while maintaining a quick load.

For small and quick animations you need to use gif files most likely 256 colors. Photoshop will tell you how many colors it is using if it is lower than 256 try stepping your colors down but its a good idea to not lower it unless you can keep every single color (i.e. only lower to 64 colors if you are using 63 or less).

For transparency on the web its gif again, you may need to play around with the dither patterns until you find something that suits your need. If you need transparency for something like importing into another image or a flash presentation use png-24 if your putting it back on your computer before you optimize anything the size difference wont hurt you as much but a png file will do a better job capturing correct transparencies.