Image Optimization

[xclicks]

Hello,

I fear the gif images on my site at
http://www.extremeclicks.com are too large.
I use paint shop pro, and reduced most to
16 colors but they still seem rather large.

I have a cable modem so I don't really know
how bad the download time is.

Any suggestions for optimizing my images with
pain shop pro would be appreciated.

Ken

[mackol]

i am not sure which gif files u r talking about but they loaded super fast for me
i agree i have near T1 speeds , :D but i think they look fine

i'd say for images of that size ( the ones in the menu) anything bigger than 3-4 kbs for each file, would be a problem
otherwise its fine.

[MannInc]

First things first. The image of the man and woman should actually be saved as a .jpg, resulting in a smaller file size.

You stated that you saved the images as 16 color? All of the navigation buttons, along with the logo, are saved as 256 color gifs. I've not found any images on your site that are 16 color.

PSP gives you several options when you compress the image by reducing the colors. I've found the following to work best when reducing the colors to either 16 or 256-colors:

Palette: Optimized Octree
Reduction Method: Nearest Color

Hope this helps!

[xclicks]

Thanks,

MannInc, That is the answer I was looking for ....
I was not sure what options to select when reducing
the colors.

Is there a general rule for deciding between jpg or gif
formats?

Ken

[MannInc]

There sort of is. If the image is a simple clipart or line drawing, use gif. If the image is a picture, use jpg.

Hope this helps!

[bettyfordclinic]

Hi xclicks

I don't know what PSP is like these days, but I think you need to get onto Photoshop for this kind of work.

The gifs I saw were still 256 colours, but the other little problem was the background consistency between the Gifs and the html background. It should be possible to get the colours perfectly matched, and right now there is a subtle difference. Get a html ref off the colour you've chosen in PSP (if possible) and match it with the html. If there's still an difference you may have colour profile problems (if PSP does such a thing)....

Ideally, get Photoshop....

bfc

[Naveen]

Use Irfan View or fireworks to do it ... works for me !

Cheers !

[MannInc]

PSP 7 offers the HTML code for colors. Of course, if you cannot get the background to match perfectly, you can always set the background color to transparent and then that should resolve the blend problems.

Hope this helps!

[komik]

If that still doesn't work. I create a 5x5 image of the color I want to match and set that to the background of the site. Then the colors between the Image Application, HTML or browser have no effect on how it is rendered. This does increase the download time slightly but I haven't seen it to be much of a difference.

[MannInc]

Actually, if you're going to go the image route and create a "swatch" for the background, you should be able to get away with a 1x1 image.

Hope this helps!

[The TD]

I don't use Photoshop for website, but Ulead Photo Impact 7
work very good (Animation) for me under 56K modem, check it out
www.truc-dao.com
Let me know, if there is any brokent as you saw.
Thanks

P/S. my site is International lang, so it not a problem if you see some characters brokent (except english).

[Ddr]

Just to add to the confusion, remember, you can't add transparency to a jpg. If you want to make a background transparent the pic needs to be in GIF format. This invalidates the rule about selecting which format to use, as Michael mentioned earlier in the thread.

You can search a long long time for the button to add transparency to a jpg without finding one. I remember doing just that *laughs*

Hope this helps a little.

Dale

[Joanne]

Although it is true that you cannot export a jpg with transparency, there is a work around. Photoshop is a great program but also quite expensive. I found that Fireworks can do almost everything as nicely for websites as Photoshop, including Image Ready.

Since Fireworks also integrates perfectly with Dreamweaver, this is the way to go for me. (I'm not affiliated with Macromedia nor am I paid for this commercial :-) )

Check out my demo to see what I mean.make jpg background (http://www.objtools.com/make_jpg_background.htm)

Joanne

[Ddr]

That was great, Joanne. I am sure it will benefit a bunch of people. BTW, I like your site in general.

Dale

[komik]

I have used both Fireworks and Photoshop...and Fireworks is really coming along. I find fireworks to be a bit limiting when it comes to blending. But for you normal everyday web tasks it is great. But I am a huge Photoshop user. So I probably biased when it come to which program to use. The Fireworks import is great when using Dreamweaver. I personally use Front Page and not because it is better just what I am used to. Photoshop 7.0 which has been released recently is still costly @ $600 for full and $150 for upgrade which is a little better. Compared to $300 for full version of Fireworks and $150 for the upgrade.

The one great thing that Photoshop does have is the image opimization where you can view up to 4 different setting for the image before you save. But for the most part general rule of thumb....lots of colors jpg. less colors gif. Jpegs compression uses the closest pixel compression. This is why they get fuzzy when saved many times. (which can ruin the image) and gif use a palette and if the color isn't there it gets replaced with closest in the palette.

Anyways enough rabling....good job by the way

[xclicks]

Holy cow, thanks for all the great advice!
I guess I really should look into alternative
graphic software. I guess it is hard to teach an
old dog new tricks.

Well, I ended up re-designing my site anyway. I have
all new graphics and colors. I think the download time
is good.

http://www.extremeclicks.com

I found that with PSP, when you save an image in the GIF
format, it will automatically reduce the colors. The problem
is that you don't get to choose the options at that time.

So I just reduced the images to 256, selecting the proper
options, prior to saving the files and had no problems.

Thanks again!

Ken

[Joanne]

Ken,

I like your site and loading times are very fast. However, I find the text on white background much easier to read. Especially the text going over the woman's face makes me wanting to stop reading.

Just my thought,

Joanne

[MannInc]

Originally posted by Ddr
Just to add to the confusion, remember, you can't add transparency to a jpg. If you want to make a background transparent the pic needs to be in GIF format. This invalidates the rule about selecting which format to use, as Michael mentioned earlier in the thread.


While you cannot add transparency to the background of a jpg, you can to a gif. However, if you use a background in a jpg that falls within the normal websafe 256 colors, than you won't need to make the jpg image have a transparent background, as it should blend with the background and be viewable to all (as long as they're using at least 256 colors).

I'd like to find someone surfing the web with less than 256 colors though :)

[bettyfordclinic]

I'd like to find someone surfing the web with less than 256 colors though

Hey Manninc,

You're right about the 256 colours thing, but I thought I'd tell you one of those "scary" client stories.

A while back we implemented flash programming on a site an advertising agency had designed for our government. The Ad Agency did a horrific design with no attention paid to the information they were supposed to be conveying to the public, so working on it was really depressing (knowing it would look crap, take ages to load, be unsearchable etc etc etc etc etc).

The final nail in our brains was when they asked us to make it 256 colour safe, despite the fact that it already needed flash 5 to run (one of their other silly demands, and something they were aware of). We explained why this was not the best idea, but they stuck to their guns for at least a month, until eventually the limitations of the 256 colours on the palette they wanted made them change their minds.

256 colours and flash 5: no computer on the PLANET runs like that!!!!!

bfc!!!

[DCR]

Ken,
To set the options of your Gifs in PSP, use the export function instead of the "save as".

FILE>EXPORT>GIF OPTIMIZER>......

This will allow you to set it up as you wish and you can also get a rough idea of the download time from the download tab.

You can put a layer of the same color as the intended background behind the image before you export and then make that color transparent with the .gif optimizer. When the resulting image is displayed over the background, there will not be any "halo effect" from the anti-aliasing.

DCR

[Jeff321]

Originally posted by MannInc
PSP 7 offers the HTML code for colors.


I use PSP 5 (which is still a great graphics program, btw) and even it supports HTML code for colors. I use it all the time.

[SBGlasby]

had to add my 2 cents worth.....

normal websafe 256 colors,

I always thought it was Browser Safe 216 colors......

http://www.web-source.net/216_color_chart.htm

http://www.lynda.com/hex.html

http://www.visibone.com/colorlab/

[komik]

In my experience it has been 216 colors to be browser safe. And if I remember right that is what Photoshop sets when you select the Web-Safe option. The other 40 colors are system colors I guess ...I am not exactly sure what happens to them.