Need help optimizing graphics

Jaiem,
You need some sort of image optimization program. Like Ulead SmartSaver Pro, or ImageReady, or the image optimizer thing that comes with Photoshop 5.5.

You can download a trial version Ulead SmartSaver Pro from http://www.tucows.com (do a search for Ulead-and it will be at the bottom).

Here are the image optimization rules. If the image contains alot of colors (ie. a photograph) then the best compression format would be .jpg . And if the image contains a few colors, 128 or less. Then .gif is the best compression format.

I that should help ya out.

Ken Elliott

Fireworks should do it. You just have to learn how to compress images and if possible design the images so they will compress better. Use FW help or read your manual. Image compression is an art and getting good at it takes time.

1) In general images with gradients compress better as .jpg files.

2) In general images with areas of flat colors compress better as .gif files.

I use ImageReady so I can't tell you exactly how to do it but IR is close enough to Fireworks to give you a general idea.

First save your image uncompressed, as .psd or .jpg at 100%. (Compressing an image multiple times will multiply the image denigration.) You should be able to open your image in FW. You should be able to set the compression level and then view the tentative image as it will look when compressed at the level you've chosen.

.jpgs generally can be compressed to 15-35% levels. there will be a sharp offs in at various levels when FW decides to make all the various shades of one color such as red into one shade of red.

.gifs - you should get rid of as many colors as you can, in other words a 5 color .gif file will be smaller than an 8 color gif. The differences between web colors, selective color etc. You need to read up on this it's too complicated.

Images in either format will compress further if they have large areas of solid colors.

Take a look at http://www.marryingman.com. That's a site which seesm to have lots of clear non-fuzzy graphics but loads fast. Granted it's written in ASP but still the graphics are good.

How can I make good quality but fast loading pictures like that??

As I said image compression is an art, there is no one way to make all images low calorie.

However, let us examine the pix of the man on the left in the tux. Normally pictures of humans look better as .jpgs due to the wide color palette needed for skin, eyes and hair and the gradients. If you download this picture you will see it is a .gif. In this case the designer decided to limit the color pallette to Dark Red, Black, White, light yellow, dark yellow and dark blue. All of these colors can be limited to a palette of 2 except the blue color which has gradients. In other words you only need one main color of red and a slightly lighter color of red (to give a softer look to the red/white borders). The same is true of black, yellow, etc.

The blue color is the only color that you need more colors with. Maybe 15-20 shades. So basically this .gif requires roughly 64 colors.

The way you would make this is:

Start with the image.

Take it to grayscale.

Color it using either layers (overlay) Or create some kind of duo/tri/quadtone. Add the Type.

You'll need photoshop for all these.

Then take it into FW,

Specify Gif. Try each type of .gif (web, selective, perceptual) to see which looks best. (If your client audience has only 8bit color you must use web but that's almost a thing of the past.)

Try the picture with and without dithering, and try each type of dithering.

Figure out which looks best

Then reduce the color palette as far as you can. In ImageReady you do this in steps:

8 bit = 256 colors
7bit = 128 colors
6bit = 64

Then if you really want to tweak it you can remove less used colors individually.

Like I said it takes time and experience to do it fast, but with patience you'll get it.

ASP has nothing to do with picture quality.

All these techniques everyone is giving to reduce image size are too confusing and strengious.

Simply put, use http://webservices.adobe.com/optimize/main.html (from the creators of Photoshop).

Thanks for the tips everyone!

One more question: With so many people now using at least 56.6k modems, if not DSL or Cable, is it worth still using page load times at 28.8 as a benchmark for development?

I would say so... since most users are still dial-up users. Maybe in the future we will all have DSL or cable, or maybe even TI.

Without going into too much detail about Marc's last post there, I'll just say this: it depends on how you design.

Take me, for instance. If you've seen any of the site's that I've done [notice the lack of a URL in the signature..? down for repairs on design. :D] then you know that I am a heavily graphic designer. In these cases, it's alright to make it so that the site is a bit heavy on a 28.8, because the site is design, not content. However, if you are all about that content thing [aka: you like to put about three hundred million lines of text with not a single graphic :)] then you're not worried too much, because the design will load quickly at most any bandwidth.

The problem I most have with 56K modems is that a lot of them don't move at their designated speed. Which means that you're possibly getting around 25-45% of the 56K modem users who are cruising at that speed, while the rest suffer from old phone lines and other such indescretions.

..And I'm done.

Quote: Originally posted by Mike Fisher
Without going into too much detail about Marc's last post there, I'll just say this: it depends on how [b]you design.

Take me, for instance. If you've seen any of the site's that I've done [notice the lack of a URL in the signature..? down for repairs on design. :D] then you know that I am a heavily graphic designer. In these cases, it's alright to make it so that the site is a bit heavy on a 28.8, because the site is design, not content. However, if you are all about that content thing [aka: you like to put about three hundred million lines of text with not a single graphic :)] then you're not worried too much, because the design will load quickly at most any bandwidth.

The problem I most have with 56K modems is that a lot of them don't move at their designated speed. Which means that you're possibly getting around 25-45% of the 56K modem users who are cruising at that speed, while the rest suffer from old phone lines and other such indescretions.

..And I'm done. [/B]

Good post, Mike. I'm the perfect example of the dial-up statement. I have a 56K modem and all, but I can only get 28.8K at best...