Thread: Reducing Images file size for web

How do you reduce the image file size while keeping the width and height the same?

I read here that "The Best method to decrease file size for a WEB image is to decrease the quality.", how can you do this in PS? Is that 'saving for web' or something else?

In the 'save for web settings' I reduced 'colors' to 128 and made 'web snap' 65%. This did not have a visible effect no the image but did reduce the file size

I would appreciate some guidance

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.

quality slider

I can not see it, can you be more specific.

Thanks

Sure:
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) .

There are three stages in optimising images:

1. Pick a suitable format (e.g. JPG for photos, PNG-8 for graphics).
2. Reduce the quality level if it's a JPEG, or the number of colours if it's a PNG (this is lossy compression).
3. Run lossless compression tools to further optimise the image (e.g. PNGcrush, JPEGtran).

(1) and (2) are the most important steps. (3) is often neglected, but gets you slightly smaller file sizes for free.

Cheers guys

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.

Here is a link to one of a wonderful set of photos taken for our shop, any advise optimizing this would be superb.

londontshirt.com/image/BUSTAXI1_SHADOW.jpg

Here is a link to one of a wonderful set of photos taken for our shop, any advise optimizing this would be superb.

londontshirt.com/image/BUSTAXI1_SHADOW.jpg

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:

1. Original image [3733 * 2498]: 743 kB
2. Reduced to [500 * 335], saved as a 24-bit PNG: 108 kB
3. Exporting this as a JPG at 60% quality in Photoshop: 24.5 kB
4. 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).

Many thanks, this is all very helpful.

I have been fitting a new kitchen, hence the late reply.

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?