need help optimizing an image...

[Ciqala]

we seem to have a few photoshop monkeys in here so can anyone give me some tips on reducing overall picture size/loading times without loosing too much definition or quality

Thanks

Ciq

 

[Manic]

What kind of image is it?

a. A graphic - with only a few (flat) colours?
b. A photographic image with many gradations of colour/tone?

The simple solution:

Step 1. Open the image in Photoshop and go to "File" + "Save for Web."

Step 2. The "Save for Web" window will open. Select the "Optimized" tab at the top of this window.

Step 3. If image is (a.) then under "Settings" select "GIF", then try changing the numerical value for "Colours" to as low a number as possible, while still retaining what you believe is an acceptable amount of quality in the image preview.
If the image is (b.) then under "Settings" select "JPEG", then try various "Quality" settings to produce the desired quality/file size.

In both cases, when varying the "quality" and/or "colours" settings, you can keep an eye on the image file size in the lower left-hand corner of the preview window.

If file size is your higher priority, then select the "optimize menu" (the little arrow-in-a-cirlce opposite "settings") and select "optimize to file size", and enter the file size required. Photoshop will then change the quality value to achieve this file size.

Is this the kind of info you were looking for, Ciq? Hope it helps.

 

[Ciqala]

thanks manic, one or two tips in there that may help me out...

i've also heard that using certain filters on text layers and the such can help bring the overall size down anyone know about that kind of thing?

Ciq

 

[bidawinner]

Manic,

I have also always found it a pain to get my images top the right size while maintaing image quality.

I develop my sites in front page 2000 and started using the "resampling" button to bring the file size down..

I can take a 70K size image ..hit..resample .and bringsd it down to 4K and the image still looks great !

I'm not really sure of what "resampling" does..

Is this an appropriate way of making the size smaller..and exactly what is resampling ?

 

[Manic]

Hi Bid,

My short answer: If it looks good, use it!

I haven't used FrontPage, but I'm assuming the resampling is similar to the "save for web" feature in Photoshop: A way of reducing the amount of data required to recreate an image.

The only way of reducing the file size is by throwing away some of the data which makes up the image. With a GIF, the number of colours can be reduced. With a JPEG (usually a photographic-type image) it's a bit more complex, but basically some of the image data is being lost, when the quality is reduced.

I've found that with many photographic images in Photoshop, the "quality" (using jpeg) can be reduced to 50% and it still looks good, sometimes it can be reduced even further without a noticeable reduction in image quality. I'm assuming FrontPage is doing something similar to this. 70k to 4k sounds pretty good... Maybe it has an even better algorithm than Photoshop!

The only other thing which comes to mind is that if you are using images with large areas of flat colour you should try to use the web-safe colour palette, otherwise you may get dramatic colour shifts (when viewing it under different conditions, eg: a monitor with 256 colours.) Photoshop makes this easy by including the palette in the software.

Also, (as you probably already know) if you want your site to be very accessible, you should have a look at it on other monitors, browsers, platforms, and at different colour settings (ie: 256 colours) to see how the images (not to mention the code!) are holding up under different conditions.

Hope that's helpful.

Perhaps some other people can add something... I've always wondered how the JPEG algorithm actually works... Anyone...?