3

Save for web feature in Photoshop for image size reduction, would this be the simplest way for a beginner (like myself) to try and save on (some) loading time without losing too much quality.

I am using images for my menu buttons, background, header, post page, etc etc

I have only just found this save for web feature and I was wondering does it really help in image size or does it not make that much difference.

Is there any other option?

(website for reference: www.kizzieskorner.com)

PS: if you mark my question down please could you give an explanation why so I know what not to do next time - as I am new to these question forums too!

Improve this question

3 Answers 3

Reset to default
6

Yes. In many cases the Save for web feature will reduce your file sizes. This is because in addition to allowing you to change the quality of your image (for example, jpeg quality 10 to 100), it also strips out a lot of unnecessary (for web purposes) metadata from your images like camera model, time the photo was taken, white balance, and so on.

Using "save as" and adjusting the quality manually usually retains this information (assuming it's there to begin with) so you will usually not get as small file sizes as you would using "save for web".

For a detailed explanation, see this page.

You may also be interested in trying out Riot (Radical Image Optimization Tool--Windows only, I believe). When I'm sharing images with friends and I want to remove the metadata, I usually use this since it keeps the image in its original quality, and a photo from my digital camera that might have been 4MB drops down to under 1MB, just to give you an idea of how much metadata some pictures have.

Improve this answer
1

Using Save For Web is definitely the best way to go, and it produces far smaller files than using Save As.

Some ways to reduce file size without changing the image dimensions:

  • Try different file types (JPEG, GIF, PNG). There's lots of cases where one will be better than the other.
  • For JPEG images, try different quality settings.
  • For GIF images, try different numbers of indexed colours.
  • For PNG8 images, try different numbers of indexed colours.
  • For PNG24 images, you could try utilities like ImageOptim.

You'll have to use your own eyes to judge if the results are acceptable. Most of those techniques (all but the last) reduce the visual quality of the image.

Please note: I'd recommend not altering the Image Size in Save For Web. It changes the exported image's dimensions. In general, this is not a desirable way to reduce the file size of user interface elements for a webpage, because it will actually alter the dimensions — images will then either appear too small for their purpose, or get scaled up and look really bad.

Save For Web

Improve this answer
2
  • I understand what you're trying to say about changing image dimensions, but I also disagree. If you know in advance what your desired dimensions are for different devices, I feel that it is good to optimize your image sizes both in terms of dimensions and quality settings. There's no reason to host a 4000 px image scaled to 1600 px if you know that your widest design accommodates a maximum of 1600 px. I sometimes use @media min and max width settings combined with scaling images. It means you have to save several versions of your images, but I feel the user experience is better.
    – Ananda Mahto
    Jun 18, 2012 at 6:37
  • @mrdwab: I believe Marc was referring to adjusting the pixel dimensions for the sole and express purpose of reducing file size. He is 100% correct. You are also correct, but for reasons which do not directly speak to the purpose of the original question.
    – horatio
    Jun 19, 2012 at 20:42
1

Yes, it most definitely does make a big difference. After using this feature I tend to stick the images into http://smush.it or http://kraken.io/ to squeeze out the last few drops.

To run a long side this, sorry if you already know these, you can minify your code - CSS and JS, using http://www.cssdrive.com/index.php/main/csscompressor/ and http://jslint.com/.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.