Depends on the image. If its a photo, saving it as a gif or png-8 could look awful. Typically in this scenario you'd stick with jpg, save for web and move the quality slider down to the point that compression artefacts vs size is at an acceptable level. Some busy images (lots of contrasting colours) will be naturally larger though, so there will always be some give and take.
For rasterised vector artwork, png-8 or gif can be fine (again depends on the number of colours). I've been testing a png of an illustration I did, exported as a 32 colour png (from fireworks) with alpha transparency at 1600*1200. It comes out with near perfect transparency at about 53kb.
Web snap is pretty redundant. There was a time when browsers were restricted to a fixed palette and web snap meant you could export an image mapped to that palette.
To conclude, the format you choose depends on the image and the situation - there is no magic, catch all, format. If you have any images in mind, link to the full size/quality versions and we'll see if we can help you establish the optimum settings.
File > Save for Web & Devices...
-> Choose JPEG
-> Either choose a preset from the drop down on the left (low, medium, high, very high, maximum)
OR Click on the quality dropdown to expose the slider, or type a new number in the box (%age) .
Here is a link to one of a wonderful set of photos taken for our shop, any advise optimizing this would be superb.
Originally Posted by Jacob
A couple of things I forgot to mention:
When you're working on images, never save them as JPGs. Every time you save a JPG, you lose quality. For example, suppose your camera creates JPG files. If you're going to work on them, save them as PNGs (or PSDs if you're staying in Photoshop the whole time). Then you can save as many times as you like without losing quality. At the end of the process, you'll export a JPG for the web.
What you should avoid doing is taking the camera JPG, working on it, saving it as a JPG, and then exporting a final JPG for the web. That middle step will always lose some quality.
You also have to decide how big you want the image to be. Reducing the image dimensions is the single most effective way of reducing the file size. Let's take your image for example:
Original image [3733 * 2498]: 743 kB
Reduced to [500 * 335], saved as a 24-bit PNG: 108 kB
Exporting this as a JPG at 60% quality in Photoshop: 24.5 kB
Running JPGtran on this (lossless compresssion): 23.5 kB
The distribution of savings varies greatly depending on the image. Normally you'll see a much greater saving by reducing the image dimensions than happened here. Sometimes, especially with PNGs, you get a large reduction from the final step (lossless compression).
Last edited by Mike Hopley; 30 Mar 2011 at @ 11.22.
Depends on the image. If its a photo, saving it as a gif or png-8 could look awful. Typically in this scenario you'd stick with jpg, save for web and move the quality slider down to the point that compression artefacts vs size is at an acceptable level.
Pick a suitable format (e.g. JPG for photos, PNG-8 for graphics).
What would the format be for CSS sprites that contain photos and graphics - or should you not combine?