Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : compressing images/pictures more properly without losing much quality

[Pandend]

I use Photoshop to create my images on the website.
Usually I start with a PSD file and then I have to save it for web
with the Photoshop compression options for GIF/PNG or JPG.
To preserve quality I would need JPG - with GIF I usually lose quality. PNG has always excellent quality, but output file sizes are always horrible, somewhat around 500KB per image.
My JPG's end up with about 60KB - 150KB each which is still much if the site receives many daily hits and all these images are loading each time.
So I would like to ask you all now, with which program I can reach a better image compression without much of quality loss, since Photoshop doesn't provide me a proper image compression or I'm doing something totally wrong.

[dennisthompson]

Well... not all of that is necessarily true.. You can get a .png icon and slap it on a background and save it as a .gif without loss of quality in the icon or any other part of the image. I've done that multiple times with it turning out exactly as I wanted it to.

Don't think as .gif and .png as the same. .png is lossless image quality, that is, no aliasing. You can read all about the .png image format from the png site: http://www.libpng.org/pub/png/pngintro.html Just remember that .png as one main advantage over .jpg, you can have transparency with a .png but the image is almost always bigger than a .jpg with a compression quality of 12 in photoshop.

If you're looking to optimize your images of something then you should stick all of your icons onto a (the term escapes me) single image file and place your icoms on different areas of this single image file. This is so there is only one http request instead of a dozen on a web page.

As for image compression, use .gif with a transparent background. That's the best image compression you'll get while retaining some if not most of the image fidelity. You can just use photoshop for that, I'm not aware of a different program that deals with image compression..

[DesignWorks]

If the image doesn't use a wide range of colours I would reccomend .GIF, if it is a photograph etc then you would just have to make do with the larger high quality images.

[Pandend]

Thanks for telling me your opinion about that. The images I use aren't icons, but screenshots or previews of items to download.
The images preview artwork, so they're variegated. Using GIF makes this images looking blurry, no way to publish things in quality like that.
If I save as JPG I have the quality which I need but size is way to large.
A simple banner has there 85-100kb already, most screenshots 150kb, that's way to much at least by opinion of my penultimate host.
I saw designer homepages with very good looking but highly compressed pictures in very small sizes around 17KB - 30KB per image or screenshot.
I have no clue how they did save their images, I'm just wondering.

[dennisthompson]

Well how big are these previews? I have 125X125 thumbnails that average about 9 KB and I used .gif and they look fine. Is there a page that we can look at that has these previews?

[Memidex]

The best approach/format is very dependent on the image content. For screenshots, I prefer the lossless compression of PNG. The lossy compression of JPG is often noticeable with screen shots. (I prefer JPG with with photographs where the lossy compression is less noticeable.)

To get better compression with PNG, you can often reduce the color palette. For screen shots without large areas of gradation (subtle colors blending into each other) you can usually get away with a 256 (8-bit) color palette or smaller. This can dramatically reduce PNG size. Most advanced image software will let you control this.

The compression of GIF sometimes *seems* better because GIF doesn't support more than a 256 (8-bit) color palette. PNG supports a wide range of palette sizes.

[Bingen]

In Photoshop you can use Alt+Shift+Ctrl+S what is File>Save for Web & Devices.
Good luck.

[Pandend]

Thanks for all your help in this matter. I have now achieved a better compression with Photoshop by adjusting my palettes to the colors which
I usually use to save for web. The result with PNG is not superb, but much
better as it was before. I think with time I'll figure out how to improve it.